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. Zu jeder Farbe gibt es eine passende on-{color} Token für barrierefreien Vordergrundtext.

Farbskala (50–950)

Jede Farbe generiert eine 11-stufige Skala, die aus den Variablen Ihres Stammthemas berechnet wird color-mix() in OKLCH und nicht zur Erstellungszeit. Legen Sie eine Markenfarbe fest und alle elf Schritte folgen daraus, sodass Sie sie nie von Hand festlegen müssen.

Jeder Schritt ist eine CSS-Variable und ein Tailwind-Dienstprogramm zugleich: use var(--color-primary-700) in Ihrem eigenen CSS, oder bg-primary-700 im Markup. Bewegen Sie den Mauszeiger über ein Farbfeld, um beide Namen anzuzeigen.

Da die Schritte anhand Ihres Themas berechnet und nicht fest codiert sind, ist dieses Raster kein Abbild der Farben von Frutjam. Es sind deine Farben. Wechseln Sie das Thema und jedes Farbfeld oben bewegt sich mit, weshalb auch keine Hexadezimalwerte daneben aufgedruckt sind.

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>

Farbdienstprogrammklassen

Alle Frutjam-Farben funktionieren mit jedem CSS-Farbdienstprogramm von Tailwind. Ersetzen {color} mit einem beliebigen Farbnamen aus der Tabelle oben, optional gefolgt von einem Schritt aus der Skala 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>

Deckkraftmodifikator

Steuern Sie die Farbdeckkraft mit /{value} Modifikator, genau wie jede 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>

Weich und aktiv

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

Theme-CSS-Variablen

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

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