Système de couleurs

Le système de couleurs de Frutjam utilise des jetons CSS sémantiques conçus pour répondre aux rapports de contraste WCAG AA dès le départ. Pas de JavaScript, compatible avec le mode sombre, compatible avec Tailwind CSS v4. Fonctionne avec Django, HTMX, Laravel et toute pile CSS uniquement.

Frutjam utilise les propriétés personnalisées CSS comme jetons de conception pour toutes les couleurs. Chaque couleur est définie par thème et fonctionne automatiquement avec les classes d'utilitaires CSS Tailwind — aucune configuration supplémentaire n'est nécessaire. CSS uniquement, aucun JavaScript requis. Contraste WCAG AA garanti sur chaque paire de couleurs, fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.

Color Names

Frutjam defines the following semantic color roles. Each color has a matching on-{color} token for accessible foreground text.

Color Utility Classes

All Frutjam colors work with any Tailwind CSS color utility. Replace {color} with any color name from the table above.

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>

Opacity Modifier

Control color opacity with the /{value} modifier, just like any Tailwind color.

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>

Theme CSS Variables

These are the root tokens you define when creating a custom theme. All other color tokens are computed automatically from these.

Jetons de couleur calculés

Frutjam calcule automatiquement ces jetons à partir des variables de votre thème racine — vous ne les définissez pas manuellement. Ils sont disponibles pour une utilisation dans du CSS personnalisé.

Échelle (50-950)

Chaque couleur génère une échelle de teinte/teinte complète en 11 étapes. Remplacez {color} par n'importe quel nom de couleur.

Doux et léger. Actif

Variantes sensibles à l'état pour les éléments interactifs, s'adaptant automatiquement aux thèmes clairs et sombres.

Exemple de thème personnalisé

Remplacez les jetons racine pour créer un thème personnalisé. Frutjam calcule automatiquement toutes les échelles et tous les états.

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