Hệ màu

Hệ thống màu của Frutjam sử dụng mã thông báo CSS ngữ nghĩa được thiết kế để đáp ứng tỷ lệ tương phản WCAG AA ngay lập tức. Không có JavaScript, nhận biết chế độ tối, tương thích với Tailwind CSS v4. Hoạt động với Django, HTMX, Laravel và mọi ngăn xếp chỉ có CSS.

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 trong 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 tự động tính toán các mã thông báo này từ các biến chủ đề gốc của bạn — bạn không đặt chúng theo cách thủ công. Chúng có sẵn để sử dụng trong CSS tùy chỉnh.

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