컬러 시스템

Frutjam의 색상 시스템은 기본적으로 WCAG AA 명암비를 충족하도록 설계된 시맨틱 CSS 토큰을 사용합니다. JavaScript가 없고 어두운 모드를 인식하며 Tailwind CSS v4와 호환됩니다. Django, HTMX, Laravel 및 모든 CSS 전용 스택에서 작동합니다.

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>

불투명도 수정자

Tailwind 색상과 마찬가지로 /{value} 수정자를 사용하여 색상 불투명도를 제어합니다.

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