テーマ

Gunjo UI はカラー・角丸・影・モーションのすべてを CSS 変数として公開しています。自分の :root または .dark ブロックで値を変えれば、全コンポーネントがそれを拾います ── Tailwind の再ビルドも fork も不要。

規約

変数は kebab-case、値は H S% L% の HSL トリプレット（hsl() ラッパーなし）。これにより Tailwind 側で透明度を合成できます（hsl(var(--primary) / 0.5)）。

コンポーネントが実際に消費する セマンティックトークン は対で定義されています：

• --background / --foreground ── ページ表面とメインテキスト
• --card / --card-foreground ── Card 表面とテキスト
• --popover / --popover-foreground ── 浮遊サーフェス（Tooltip / Popover / DropdownMenu）
• --primary / --primary-foreground ── 群青ブルーと、その上に乗るテキスト
• --secondary / --secondary-foreground ── 控えめなサーフェスとテキスト
• --muted / --muted-foreground ── 背景とサブテキスト
• --accent / --accent-foreground ── 媚茶ティントの hover / selection
• --destructive / --destructive-foreground ── エラー / 危険操作
• --border / --input / --ring ── 枠線とフォーカス
• --radius ── 基本ボーダー半径

ブランド・アトモスフィアトークン

これらは テーマ非依存（dark mode で反転しない）── 群青と媚茶のブランドアイデンティティをモードを跨いで保つために、ホームヒーローと色のストーリー演出だけが消費します：

• --gunjo-deep / -deeper / -deepest / -light / -mid / -bright / -dark ── 群青パレット
• --kobicha-warm / -mid / -bright / -deepest ── 媚茶パレット
• --pure-white, --pure-black

デフォルト（ライトモード）

:root {
  --background: 0 0% 100%;
  --foreground: 240 20% 6%;

  --card: 0 0% 100%;
  --card-foreground: 240 20% 6%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 20% 6%;

  --primary: 232 39% 49%;            /* 群青 */
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96%;
  --secondary-foreground: 240 6% 10%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --accent: 29 31% 87%;              /* 媚茶ティント */
  --accent-foreground: 14 22% 19%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 232 39% 49%;

  --radius: 0.5rem;
}

ダークモード上書き

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --primary: 232 47% 65%;            /* 暗い背景でコントラストを得るため少し明るめの群青 */
  --primary-foreground: 210 40% 98%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --accent: 14 22% 19%;
  --accent-foreground: 29 31% 87%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 232 47% 65%;
}

シャドウ・モーションを含む完全なリストは src/globals.css にあり、design/tokens.pen から自動生成されています。上書きは、採用先の globals.css で @import "@gunjo/ui/styles" の 後 に変数を再宣言してください。