Farbsystem

Das Farbsystem von Frutjam verwendet semantische CSS-Token, die so konzipiert sind, dass sie standardmäßig die WCAG AA-Kontrastverhältnisse erfüllen. Kein JavaScript, Dark Mode-fähig, kompatibel mit Tailwind CSS v4. Funktioniert mit Django, HTMX, Laravel und jedem reinen CSS-Stack.

Frutjam verwendet benutzerdefinierte CSS-Eigenschaften als Design-Token für alle Farben. Jede Farbe wird pro Thema definiert und funktioniert automatisch mit Tailwind CSS-Dienstprogrammklassen – keine zusätzliche Konfiguration erforderlich. Nur CSS, kein JavaScript erforderlich. WCAG AA-Kontrast garantiert für jedes Farbpaar, funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.

Farbnamen

Frutjam definiert die folgenden semantischen Farbrollen. Jede Farbe verfügt über ein passendes on-{color}-Token für barrierefreien Vordergrundtext.

Farbdienstprogrammklassen

Alle Frutjam-Farben funktionieren mit jedem CSS-Farbdienstprogramm von Tailwind. Ersetzen Sie {color} durch einen beliebigen Farbnamen aus der obigen Tabelle.

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>

Deckkraftmodifikator

Steuern Sie die Farbdeckkraft mit dem Modifikator /{value}, genau wie bei jeder Tailwind-Farbe.

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-Variablen

Dies sind die Root-Tokens, die Sie beim Erstellen eines benutzerdefinierten Designs definieren. Alle anderen Farbtoken werden automatisch daraus berechnet.

Berechnete Farbtoken

Frutjam berechnet diese Token automatisch aus Ihren Root-Theme-Variablen – Sie legen sie nicht manuell fest. Sie können in benutzerdefiniertem CSS verwendet werden.

Maßstab (50–950)

Jede Farbe erzeugt eine vollständige 11-stufige Farbton-/Schattenskala. Ersetzen Sie {color} durch einen beliebigen Farbnamen.

Weich & Aktiv

Statusbewusste Varianten für interaktive Elemente, die sich automatisch an helle und dunkle Themen anpassen.

Beispiel für ein benutzerdefiniertes Theme

Überschreiben Sie Root-Tokens, um ein benutzerdefiniertes Design zu erstellen. Frutjam berechnet alle Skalen und Zustände automatisch.

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