Light y Dark

En el módulo 3 leíste las dos columnas de las tablas de semánticos de color. En esta lección verás cómo se decidió la columna Dark: qué patrones sigue, por qué no es el modo Light dado la vuelta, qué fondos se eligieron y qué se queda fuera de los tokens.

En esta página

• Los patrones de la columna Dark
• No es un espejo
• Los fondos de cada modo
• Tokens que no cambian
• Valores directos por modo
• Lo que los tokens no cambian
• Lo que te llevas

Los patrones de la columna Dark

Las tablas completas, con el uso de cada token, están en Semánticos de color. Agrupadas por función, siguen estos patrones:

La idea general es la esperable: lo que en Light está en la parte clara de la escala pasa a la parte oscura en Dark, y al revés. Los fondos son casi blancos en Light y casi negros en Dark; el texto, lo contrario.

No es un espejo

Si la columna Dark fuera un espejo exacto de la escala (50 ↔ 950, 100 ↔ 900, 300 ↔ 700…), bastaría con una regla para generarla. No lo es. Tres ejemplos:

• El texto de acento. En Light apunta a emerald/700. El espejo sería emerald/300, pero Dark usa emerald/400: es el paso que el contraste elige. Sobre neutral/950, emerald/700 se queda en 3,89:1, y emerald/400 llega a 10,92:1 (El contraste decide el paso).
• Las superficies. En Light, strong apunta a neutral/100; en Dark, a neutral/800, no a neutral/900, que en Dark ya usa subtle.
• El botón principal. No cambia. Lo verás en Tokens que no cambian.

Cada alias de la columna Dark se eligió como los de Light: pensando en su función y comprobando el contraste con el fondo con el que se usa (Semánticos de color). El contraste a fondo lo verás en el módulo Accesibilidad (Contraste de texto).

Los fondos de cada modo

El fondo de la página es la decisión que más se ve en cada modo. En DesignToken101 se compararon dos opciones por modo, viendo el diseño:

Con la otra opción, el texto principal daba 17,01:1 en los dos modos. Las dos cumplían de sobra los 4,5:1 de WCAG 2.2 (Understanding 1.4.3). La elección fue visual, y se puede reabrir: basta con cambiar el alias de color/background/neutral/default y volver a comprobar los pares que lo usan.

1. 50, #F9FAFA
2. 100, #F4F5F5
3. 200, #E3E6E5
4. 300, #D1D5D3
5. 400, #9BA39F
6. 500, #6C7671
7. 600, #4B5550
8. 700, #38433E
9. 800, #1F2924
10. 900, #101A15
11. 950, #050C09, Fondo de la página en Dark

El fondo de la página decide el resto de superficies. Las superficies subtle están un paso más allá del fondo: neutral/50 en Light (junto a white) y neutral/900 en Dark (junto a neutral/950). Si el fondo de Light fuera neutral/50, subtle tendría que pasar a otro paso.

Tokens que no cambian

Algunos semánticos de Semantic color apuntan al mismo primitivo en Light y en Dark:

Que el valor no cambie no saca al token de la colección. Un modo guarda un valor para cada variable de la colección (Qué es un modo), así que estos tokens tienen un valor en Light y otro en Dark, aunque coincidan. Si un día el botón tuviera que cambiar en Dark, cambiarías un alias, no la estructura.

En código pasa lo mismo: cada bloque de modo lleva todos los tokens de su colección, también los que no cambian (Los modos en código).

Valores directos por modo

Dos semánticos de DesignToken101 no son alias, porque necesitan transparencia y un alias de Figma no puede cambiar la opacidad (Cuando un semántico no es alias). Con los modos, cada uno lleva su valor escrito en cada columna:

translucent es el fondo de la cabecera fija. Tiene que ser el fondo de la página con transparencia, así que su valor cambia con el modo como el fondo. overlay es la capa que oscurece la página cuando el panel de navegación móvil está abierto, y es igual en los dos modos.

Un valor directo no sigue a su primitivo: si cambiaras neutral/950, tendrías que cambiar a mano el valor de translucent en Dark. Por eso la descripción de esas variables dice que son valores directos y por qué.

Lo que los tokens no cambian

Los modos cambian lo que está vinculado a variables. Lo que no lo está se queda igual en los dos modos:

• Imágenes y capturas. Una captura de una interfaz clara se ve igual sobre un fondo oscuro.
• Logotipos exportados. En el archivo de Figma de DesignToken101, el logotipo usa variables y cambia con el modo. Exportado como SVG, el color queda escrito en el archivo. Por eso la web tiene una versión del logotipo por modo: el texto pasa de #101A15 en Light a #F9FAFA en Dark, y muestra una u otra según el tema.
• Valores sueltos. Un color escrito a mano en el diseño, sin variable, no responde al modo. Al aplicar Dark a una pantalla, es la forma más directa de encontrarlos: son lo que no cambia.

Lo que te llevas

• La columna Dark sigue la idea de la escala invertida, pero cada alias se decide por su función y su contraste.
• Los tokens que no cambian siguen en la colección, con su valor en cada modo; los valores directos se escriben en cada modo.
• Lo que no está vinculado a variables, como un SVG exportado, necesita su propia versión por modo.

Fuentes

• WCAG 2.2: Understanding 1.4.3 Contrast (Minimum)
• Figma: Modes for variables