Colores y temas

Roles semánticos

Elige colores por su función: fondo de trabajo, superficie, borde, texto o foco. Los valores de los tokens CSS cambian con el tema.

Acentos y estados

Las acciones principales usan el tono primary de CrmActionButton. Peligro, éxito y advertencia deben acompañarse de texto o iconografía. Los acentos de módulo aportan contexto sin modificar la geometría ni la jerarquía del sistema.

Uso correcto

Usa var(--vee-text-primary) y var(--vee-surface-raised) para roles equivalentes. Para controles y tarjetas, prefiere la primitiva completa.

Evitar

No copies hexadecimales desde esta página a estilos locales. Primary de RizzUI, las acciones compartidas y el website usan el mismo navy. Comprueba ambos temas y el contraste del texto sobre cada superficie.

Tokens de geometría

El catálogo también muestra los radios compartidos: --vee-radius-control (14 px), --vee-radius-panel (16 px), --vee-radius-card (24 px) y --vee-radius-pill (cápsula). Filtra por «radius» para comparar sus siluetas.

Primary global

--vee-primary es grafito translúcido (rgba(28, 37, 49, 0.88)), --vee-primary-hover es rgba(32, 43, 57, 0.90) y --vee-on-primary es blanco. CrmActionButton tone="primary", los CTA de marketing de Platform y el selector de tenant consumen este contrato en ambos temas. El texto blanco sobre el primary conserva contraste AA. Los acentos celestes de selección e información no sustituyen al primary de acción; el foco es neutro.