Sistema de colores

El sistema de color de Frutjam utiliza tokens CSS semánticos diseñados para cumplir con las relaciones de contraste WCAG AA desde el primer momento. Sin JavaScript, compatible con el modo oscuro, compatible con Tailwind CSS v4. Funciona con Django, HTMX, Laravel y cualquier pila de solo CSS.

Frutjam utiliza propiedades personalizadas de CSS como tokens de diseño para todos los colores. Cada color se define por tema y funciona automáticamente con las clases de utilidad CSS de Tailwind, sin necesidad de configuración adicional. Solo CSS, no se requiere JavaScript. Contraste WCAG AA garantizado en cada par de colores, funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4.

Nombres de colores

Frutjam define los siguientes roles semánticos de color. Cada color tiene un token on-{color} coincidente para el texto en primer plano accesible.

Clases de utilidad de color

Todos los colores de Frutjam funcionan con cualquier utilidad de color CSS de Tailwind. Reemplace {color} con cualquier nombre de color de la tabla anterior.

1
2
3

<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>

Modificador de opacidad

Controle la opacidad del color con el modificador /{value}, como cualquier color de Tailwind.

1
2
3

<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>

Variables CSS del tema

Estos son los tokens raíz que defines al crear un tema personalizado. Todos los demás tokens de colores se calculan automáticamente a partir de estos.

Fichas de color calculadas

Frutjam calcula automáticamente estos tokens a partir de las variables de tu tema raíz; no los configuras manualmente. Están disponibles para su uso en CSS personalizado.

Escala (50–950)

Cada color genera una escala completa de tintes/sombras de 11 pasos. Reemplace {color} con cualquier nombre de color.

Suave y suave. Activo

Variantes con reconocimiento de estado para elementos interactivos, que se adaptan automáticamente a temas claros y oscuros.

Ejemplo de tema personalizado

Anule los tokens raíz para crear un tema personalizado. Frutjam calcula todas las escalas y estados automáticamente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}