カラーシステム

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