Semánticos de color

El color es la capa semántica más grande de DesignToken101 y la que mejor muestra para qué sirven los alias. En esta lección verás cómo se pasa de una lista de usos a tokens semánticos, cuáles tiene esta web y a qué primitivo apunta cada uno, y qué decide ese primitivo.

En esta página

• Del uso al token
• Fondo, texto y borde
• Light y Dark, lo justo
• Los semánticos de color de DesignToken101
• El contraste decide el paso
• Varios semánticos, un primitivo
• Un token nuevo cuando hace falta
• En Figma
• Lo que te llevas

Del uso al token

En el ejercicio del módulo 2 anotaste qué primitivo usa cada elemento de tu diseño. Esa lista es el punto de partida. Así sería un fragmento de la de DesignToken101:

Un token semántico no nombra un elemento, sino una función. Los bloques de código y las tarjetas comparten función (una superficie un poco distinta del fondo de la página), así que comparten token: color/background/neutral/subtle. Si dos usos tienen el mismo primitivo y la misma función, son un solo token. Si tienen el mismo primitivo y funciones distintas, son dos tokens: lo verás en Varios semánticos, un primitivo.

Fondo, texto y borde

Cada semántico de color dice a qué propiedad se aplica: background (fondo), text (texto) o border (borde). Los iconos usan los tokens de texto de su contexto; no hay propiedad icon.

Separar la propiedad tiene dos consecuencias prácticas:

• En Figma, cada propiedad tiene su scope. Un token de texto aparece al elegir el color de un texto o de una forma, y no al elegir el relleno de un marco. Lo verás en Las colecciones semánticas.
• El contraste se comprueba por pares. Un texto se mide contra el fondo sobre el que va. Con la propiedad en el nombre, cada par se lee directamente: text/neutral/default sobre background/neutral/default.

Light y Dark, lo justo

La colección de los semánticos de color tiene dos modos, Light y Dark. Cada modo puede apuntar a un primitivo distinto:

El nombre que aplicas al diseño es el mismo en los dos modos. Lo que cambia es el destino del alias. Es la razón de ser de la capa semántica: sin ella, cambiar de tema sería cambiar cada elemento del diseño. Cómo se crean y se aplican los modos lo verás en el módulo Modos y temas, en Crear los modos en Figma y Aplicar los modos al diseño. En este módulo, basta con leer las dos columnas de las tablas.

Los semánticos de color de DesignToken101

Son 33 tokens en la colección Semantic color de Figma. En esta lección están los de base. Los de estado (hover, active, seleccionado y foco) los verás en Estados, y dos tokens con transparencia, en Cuando un semántico no es alias.

Neutros: la estructura de la página.

Acento: el color de la marca.

Mensajes: información, éxito, aviso y error. Los cuatro roles siguen el mismo patrón de tres tokens (fondo, borde y texto):

El rol de error se llama danger, como en el SDS de Figma (SDS: theme.css) y en Atlassian (Atlassian: Design tokens). El éxito usa la escala emerald, la de la marca; viste por qué en Escalas de estado.

El contraste decide el paso

En el módulo 2 viste qué pasos de cada escala sirven para texto (Lo que la escala dice sobre su uso). La capa semántica es donde se toma la decisión. Un ejemplo, el texto de los enlaces:

1. 50, #F2FCF7
2. 100, #E1F9EE
3. 200, #C4F3DD
4. 300, #93EAC5
5. 400, #4FD7A6
6. 500, #33CC99
7. 600, #0EA075
8. 700, #1A7D5C, text/accent/default en Light
9. 800, #1F624A
10. 900, #1F503E
11. 950, #0D2C20

• El color de marca, emerald/500, no sirve para texto sobre blanco: 2,05:1. WCAG 2.2 pide 4,5:1 para el texto normal (Understanding 1.4.3).
• emerald/700 sí: 5,08:1 sobre blanco. Por eso color/text/accent/default apunta a él en Light.
• En Dark se invierte: sobre neutral/950 el 700 se queda en 3,89:1, y el 400 llega a 10,92:1. Por eso Dark apunta al 400.

El botón principal hace lo contrario: mantiene el color de marca de fondo y cambia el texto. Con texto blanco no llegaría a 4,5:1; con color/text/on-accent (neutral/950), llega a 9,63:1. Los tokens on- existen para eso: nombran el texto que va sobre un fondo de color fuerte, y cada par se comprueba junto.

Varios semánticos, un primitivo

emerald/700 aparece en cuatro tokens:

No es una repetición: son cuatro decisiones que hoy coinciden. Si mañana el éxito necesita otro verde, cambias los alias de success y el acento no se mueve. Si los fundieras en un solo token, separarlos después obligaría a revisar cada elemento del diseño que lo usa.

La regla de la primera sección, en una frase: un token por función, aunque el valor coincida.

Un token nuevo cuando hace falta

Los semánticos de color no salieron todos a la vez. color/border/accent/default se añadió al diseñar el Callout de recomendación: los demás Callout tenían borde de su color, y este no tenía token. Se creó cuando el componente lo pidió, no antes.

Hay una excepción, decidida a sabiendas. Hoy, los tokens de danger y el fondo y el borde de success no tienen ningún uso en la web: se crearon con el resto de la tabla, como un juego completo de mensajes. Se mantienen porque la web los usará más adelante. Es una excepción al criterio, y está registrada como tal.

En Figma

En DesignToken101, los semánticos de color están en su propia colección, Semantic color, con los modos Light y Dark. Cada variable se crea así (Figma: Create and manage variables):

1. Crea una variable Color con el nombre completo, por ejemplo color/text/accent/default.
2. En la columna Light, haz clic derecho sobre el valor, elige Create alias y busca color/emerald/700.
3. Repite en la columna Dark con color/emerald/400.
4. Escribe en la descripción para qué se usa. En DesignToken101, "Enlaces y texto de acento". La descripción llega a la exportación como $description.

El scope y la visibilidad de estas variables los verás en Las colecciones semánticas. Las crearás para tu sistema en el módulo Nombrar, ya con su nombre definitivo (Crear las variables en Figma).

Lo que te llevas

• Un semántico nombra una función, no un elemento: un token por función, aunque el valor coincida.
• Cada modo puede apuntar a un primitivo distinto; el nombre que aplicas no cambia.
• El contraste decide a qué paso apunta cada texto.

Fuentes

• Figma: Create and manage variables and collections
• Figma: Simple Design System, theme.css
• Atlassian Design System: Design tokens
• Understanding 1.4.3 Contrast (Minimum)