カラー

Kaze のカラーシステムは 3層構造で設計されています。12色×10階調のプリミティブパレット、 温かみのあるニュートラルグレースケール（`zinc-*`）、そしてテーマ対応のセマンティックトークン。

カラーパレット（12色×10階調）

チャート、イラスト、装飾背景、ステータスカラーの基盤となるプリミティブパレット。 各色 50〜900 の10段階。ホバーで shade 番号を表示します。

50100200300400500600700800900
zinc
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900
amber
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
lime
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
emerald
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
cyan
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
violet
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
/* パレットの使い方 */ .hero-bg { background: var(--blue-500); } .highlight { color: var(--amber-400); } .soft-bg { background: var(--violet-50); } .gradient { background: linear-gradient(135deg, var(--violet-50), var(--violet-200)); }

ニュートラルスケール（zinc-*）

Sand-tinted な暖かいグレースケール。セマンティックカラー（bg / fg / border 等）の基盤です。 11段階（50〜950）。

zinc-50
#faf9f7
zinc-100
#f5f3f0
zinc-200
#e7e4df
zinc-300
#d6d2cc
zinc-400
#a8a29e
zinc-500
#78716c
zinc-600
#57534e
zinc-700
#44403c
zinc-800
#292524
zinc-900
#1c1917
zinc-950
#0c0a09

セマンティックカラー

用途に基づいたカラートークン。ライト / ダークテーマで自動的に値が切り替わります。

背景色

ページやカード、パネルの背景色。

bg
--color-bg
ライト: #ffffff / ダーク: zinc-950
bg-secondary
--color-bg-secondary
ライト: zinc-50 / ダーク: zinc-900
bg-tertiary
--color-bg-tertiary
ライト: zinc-100 / ダーク: zinc-800
bg-inverse
--color-bg-inverse
ライト: zinc-950 / ダーク: #ffffff

前景色（テキスト）

テキストやアイコンの色。プライマリ、セカンダリ、ミュートの3段階。

fg
--color-fg
ライト: zinc-950 / ダーク: zinc-50
fg-secondary
--color-fg-secondary
ライト: zinc-500 / ダーク: zinc-400
fg-tertiary
--color-fg-tertiary
ライト: zinc-500 / ダーク: zinc-400
fg-inverse
--color-fg-inverse
ライト: #ffffff / ダーク: zinc-950
fg-muted
--color-fg-muted
ライト: zinc-600 / ダーク: zinc-400
fg-placeholder
--color-fg-placeholder
ライト: zinc-600 / ダーク: zinc-400
fg-decorative
--color-fg-decorative
ライト: zinc-400 / ダーク: zinc-600
focus
--color-focus
ライト: = fg / ダーク: = fg

ボーダー

ボーダーやディバイダーの色。

border
--color-border
ライト: zinc-200 / ダーク: zinc-800
border-strong
--color-border-strong
ライト: zinc-300 / ダーク: zinc-700
border-subtle
--color-border-subtle
ライト: zinc-100 / ダーク: zinc-900

サーフェス

カードやドロップダウンなど、浮遊する要素の背景色とホバー・アクティブ状態。

surface
--color-surface
ライト: #ffffff / ダーク: zinc-900
surface-hover
--color-surface-hover
ライト: zinc-50 / ダーク: zinc-800
surface-active
--color-surface-active
ライト: zinc-100 / ダーク: zinc-700

プライマリ

主要アクション（ボタン、リンク）の色。ライトモードは黒、ダークモードは白。

primary
--color-primary
ライト: zinc-950 / ダーク: #ffffff
primary-fg
--color-primary-fg
ライト: #ffffff / ダーク: zinc-950
primary-hover
--color-primary-hover
ライト: zinc-800 / ダーク: zinc-200

セカンダリ

副次的アクションの色。

secondary
--color-secondary
ライト: zinc-100 / ダーク: zinc-800
secondary-fg
--color-secondary-fg
ライト: zinc-900 / ダーク: zinc-100
secondary-hover
--color-secondary-hover
ライト: zinc-200 / ダーク: zinc-700

ステータスカラー

成功・エラー・警告・情報を表すカラー。パレットから参照しています。

ポジティブ（成功）← emerald

positive
--color-positive
→ emerald-500
positive-light
--color-positive-light
→ emerald-50
positive-fg
--color-positive-fg
→ emerald-600
positive-strong
--color-positive-strong
→ emerald-700

ネガティブ（エラー）← red

negative
--color-negative
→ red-500
negative-light
--color-negative-light
→ red-50
negative-fg
--color-negative-fg
→ red-600
negative-strong
--color-negative-strong
→ red-700

ワーニング（警告）← amber

warning
--color-warning
→ amber-500
warning-light
--color-warning-light
→ amber-50
warning-fg
--color-warning-fg
→ amber-600

インフォ（情報）← blue

info
--color-info
→ blue-500
info-light
--color-info-light
→ blue-50
info-fg
--color-info-fg
→ blue-600

チャートカラー

名前付きカラー

BarChart / DonutChart / Sparkline で使用。パレットの 500 を参照。

blue
→ blue-500
amber
→ amber-500
emerald
→ emerald-500
pink
→ pink-500
cyan
→ cyan-500
red
→ red-500
lime
→ lime-500
purple
→ violet-500
orange
→ orange-500
teal
→ teal-500
yellow
→ yellow-500
green
→ green-500

Categorical（12色）

番号付きの --chart-1 〜 --chart-12。CategoryBar や Heatmap が順に使う。

1
2
3
4
5
6
7
8
9
10
11
12

フォーカスリング

--ring-color var(--color-focus)（文字色と同じ。どのテーマでも 3:1 以上）
--ring-offset 2px
--ring-width 2px

トークン階層

tokens/*.tokens.json（DTCG 形式）が元データ。npm run tokens で tokens.css を生成する ┌ component ─ --density-control-height, --sidebar-width ... │ 部品ごとの寸法。密度（compact）で切り替わる ├ semantic ── --color-bg, --color-fg, --color-positive, --chart-1 ... │ 役割の色。ライト / ダーク / 寒色グレーで切り替わる └ primitive ─ --blue-600, --zinc-200, --space-4, --radius-md ... 素の値。テーマに依存しない /* 推奨: セマンティックトークンを使う */ .card { background: var(--color-surface); } /* チャートの系列は番号付きを順に使う */ .series-a { stroke: var(--chart-1); } /* semantic は primitive を参照する */ --color-positive → var(--emerald-500)