/* ============================================================================ Juicy — Dashboard Design System · SEMÁNTICA ---------------------------------------------------------------------------- Colección "Tokens" del Figma gu6rzJOo8cCgbliRyOHBuf. 70 tokens de color. Transcritos del panel de Variables: cada uno referencia un primitivo, igual que allá. Si un valor aquí es un literal, es un bug. Esta es la ÚNICA capa que pueden tocar los componentes. Nunca --neutral-400 ni --green-200 directo: eso fue lo que descarriló a main.css. Dos familias paralelas — la distinción importa: action/* → elementos interactivos (botones, chips). soft = rampa 300 feed/* → superficies de feedback (badges, alerts). soft = rampa 200 ============================================================================ */ :root { /* ---- text (5) ----------------------------------------------------------- */ --text-primary: var(--neutral-500); /* DIVERGE DE FIGMA (aprobado por el dueño 2026-07-16). Figma lo bindea a `neutral/400` = 3.86:1 sobre blanco: reprueba AA, y es el color de TODO el texto secundario del sistema (subtítulos, metas, etiquetas de gráfica, ayudas de campo). Ahora apunta al primitivo `neutral/450` añadido para esto: 6.37:1, y sigue leyéndose como secundario (ΔE 12.3 del primario). Ver la nota del 450 en primitives.css. */ --text-secondary: var(--neutral-400); --text-muted: var(--neutral-300); /* el 250 (#CFD7E1) era demasiado claro para texto */ --text-on-color: var(--neutral-white); --text-brand: var(--brand-accent); /* ---- surface (5) -------------------------------------------------------- */ --surface-page: var(--neutral-white); --surface-sunken: var(--neutral-200); --surface-sunken-light: var(--neutral-100); --surface-raised: var(--neutral-500); /* oscuro: barra de tabs del POS */ --surface-inverse: var(--neutral-700); /* ---- border (4) --------------------------------------------------------- */ --border-default: var(--neutral-200); --border-light: var(--neutral-150); --border-strong: var(--neutral-250); --border-focus: var(--neutral-600); /* ---- action (10 × 3) ---------------------------------------------------- */ --action-primary-default: var(--ui-500); --action-primary-text: var(--neutral-white); --action-primary-soft: var(--ui-500); /* == default (ver nota 1) */ --action-secondary-default: var(--ui-400); --action-secondary-text: var(--neutral-white); --action-secondary-soft: var(--ui-400); /* == default (ver nota 1) */ --action-neutral-lv1-default: var(--neutral-500); --action-neutral-lv1-text: var(--neutral-white); --action-neutral-lv1-soft: var(--neutral-400); --action-neutral-lv2-default: var(--neutral-400); --action-neutral-lv2-text: var(--neutral-white); --action-neutral-lv2-soft: var(--neutral-300); --action-neutral-lv3-default: var(--neutral-300); --action-neutral-lv3-text: var(--neutral-white); --action-neutral-lv3-soft: var(--neutral-200); --action-success-default: var(--green-500); --action-success-text: var(--neutral-white); --action-success-soft: var(--green-300); --action-error-default: var(--red-500); --action-error-text: var(--neutral-white); --action-error-soft: var(--red-300); --action-warning-default: var(--orange-500); --action-warning-text: var(--neutral-white); --action-warning-soft: var(--orange-300); --action-information-default: var(--blue-500); --action-information-text: var(--neutral-white); --action-information-soft: var(--blue-300); --action-inactive-default: var(--neutral-150); --action-inactive-text: var(--neutral-250); --action-inactive-soft: var(--neutral-150); /* == default (ver nota 1) */ /* ---- feed (6 × 3) ------------------------------------------------------- */ --feed-neutral-default: var(--neutral-500); --feed-neutral-text: var(--neutral-white); --feed-neutral-soft: var(--neutral-400); /* ver nota 2 */ --feed-success-default: var(--green-500); --feed-success-text: var(--neutral-white); --feed-success-soft: var(--green-200); --feed-error-default: var(--red-500); --feed-error-text: var(--neutral-white); --feed-error-soft: var(--red-200); --feed-warning-default: var(--orange-500); --feed-warning-text: var(--neutral-white); --feed-warning-soft: var(--orange-200); --feed-information-default: var(--blue-500); --feed-information-text: var(--neutral-white); --feed-information-soft: var(--blue-200); --feed-inactive-default: var(--neutral-200); --feed-inactive-text: var(--neutral-white); /* ver nota 3 */ --feed-inactive-soft: var(--neutral-150); /* ---- widget/accent (8) -------------------------------------------------- Valores leídos por binding en la sección Widgets. El alias al primitivo está inferido por coincidencia de valor — confirmar contra el panel. Los nombres gw500/gw400/gw800 son nomenclatura vieja: el primitivo es ui/. */ --widget-accent-green: var(--green-500); --widget-accent-red: var(--red-500); --widget-accent-orange: var(--orange-500); --widget-accent-yellow: var(--orange-400); --widget-accent-blue: var(--blue-500); --widget-accent-gw500: var(--ui-500); --widget-accent-gw400: var(--ui-400); --widget-accent-gw800: var(--ui-800); /* ---- elevación (3) ------------------------------------------------------ Variables de efecto de Figma (sección Radius & Shadows). Todas sobre #21333B — el charcoal, no negro puro. Los alfas 0F/1A/3D salen a 6/10/24%. Ojo: `shadow-sm` y `Elevation/sm` son el MISMO efecto con dos nombres. */ --shadow-sm: 0 1px 2px rgba(33, 51, 59, .06), 0 2px 6px rgba(33, 51, 59, .06); --shadow-md: 0 2px 4px rgba(33, 51, 59, .06), 0 8px 24px rgba(33, 51, 59, .10); --shadow-lg: 0 4px 8px rgba(33, 51, 59, .06), 0 12px 32px rgba(33, 51, 59, .24); /* ---- AÑADIDOS · NO existen en Figma — crear allá (4) -------------------- El DS no tiene token para el color más usado del sistema: texto sobre fondo tintado. El Badge lo resolvía con el 500 y reprobaba AA en las 4 (2.06–3.31). La rampa 700 ya existe y no la usaba nadie; da 6.86–11.10 medido. Aprobado por el dueño 2026-07-16. Al crearlos en Figma, nombrar igual. */ --feed-success-text-on-soft: var(--green-700); --feed-error-text-on-soft: var(--red-700); --feed-warning-text-on-soft: var(--orange-700); --feed-information-text-on-soft: var(--blue-700); /* Superficie, TINTA y borde del campo. El Text Field bindea `neutral/white`, `neutral/100` y `neutral/500` — primitivos crudos — porque no hay token para "fondo de un campo". `surface/page` resuelve al mismo blanco pero un input no es la página; nombrarlo así sería mentir. Mismos valores, nombre honesto. OJO con el focus: `border/focus` SÍ existe (neutral/600 #282B2E) y el Text Field NO lo usa — usa neutral/500. O el token está mal o el componente. `--text-field` existe para que el PAPEL Y LA TINTA VIAJEN JUNTOS. El campo se pinta el fondo (`surface/field`, blanco SIEMPRE — no hay variante oscura) pero heredaba el color del texto, y eso es declarar la mitad de un par: funciona mientras todos los ancestros sean claros. Sobre una superficie inversa (la caja del login) el valor escrito salía BLANCO SOBRE BLANCO. Se arregla aquí y no en el componente porque el par es semántico, igual que `--tone-fill`/`--tone-fg` nunca se separan. La clave es que se declara en `:root`: `var(--text-primary)` se resuelve AQUÍ y lo que heredan los hijos es el valor ya resuelto, así que un descendiente que redefina `--text-primary` (el login, que voltea la tinta de su caja) ya no arrastra al campo. Por eso `--text-placeholder` —declarado igual, aquí abajo— nunca tuvo el bug. Ver field.css nota 33. */ --surface-field: var(--neutral-white); --surface-field-disabled: var(--neutral-100); --border-field-focus: var(--neutral-500); --text-field: var(--text-primary); /* Placeholder. Figma usa `text/muted` (#CFD7E1) = 1.45:1 sobre blanco: ilegible, y en este DS hay campos SIN label donde el placeholder es la única pista de qué va ahí. Aprobado subirlo por el dueño 2026-07-16. 76% de text/primary da 4.98:1 sobre blanco y 4.76:1 sobre el campo disabled — pasa AA en los dos, y el valor real (9.98:1) contrasta justo 2x más, así que se sigue distinguiendo un campo vacío de uno lleno. Por qué alpha y no el nuevo neutral/450: el 450 (6.37:1) está pensado para texto secundario que SE LEE; un placeholder tiene que leerse pero además distinguirse del valor real (9.98:1), y a 6.37 quedaría casi igual de oscuro — un campo vacío parecería lleno. A 4.99 pasa AA y contrasta justo 2x menos que el valor. El alpha además se adapta al fondo del campo disabled, y el color-mix hace que DERIVE de text/primary y lo siga si cambia. Es el único caso donde el 450 no es la respuesta. */ /* El placeholder es una PISTA, no contenido: tiene que verse claramente menos que un valor escrito. Aquí hubo, hasta 0.7.3, un `color-mix(text-primary 76%, transparent)` que yo puse "por si hay campos sin label". Eso no era un gris: era el color del VALOR a 76% de opacidad (#6C7075), a ΔE 18.9 del valor real — o sea, un campo vacío y uno lleno se leían casi igual. Medido: con `text-muted` (neutral/300) la distancia sube a ΔE 37.0. El caso "campo sin label" que lo justificaba no aparece en el producto. */ --text-placeholder: var(--text-muted); /* Icono decorativo DENTRO de un campo (el de `Add Icon`, no el de `Add Action`). No hay familia `icon/*` en la colección Tokens, y `neutral/300` solo tiene nombre semántico como `action/neutral-lv3/default` — que es un token de ACCIÓN, y este icono no lo es. Elegido por el dueño 2026-07-16. 2.69:1 sobre blanco: por debajo del 3:1 de WCAG para gráficos con significado, pero es decorativo (redundante con el label/placeholder), y así no compite con el texto. Si algún icono de campo llega a ser la única pista de qué va ahí, ese necesita otro token. */ --icon-field: var(--neutral-300); } /* ============================================================================ NOTAS — lo que el Figma dice y hay que decidir antes de construir componentes encima. Transcrito tal cual, NO corregido. Contrastes calculados WCAG 2.1; colores del render medidos por píxel sobre los frames de Figma. 1. FALTA EL TOKEN MÁS USADO: texto sobre `soft`. El patrón real del badge (medido en "Activo" de la Archive Page) es fondo=soft + texto=default → #12B76A sobre #E7FEF4 = 2.46:1. Reprueba AA. Las rampas 700 existen y NADIE las usa; son justo esto, y dan 6.9–11.1:1: success #05603A/#E7FEF4 7.25 · error #601B16/#FDEDEB 11.10 warning #93370D/#FFF4D6 6.86 · info #194185/#E8F4FF 8.81 Propuesta: añadir feed/…/text-on-soft → rampa 700. 2. LOS RELLENOS SÓLIDOS REPRUEBAN AA (feed/…/text = blanco sobre default): neutral 9.98 OK · error 3.76 · information 3.24 · success 2.62 warning 2.26 · inactive 1.21 Cinco de seis por debajo de 4.5. warning e inactive son ilegibles. El 600 de cada rampa serviría de relleno accesible sin inventar color. 3. `soft` == `default` en action/primary, action/secondary y action/inactive. Un soft idéntico al default no es variante: hoy no existe fondo suave para el botón primario ni el secundario. Los otros action/* sí tienen su 300. 4. feed/neutral/soft → neutral/400 (#78838F): el ÚNICO feed/…/soft fuera de la rampa 200. Por simetría debería ser neutral/200. Sospechoso de dedazo. 5. feed/inactive/text → neutral/white = 1.21:1 sobre su default, y contradice el render: el badge "Inactivo" mide fondo #F0F3F6 (neutral/150 = su `soft`) con texto gris ~#CFD7E1, no blanco. Parece copiado de las otras 5 filas. 6. Widgets y Lightboxes tienen fills DESPRENDIDOS del sistema: #F0F1F1 y #F8F9F9 pintados a mano, y no corresponden a ningún primitivo. Los tokens border/default y surface/sunken sí están bien (ambos neutral/200) — el bug está en esas dos secciones del Figma, no en la capa de tokens. ============================================================================ */