Colores
FDS expone dos paletas OKLCH de 11 pasos (50–950) en theme/flowtitude.css: primary (rojo) y secondary (gris cálido). Ambas se pueden sobrescribir desde el @theme del proyecto.
Por qué OKLCH
OKLCH aporta mejor uniformidad perceptual que HEX o RGB:
- Saltos de luminosidad consistentes en toda la paleta.
- Mayor rango de color en pantallas modernas (P3, Rec.2020).
- Fácil de derivar variantes manteniendo la percepción.
--color-primary-500: oklch(0.5365 0.1984 27.19);
/* L C H */
/* L = luminosidad (0-1)
C = chroma
H = hue en grados */
Paleta primary
| Token | Valor OKLCH |
|---|---|
--color-primary-50 | oklch(0.97 0.0255 27.19) |
--color-primary-100 | oklch(0.93 0.0472 27.19) |
--color-primary-200 | oklch(0.86 0.0737 27.19) |
--color-primary-300 | oklch(0.80 0.1056 27.19) |
--color-primary-400 | oklch(0.67 0.1520 27.19) |
--color-primary-500 | oklch(0.5365 0.1984 27.19) |
--color-primary-600 | oklch(0.47 0.1984 27.19) |
--color-primary-700 | oklch(0.43 0.1889 27.19) |
--color-primary-800 | oklch(0.39 0.1805 27.19) |
--color-primary-900 | oklch(0.32 0.1705 27.19) |
--color-primary-950 | oklch(0.25 0.1579 27.19) |
Paleta secondary
Pensada para neutros cálidos (grises con matiz):
| Token | Valor OKLCH |
|---|---|
--color-secondary-50 | oklch(0.98 0.003 17.53) |
--color-secondary-100 | oklch(0.927 0.007 17.53) |
--color-secondary-500 | oklch(0.64 0.031 18.02) |
--color-secondary-900 | oklch(0.28 0.014 18.02) |
--color-secondary-950 | oklch(0.23 0.011 18.02) |
Cambiar la paleta del proyecto
Desde el @theme de tu entry:
@import "tailwindcss";
@import "fds/main.css";
@theme {
--color-primary-50: oklch(0.97 0.02 250);
--color-primary-500: oklch(0.55 0.18 250);
--color-primary-950: oklch(0.22 0.14 250);
/* ...resto de pasos */
}
Todas las clases que usan var(--color-primary-*) se actualizan automáticamente.
Tokens semánticos
FDS añade variables semánticas derivadas para uso común:
| Token | Valor | Uso |
|---|---|---|
--ft-color-text | var(--color-secondary-950) | Color de texto base |
--ft-color-text-muted | var(--color-secondary-700) | Texto secundario |
--ft-color-bg | var(--color-secondary-50) | Fondo de página |
--ft-color-border | var(--color-secondary-200) | Bordes y separadores |
Los componentes referencian estas semánticas, no las primitivas.
Dark mode
Para soporte dark mode, redefine las variables semánticas dentro de [data-theme="dark"] o un media query prefers-color-scheme: dark. Las primitivas siguen igual; solo cambian las semánticas.
Generación de paletas
Para generar una paleta OKLCH coherente a partir de un color base, recomendamos herramientas como oklch.com o huetone. Mantén la chroma y hue estables, y varía solo la luminosidad (L).