Color System

Frutjam's color system uses semantic CSS tokens designed to meet WCAG AA contrast ratios out of the box. No JavaScript, dark mode aware, compatible with Tailwind CSS v4. Works with Django, HTMX, Laravel, and any CSS-only stack.

Frutjam, tüm renkler için tasarım belirteçleri olarak CSS özel özelliklerini kullanır. Her renk, temaya göre tanımlanır ve Tailwind CSS yardımcı program sınıflarıyla otomatik olarak çalışır; ekstra yapılandırmaya gerek yoktur. Yalnızca CSS, JavaScript gerekmez. WCAG AA kontrastı her renk çiftinde garanti edilir; Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

Renk İsimleri

Frutjam aşağıdaki anlamsal renk rollerini tanımlar. Her rengin, erişilebilir ön plan metni için eşleşen bir {color} üzerinde belirteci vardır.

Renk Yardımcı Program Sınıfları

Tüm Frutjam renkleri herhangi bir Tailwind CSS renk yardımcı programıyla çalışır. {color}'i yukarıdaki tablodaki herhangi bir renk adıyla değiştirin.

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>

Opaklık Değiştirici

Herhangi bir Tailwind renginde olduğu gibi, renk opaklığını /{value} değiştiricisiyle kontrol edin.

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>

Tema CSS Değişkenleri

Bunlar, özel bir tema oluştururken tanımladığınız kök belirteçlerdir. Diğer tüm renk belirteçleri bunlardan otomatik olarak hesaplanır.

Hesaplanan Renk Belirteçleri

Frutjam bu belirteçleri kök tema değişkenlerinizden otomatik olarak hesaplar; bunları manuel olarak ayarlamazsınız. Özel CSS'de kullanılabilirler.

Ölçek (50–950)

Her renk, 11 adımlı tam bir renk tonu/gölge ölçeği oluşturur. {color}'i herhangi bir renk adıyla değiştirin.

Yumuşak ve Aktif

Açık ve koyu temalara otomatik olarak uyum sağlayan, etkileşimli öğeler için durum bilinçli değişkenler.

Özel Tema Örneği

Özel bir tema oluşturmak için kök belirteçlerini geçersiz kılın. Frutjam tüm ölçekleri ve durumları otomatik olarak hesaplar.

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