カラーシステム

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} アクセス可能な前景テキストのトークン。

カラー スケール (50 ～ 950)

各色は 11 段階のスケールを生成し、ルート テーマ変数から次のように計算されます。 color-mix() ビルド時ではなくOKLCHで。ブランドカラーを設定すると、それに基づいて 11 のステップがすべて実行されるため、手動で設定する必要はありません。

各ステップは、CSS 変数と Tailwind ユーティリティを同時に使用します。 var(--color-primary-700) 独自の CSS 内、または bg-primary-700 マークアップで。見本にカーソルを置くと、両方の名前が表示されます。

ステップはハードコーディングされているのではなくテーマから計算されるため、このグリッドは Frutjam の色の図ではありません。それはあなたの色です。テーマを切り替えると、上のすべてのスウォッチがそれに合わせて移動します。テーマの横に 16 進数の値が印刷されないのもそのためです。

1
2
3

<div class="bg-primary-100 text-primary-900 p-4 rounded">Light tint, dark text</div>
<div class="bg-success-700 text-success-50 p-4 rounded">Dark shade, light text</div>
<div class="border-2 border-error-400 text-error-600 p-4 rounded">Border and text</div>

カラーユーティリティクラス

Frutjam のすべてのカラーは、Tailwind CSS カラー ユーティリティで機能します。交換する {color} 上の表の任意の色の名前を使用し、必要に応じて 50 ～ 950 スケールのステップを続けます。 bg-primary, bg-primary-100, text-error-900, border-success-300.

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 はすべてのスケールと状態を自動的に計算します。

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