Color
BetaEscalas de 12 pasos, capa semántica y verificación de contraste en vivo.
El sistema de color de Polen sigue la convención Radix Colors de escalas de 12 pasos: 1–2 fondos de app, 3–5 fondos de componentes, 6–8 bordes, 9–10 fondos sólidos y 11–12 texto.
La escala Primary es el verde de la marca, anclada en Primary/9 = #00922e.
Neutral es Radix sage, el gris con tinte verde que acompaña al brand.
Escalas
Las escalas reaccionan al tema activo — cambiá entre light y dark con el toggle del header y mirá cómo se recalculan.
Primary
mostrando tema light — click para copiarNeutral
mostrando tema light — click para copiarLos pasos marcados con ○ son interpolados o provisionales — se actualizan cuando diseño apruebe el valor oficial.
Roles semánticos
Nunca uses una primitiva directo en un componente: usá el rol. El rol resuelve a la primitiva correcta en cada tema.
| Rol | Apunta a | Estado |
|---|---|---|
--bg | neutral-1 | Provisional |
--bg-subtle | neutral-2 | Provisional |
--surface | neutral-3 | Provisional |
--border | neutral-6 | Provisional |
--border-strong | neutral-8 | Provisional |
--fg | neutral-12 | Provisional |
--fg-muted | neutral-11 | Provisional |
--fg-subtle | neutral-10 | Provisional |
--primary | primary-9 | Oficial |
--primary-hover | primary-10 | Oficial |
--primary-active | primary-11 | Oficial |
--primary-subtle | primary-3 | Oficial |
--primary-subtle-hover | primary-4 | Oficial |
--primary-subtle-active | primary-5 | Oficial |
--primary-border | primary-6 | Oficial |
--primary-fg | base-on-primary | Oficial |
--focus-ring | primary-8 | Oficial |
Convención de estados
Los estados interactivos siguen la progresión Radix:
- Sólido: fondo
9, hover10, pressed11 - Tonal: fondo
3, hover4, pressed5, borde6 - Focus ring:
Primary/8
Verificador de contraste
Elegí un par texto/fondo y validá WCAG en vivo. Regla práctica: texto normal necesita AA (4.5:1); texto grande o UI, AA Large (3:1).