Tokens de kilos-ui
Paleta de color, tipografía y radios definitivos del sistema, agrupados por familia. Cambia el tema o el acento para verlos actualizarse en vivo.
Tema
Cambia el color de marca para ver los tokens derivados (--brand-soft, --primary, --ring…) recalcularse en el momento.
Marca
8 tokens
--brand—--brand-soft—--brand-line—--brand-deep—--brand-bright—--brand-ink—--primary—--primary-foreground—Superficies
6 tokens
--background—--card—--popover—--secondary—--muted—--accent—Texto
6 tokens
--foreground—--card-foreground—--popover-foreground—--secondary-foreground—--muted-foreground—--accent-foreground—Semánticos
5 tokens
--destructive—--success—--warning—--danger—--info—Gráficas
5 tokens
--chart-1—--chart-2—--chart-3—--chart-4—--chart-5—Sidebar
8 tokens
--sidebar—--sidebar-foreground—--sidebar-primary—--sidebar-primary-foreground—--sidebar-accent—--sidebar-accent-foreground—--sidebar-border—--sidebar-ring—Bordes / anillo
3 tokens
--border—--input—--ring—Contraste de texto sobre fondo
Calculado en el navegador con culori a partir del color ya resuelto por el tema activo. Mínimo recomendado: 4.5:1 para texto normal.
| Par | Razón | Calificación |
|---|---|---|
| --foreground / --background | — | Sin resolver |
| --muted-foreground / --background | — | Sin resolver |
| --card-foreground / --card | — | Sin resolver |
| --popover-foreground / --popover | — | Sin resolver |
| --secondary-foreground / --secondary | — | Sin resolver |
| --accent-foreground / --accent | — | Sin resolver |
| --primary-foreground / --primary | — | Sin resolver |
| --sidebar-foreground / --sidebar | — | Sin resolver |
| --sidebar-primary-foreground / --sidebar-primary | — | Sin resolver |
| --sidebar-accent-foreground / --sidebar-accent | — | Sin resolver |