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 使用 CSS 自訂屬性作為所有顏色的設計標記。每種顏色都是根據主題定義的，並自動與 Tailwind CSS 實用程式類別一起使用 - 無需額外配置。僅 CSS，無需 JavaScript。 WCAG AA 對比度保證每個顏色對，適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。

顏色名稱

Frutjam 定義了以下語意顏色角色。每種顏色都有一個匹配的 on-{color} 標記，用於可存取的前景文字。

顏色實用程式類

所有 Frutjam 顏色均可與任何 Tailwind CSS 顏色實用程式搭配使用。將 {color} 替換為上表中的任何顏色名稱。

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>

不透明度修改器

使用 /{value} 修飾符控制顏色不透明度，就像任何 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>

主題 CSS 變數

這些是您在建立自訂主題時定義的根標記。所有其他顏色標記都是根據這些自動計算的。

計算顏色標記

Frutjam 會根據您的根主題變數自動計算這些標記 - 您無需手動設定它們。它們可用於自訂 CSS。

規模 (50–950)

每種顏色都會產生完整的 11 級色調/色調等級。將 {color} 替換為任何顏色名稱。

軟&積極的

互動式元素的狀態感知變體，自動適應淺色和深色主題。

自訂主題範例

覆蓋根令牌以建立自訂主題。 Frutjam 會自動計算所有尺度和狀態。

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