カラーシステム

// ✅ 推奨: セマンティックカラーを使う
<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 {
  /* セマンティックカラーの上書き */
  --caroa-primary: var(--caroa-color-blue-base);
  --caroa-destructive: var(--caroa-color-red-base);
 
  /* 独自のカラー追加 */
  --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 />
}