Color
Los roles de color, el primario monocromo, el único acento, y cómo se genera y se comprueba cada esquema.
Tanrei nunca le pide a un componente que elija un color. Los componentes piden un rol, como primary o surface-container, y el tema activo decide qué color ocupa ese rol. Los roles los define el vocabulario de Tanrei, y sus valores, la capa de cada sistema de diseño.
- Intenciones:
primary,secondaryy las cuatro intenciones de estadoerror,success,warningeinfo. Cada una viene como un conjunto de cuatro: el color, su coloron-para el contenido que se coloca encima, un-containermás discreto yon-…-container. - Superficies:
surface, la escala de cinco pasos desurface-container-lowestasurface-container-highest, además desurface-dimysurface-bright. El contenido sobre cualquier superficie usaon-surfaceo el más discretoon-surface-variant. - Contornos:
outlineyoutline-variant(véase más abajo). - Roles inversos para los elementos que invierten el tema a propósito, como un snackbar.
- Roles fijos, que mantienen el mismo tono en claro y en oscuro.
- Utilidades:
scrim,shadow,focus-ringy los colores de anillo y de sombra que usa la elevación.
Empareja siempre un relleno con su propio rol on-. Ese emparejamiento es lo que garantizan las comprobaciones de contraste.
En el tema predeterminado, primary es casi negro en el modo claro y casi blanco en el modo oscuro. Así, la acción más importante de una pantalla es el objeto con más contraste que hay en ella, y nunca compite con los colores propios del producto. secondary es un neutro más suave para las acciones de apoyo.
El acento no forma parte del vocabulario del núcleo. Es una paleta que el sistema predeterminado de Tanrei declara (semilla #30a3f0), lo que le da los mismos cuatro roles que a cualquier intención: accent, on-accent, accent-container y on-accent-container. El rol del núcleo focus-ring toma su color de él, y nada más lo hace: en el sistema predeterminado, link toma el color del primario, y un enlace se distingue del texto que lo rodea por su subrayado. Un producto declara sus propias paletas de la misma manera (un color de marca que no debe recalcularse, o el «correcto» y el «incorrecto» de un cuestionario), y un preajuste que imita a Material Design 3 declara tertiary así, en lugar de que Tanrei cargue con ese hueco para todos. No uses el acento para decorar: cuando todo es azul, nada lo es.
Los dos roles de contorno se parecen y cumplen funciones opuestas.
| Rol | Propósito | Contraste |
|---|---|---|
outline |
Un límite funcional: lo único que muestra dónde está un control, como en un campo de texto vacío, una casilla de verificación sin marcar o un botón con contorno. | Al menos 3:1 frente a todos los roles de superficie |
outline-variant |
Una línea fina decorativa: divisores, bordes de tarjetas, el anillo de la elevación. Quitarla no debe ocultar ninguna información. | Ninguno con el contraste estándar, donde es un negro o un blanco con poco alfa. Al menos 3:1 con contraste medio y 4.5:1 con alto, frente a todos los roles de superficie, y siempre más débil que outline |
Precaución
Si un borde es la única señal de que existe un control, debe usar outline. Una línea fina con un 8% de alfa resulta agradable, y es invisible para muchas personas.
Cada tema existe en tres niveles de contraste. Estándar es el predeterminado. Medio y alto llevan los roles de contenido hacia los extremos y refuerzan los dos roles de contorno. En la web, el contraste alto se aplica automáticamente con prefers-contrast: more; las plataformas nativas siguen su propio ajuste del sistema. Pruébalo aquí (el selector se aplica a toda la página):
Contraste
Los colores no se eligen a mano. Un archivo de sistema (tokens/systems/core.system.json) declara las paletas (un color semilla para el acento y para el error, y el matiz y el croma de los neutros) e indica, como datos, qué tono de qué paleta toma cada rol en claro y en oscuro, en cada nivel de contraste. Durante la compilación, un generador:
- convierte cada color clave en una paleta tonal en el espacio de color HCT con la biblioteca
material-color-utilities(Apache-2.0), donde el tono se corresponde de forma predecible con el contraste; - limita las paletas neutras al croma del tema, que de forma predeterminada es cero, para obtener grises puros;
- asigna un tono a cada rol para claro y oscuro en cada nivel de contraste;
- escribe el resultado como archivos DTCG en
tokens/generated/.
El algoritmo del generador lleva una versión (specVersion), de modo que un cambio en la asignación es un hecho deliberado y revisable, y no un desplazamiento silencioso de todos los colores.
Para las seis combinaciones de tema y contraste, la compilación de los tokens falla a menos que:
- cada par
(role, on-role)alcance 4.5:1, y 7:1 en los dos esquemas de contraste alto; outlinealcance 3:1 frente a todos los roles de superficie;focus-ringalcance 3:1 frente a las superficies sobre las que se dibuja.
No se puede rebajar un umbral para que una compilación pase. Consulta la lista completa de roles y valores en la referencia de tokens de color.