System kolorów

System kolorów Frutjam wykorzystuje semantyczne tokeny CSS zaprojektowane tak, aby od razu spełniać współczynniki kontrastu WCAG AA. Brak JavaScript, obsługa trybu ciemnego, kompatybilność z Tailwind CSS v4. Działa z Django, HTMX, Laravel i dowolnym stosem obsługującym tylko CSS.

Frutjam wykorzystuje niestandardowe właściwości CSS jako tokeny projektu dla wszystkich kolorów. Każdy kolor jest zdefiniowany dla motywu i automatycznie współpracuje z klasami narzędzi CSS Tailwind — nie jest wymagana dodatkowa konfiguracja. Tylko CSS, nie wymaga JavaScript. Kontrast WCAG AA gwarantowany dla każdej pary kolorów, współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

Nazwy kolorów

Frutjam definiuje następujące semantyczne role kolorów. Każdy kolor ma pasujący token on-{color} dla dostępnego tekstu na pierwszym planie.

Zajęcia z użyteczności kolorów

Wszystkie kolory Frutjam współpracują z dowolnym narzędziem do tworzenia kolorów CSS Tailwind. Zastąp {color} dowolną nazwą koloru z powyższej tabeli.

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>

Modyfikator krycia

Kontroluj krycie kolorów za pomocą modyfikatora /{value}, tak jak w przypadku każdego koloru 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>

Zmienne CSS motywu

Są to tokeny główne, które definiujesz podczas tworzenia niestandardowego motywu. Wszystkie inne żetony kolorów są obliczane automatycznie na ich podstawie.

Obliczone tokeny kolorów

Frutjam automatycznie oblicza te tokeny na podstawie zmiennych motywu głównego — nie ustawia się ich ręcznie. Są one dostępne do użycia w niestandardowym CSS.

Skala (50–950)

Każdy kolor generuje pełną 11-stopniową skalę odcienia. Zamień {color} na dowolną nazwę koloru.

Miękkie & Aktywny

Warianty świadome stanu elementów interaktywnych, automatycznie dostosowujące się do jasnych i ciemnych motywów.

Przykład niestandardowego motywu

Zastąp tokeny root, aby utworzyć niestandardowy motyw. Frutjam automatycznie oblicza wszystkie skale i stany.

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