カラーシステム

// ✅ 推奨: セマンティックカラーを使う
<Button variant="primary">購入する</Button>
<div className="bg-background">...</div>

// ❌ 非推奨: 生のカラートークンを直接使う
<div className="bg-orange-base">...</div>

// ✅ 破壊的アクション → destructive
<Button variant="destructive">削除する</Button>
<Button variant="destructive">アカウントを完全に削除</Button>

// ✅ エラー状態 → error
<span className="text-error">入力値が不正です</span>
<div className="border-error bg-error-light">エラーメッセージ</div>
<Input className="border-error" aria-invalid="true" />

// ❌ Bad - description用途なのにmutedを使っている（①②に該当するのに③を選んでいる）
<CardDescription className="text-muted-foreground">
  このカードの説明文です
</CardDescription>

// ✅ Good - description系はsub-foreground（Q2に該当）
<CardDescription className="text-sub-foreground">
  このカードの説明文です
</CardDescription>

// ✅ Good - placeholderは「無くても意味が通る」補足（Q3に該当）
<input placeholder="検索..." className="placeholder:text-muted-foreground" />

// ✅ Good - 装飾アイコンの色指定（Q3に該当）
<Icon name="Search" className="text-muted-foreground" />

// ✅ Good - ショートカットキー表示（Q3に該当）
<CommandShortcut className="text-muted-foreground">⌘K</CommandShortcut>

// ❌ Bad - コンボボックスの補助情報（subtitle）なのにmutedを使っている
<div className="text-xs text-muted-foreground">{option.subtitle}</div>

// ✅ Good - 選択肢の補助情報はdescription系としてsub-foreground（Q2に該当）
<div className="text-xs text-sub-foreground">{option.subtitle}</div>

// メインテキスト
<h2 className="text-foreground">タイトル</h2>

// 説明文（濃いグレー）
<p className="text-sub-foreground">このカードの説明文です</p>

// プレースホルダー（薄いグレー）
<input placeholder="検索..." className="placeholder:text-muted-foreground" />

<Button>Base (Default)</Button>
<Button variant="primary">Primary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="destructive">Destructive</Button>

{/* 背景色 */}
<div className="bg-orange-base">ブランドカラー背景</div>
<div className="bg-destructive-light">エラー背景（薄い）</div>

{/* テキスト色 */}
<p className="text-blue-base">青いテキスト</p>
<p className="text-destructive">エラーテキスト</p>

{/* ボーダー */}
<div className="border border-ash-base">グレーボーダー</div>
<div className="border border-destructive/20">エラーボーダー（透明度20%）</div>

/* プロジェクト固有のカスタマイズ */
:root {
  /* セマンティックカラーの上書き
   * hover / pressed も併せて上書きします。上書きしないとcaroaデフォルト
   * （オレンジ系）が残り、ホバー・押下した瞬間にブランド色から離れます。
   * 原則は hover=明るく / pressed=暗く。白・黒の境界色やaccentなどは、役割ごとに
   * 正本`design-system/CUSTOMIZATION.md`の役割別規定値を使います（[アプリ別テーマ](/docs/getting-started/theming)参照）。
   */
  --caroa-primary: var(--caroa-color-blue-base);
  --caroa-primary-hover: var(--caroa-color-blue-bright);
  --caroa-primary-pressed: var(--caroa-color-blue-dark);
  --caroa-destructive: var(--caroa-color-red-base);
  --caroa-destructive-hover: var(--caroa-color-red-bright);
  --caroa-destructive-pressed: var(--caroa-color-red-dark);

  /* 独自のカラー追加 */
  --brand-gradient: linear-gradient(
    to right,
    hsl(var(--caroa-color-orange-base)),
    hsl(var(--caroa-color-orange-bright))
  );
}

import { useAutoTheme } from '@caroainc/ui-components'

function App() {
  useAutoTheme({
    primary: 'blue-base',      // プライマリカラー
    base: 'black-base',        // ベースカラー
    secondary: 'sand-base',    // セカンダリカラー
    accent: 'sand-light',      // アクセントカラー
    borderRadius: '0.5rem',    // 角丸
  })

  return <YourApp />
}