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 sử dụng các thuộc tính tùy chỉnh CSS làm mã thông báo thiết kế cho tất cả các màu. Mỗi màu được xác định theo chủ đề và tự động hoạt động với các lớp tiện ích CSS của Tailwind — không cần cấu hình bổ sung. Chỉ CSS, không cần JavaScript. Độ tương phản WCAG AA được đảm bảo trên mọi cặp màu, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.

Tên màu

Frutjam xác định các vai trò màu ngữ nghĩa sau đây. Mỗi màu có một mã thông báo on-{color} phù hợp để văn bản nền trước có thể truy cập được.

Các lớp tiện ích màu sắc

Tất cả các màu Frutjam đều hoạt động với mọi tiện ích màu CSS Tailwind. Thay thế {color} bằng bất kỳ tên màu nào từ bảng trên.

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>

Công cụ sửa đổi độ mờ

Kiểm soát độ mờ của màu bằng công cụ sửa đổi /{value}, giống như bất kỳ màu Tailwind nào.

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>

Biến CSS chủ đề

Đây là các mã thông báo gốc mà bạn xác định khi tạo chủ đề tùy chỉnh. Tất cả các mã thông báo màu khác được tính toán tự động từ những mã này.

Computed Color Tokens

Frutjam automatically computes these tokens from your root theme variables — you don't set them manually. They are available for use in custom CSS.

Scale (50–950)

Every color generates a full 11-step tint/shade scale. Replace {color} with any color name.

Soft & Active

State-aware variants for interactive elements, automatically adapting to light and dark themes.

Custom Theme Example

Override root tokens to create a custom theme. Frutjam computes all scales and states automatically.

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