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 juego on-{color} token para texto en primer plano accesible.

Escala de colores (50–950)

Cada color genera una escala de 11 pasos, calculada a partir de las variables del tema raíz con color-mix() en OKLCH en lugar de en el momento de la construcción. Establezca un color de marca y los once pasos se derivarán de él, por lo que nunca los configurará a mano.

Cada paso es una variable CSS y una utilidad Tailwind a la vez: use var(--color-primary-700) en tu propio CSS, o bg-primary-700 en marcado. Pase el cursor sobre una muestra para ver ambos nombres.

Debido a que los pasos se calculan a partir de su tema en lugar de estar codificados, esta cuadrícula no es una imagen de los colores de Frutjam. Son tus colores. Cambie el tema y cada muestra de arriba se moverá con él, razón por la cual no hay valores hexadecimales impresos junto a ellos.

1
2
3

<div class="bg-primary-100 text-primary-900 p-4 rounded">Light tint, dark text</div>
<div class="bg-success-700 text-success-50 p-4 rounded">Dark shade, light text</div>
<div class="border-2 border-error-400 text-error-600 p-4 rounded">Border and text</div>

Clases de utilidad de color

Todos los colores de Frutjam funcionan con cualquier utilidad de color CSS de Tailwind. Reemplazar {color} con cualquier nombre de color de la tabla anterior, seguido opcionalmente de un paso de la escala 50-950: bg-primary, bg-primary-100, text-error-900, border-success-300.

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 /{value} modificador, 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>

Suave y activo

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

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.

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);
}