Color

El sistema de color se organiza en dos capas: primitivos (valores concretos de paleta) y semánticos (tokens que definen el rol del color en la interfaz). Los componentes siempre usan tokens semánticos; nunca valores en hexadecimal directamente.

Paleta primitiva

Los primitivos definen los colores base del sistema. No deben usarse directamente en componentes. El patrón de nombre es --gn-color-{familia}-{escala}.

Color primario

--gn-color-primary es el token de acción principal del sistema. Sus variantes cubren los estados interactivos de botones, enlaces y controles de formulario.

Colores de estado

Cada estado tiene cinco escalones: lighter (fondo sutil), light (énfasis leve o borde), base (color principal), dark y darker (texto fuerte o contraste). Pasa el ratón sobre cada muestra para ver el nombre del token.

Tokens semánticos de color

Los componentes nunca usan primitivos directamente; usan tokens semánticos que describen el rol del color. Esto permite que los temas y modos redefinan la apariencia sin tocar los componentes.

Los tokens semánticos se agrupan en cuatro categorías:

Los tokens *-disabled y los de estados activos/foco están también disponibles. Consulta src/tokens/tokens.css para la referencia completa.

Tokens de enlace

Los estados de enlace usan su propia familia semántica: --gn-color-link-*. En el tema por defecto los enlaces usan gris oscuro y se tiñen de rojo en interacción; en .gn-theme--blue cambian a azul.

El estilo visual completo del enlace (subrayado, grosor, offset) está implementado en .prose a. Ver página de Tipografía.

Variante de tema

La clase .gn-theme--blue en un contenedor padre sobreescribe --gn-color-primary de rojo corporativo a azul (--gn-color-blue-500). Se usa en secciones de navegación institucional o contextos con fondo azul. El resto de tokens semánticos permanece igual.

Modos de color y temas

La exportación de Semantic-color.zip incluye actualmente estos modos:

• default.tokens.json (base)
• blue.tokens.json (tema alternativo)
• Invert.tokens.json (tema invertido)

Reglas de salida en CSS:

• default se publica en :root (modo base del sistema).
• blue se publica en .gn-theme--blue con solo variables distintas frente a default.
• Invert se publica en .gn-theme--invert con solo variables distintas frente a default.

Ejemplo de uso:

Importante: token invert vs tema invert

• Un token como --gn-color-text-invert es un token semántico individual.
• Invert.tokens.json es un modo completo exportado desde Figma.

No son equivalentes: el primero define un valor concreto; el segundo redefine múltiples tokens del sistema dentro de un scope de tema.