Color

Los componentes nunca escriben un color: piden un token semántico (bg-card, text-muted-foreground) y el motor lo resuelve para la personalidad y el modo donde viven. Cada valor de esta página se lee en vivo del navegador: mueve la barra de arriba y cambian juntos, contrastes incluidos.

De dónde sale cada color

Una marca no elige veinte colores: elige marca, tinta, papel y tinte. El motor (eclipse_ui/tokens.css) tiñe la tinta con un poco de la marca y saca cada gris como un paso de esa tinta mezclada con el fondo en oklab: color-mix(in oklab, tinta 15%, fondo) es el borde. En oscuro tinta y papel se invierten y los pasos crecen. El texto sobre la marca y el texto de marca se ajustan solos hasta leerse. Carbón fija sus valores a mano, así que sus muestras no caen exactas sobre la línea. Para ver cada personalidad completa sobre la página de un estudio, abre Personalidades.

Superficies

La escalera de capas: cada superficie es apenas distinta de la de abajo y la separa un borde de 1px. Elige por función, no por tono: la tarjeta es tarjeta en todas las personalidades aunque cambie su color. Más en Profundidad.

Texto

Cinco tonos de texto, de lo que se lee primero a lo que casi no se ve. Cada celda está pintada sobre su superficie y dice su contraste medido (WCAG 2): AAA desde 7:1, AA desde 4.5:1, AA grande desde 3:1 (solo títulos de 24px o 19px seminegrita) y no apto para texto por debajo.

Bordes

El borde de 1px es la separación principal del sistema, antes que cualquier sombra. Tres pasos: el de siempre, uno más tenue para dividir dentro de una pieza y uno más firme para lo que está bajo el cursor.

Acento

La marca es la luz de tu producto y se usa poco: el botón principal, el medidor, lo que importa en la vista. El texto sobre ella lo elige el motor (oscuro o claro según qué tan clara es la luz); el texto en color de marca usa text-primary-text, que se acerca a la tinta hasta leerse.

Estados

Éxito, atención y peligro no salen de la marca: un rojo siempre debe leerse como error, en cualquier marca. Cada uno tiene su relleno con su texto encima y su versión como texto; los números dicen dónde se puede usar cada cosa.

Foco

El único color fuera de la marca es el del foco, y solo aparece con teclado (:focus-visible). eui-focus pinta un anillo nítido de 2px separado 2px del control con --eui-focus (azul en Carbón) o, si la personalidad no lo fija, la marca al 60%. eui-ring es la versión con halo (separación del color del fondo, el anillo y un resplandor que sigue el dial --eui-halo); la usan los botones. Recorre la muestra con Tab.

Reglas de uso

• Por función, no por tono. text-foreground para lo que se lee primero, text-muted-foreground para lo secundario: los dos pasan AA en fondo, elevado, tarjeta, hover y relleno, en todas las personalidades.
• text-faint solo para metadatos (horas, contadores) y text-subtle solo para íconos tenues: no pasan AA en todas las personalidades. Si hay que leerlo para decidir algo, es text-muted-foreground.
• El color nunca va solo. Un estado es punto o ícono más texto ("Confirmada", "Lista de espera"); un error dice qué pasó y cómo seguir.
• La marca no es para fondos grandes. Botón principal, medidor, el punto que importa. Para una superficie con marca, bg-wash o bg-primary/10.
• Texto de marca con text-primary-text, nunca text-primary: la marca pura es para rellenos y no siempre se lee sobre el fondo.
• Atención es ícono y relleno. warning es un amarillo: como texto sobre un fondo claro casi nunca llega a AA. Úsalo de relleno (con text-warning-foreground encima) o como texto solo donde la muestra de estados diga AA.
• Opacidad con modificador (bg-primary/10, border-destructive/30), nunca un color nuevo. Nada de hex ni gray-* en una vista: si falta un color, falta un token.

Contraste en todas las personalidades

El contrato de contraste vive en config/eclipse_ui/contrast.yml: estos pares deben pasar AA (4.5:1) en todas las personalidades, en claro y en oscuro. La tabla los mide ahora en este navegador, sin importar la barra; la prueba test/eclipse_ui/contrast_test.rb los mide igual (con Chrome sin ventana, dentro de bin/rails test) y falla si alguno baja.

• foreground sobre background, raised, card, surface-hover, muted
• muted-foreground sobre background, raised, card, surface-hover, muted
• destructive sobre background, card, surface-hover
• primary-text sobre background, card
• primary-foreground sobre primary, primary-hover
• destructive-foreground sobre destructive
• success sobre background, card
• success-foreground sobre success
• warning-foreground sobre warning