PackagesUIToken Reference Color
セマンティックカラートークンのリファレンス。
| Tailwind クラス | 用途 |
|---|
bg-background | ページ背景 |
text-foreground | 本文テキスト |
カード・ダイアログ・ドロップダウン等の浮き上がるUIサーフェスに使用する。
| Tailwind クラス | 用途 |
|---|
bg-card | サーフェスの背景 |
text-card-foreground | サーフェス上のテキスト |
最も重要な操作・要素に使用する。画面内で1〜2箇所に限定する。
| Tailwind クラス | 用途 |
|---|
bg-primary | CTAボタン背景 |
text-primary-foreground | ボタン上のテキスト |
bg-primary-hover | Hover状態 |
bg-primary-active | Active状態 |
<button className="bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active">
送信
</button>
控えめな情報に使用する。
| Tailwind クラス | 用途 |
|---|
bg-muted | 控えめな背景、hover背景、ストライプ |
text-muted-foreground | 補助テキスト、プレースホルダー |
フィードバック（エラー、警告、成功、情報）に使用する。各ステータスは3段階で構成されており、用途に応じて使い分ける。
| 段階 | 用途 | コントラスト |
|---|
*-bg | バナー・バッジの背景 | 薄い（背景用） |
* | アイコン・ボーダー | 中間（非テキスト3:1） |
*-text | テキスト | 濃い（テキスト4.5:1） |
| Tailwind クラス | 用途 |
|---|
bg-destructive-bg | バナー・バッジ背景 |
text-destructive | アイコン |
border-destructive | ボーダー |
text-destructive-text | エラーメッセージ |
| Tailwind クラス | 用途 |
|---|
bg-warning-bg | バナー背景 |
text-warning | アイコン |
border-warning | ボーダー |
text-warning-text | 警告テキスト |
| Tailwind クラス | 用途 |
|---|
bg-success-bg | バナー背景 |
text-success | アイコン |
border-success | ボーダー |
text-success-text | 成功メッセージ |
| Tailwind クラス | 用途 |
|---|
bg-info-bg | バナー背景 |
text-info | アイコン |
border-info | ボーダー |
text-info-text | 補足情報テキスト |
// 3段階を正しく使い分ける
<div className="bg-destructive-bg border border-destructive">
<Icon className="text-destructive" name="CircleAlert" />
<p className="text-destructive-text">入力内容にエラーがあります</p>
</div>
// ❌ bg にデフォルトを使うと濃すぎる
<div className="bg-destructive">
// ❌ テキストに bg を使うとコントラスト不足
<p className="text-destructive-bg">エラーです</p>
カテゴリ分類の視覚的な区別に使用する。色に意味はなく、ドメインカテゴリとの対応はアプリケーション側で行う。
6色が利用可能で、各色はステータスと同じ3段階（*-bg / * / *-text）で構成する。
| Tailwind クラス（例: amber） | 用途 |
|---|
bg-cat-amber-bg | タグ背景 |
border-cat-amber | ボーダー |
text-cat-amber-text | テキスト |
利用可能な色: amber / lime / teal / blue / purple / pink
| Tailwind クラス | 用途 |
|---|
border-border | カード枠、テーブル罫線、区切り線 |
border-input | フォーム入力のボーダー |
ring-ring | フォーカスリング |
「どのUI部品にどのトークンを使うか」の対応表。
| UI部品 | 使用するトークン |
|---|
| ページ全体の背景 | bg-background |
| カード・ダイアログ・ドロップダウン | bg-card |
| CTAボタン・選択中のタブ | bg-primary |
| 控えめなボタン・hover時の行ハイライト | bg-muted |
| エラーバナー・バッジ背景 | bg-destructive-bg |
| 警告バナー背景 | bg-warning-bg |
| 成功バナー背景 | bg-success-bg |
| 情報バナー背景 | bg-info-bg |
| UI部品 | 使用するトークン |
|---|
| 本文テキスト・見出し | text-foreground |
| カード内のテキスト | text-card-foreground |
| CTAボタン上のテキスト | text-primary-foreground |
| 補助テキスト・プレースホルダー | text-muted-foreground |
| エラーメッセージ | text-destructive-text |
| 警告メッセージ | text-warning-text |
| 成功メッセージ | text-success-text |
| UI部品 | 使用するトークン |
|---|
| カード枠・テーブル罫線・区切り線 | border-border |
| フォーム入力（input, select, textarea） | border-input |
| フォーカスリング | ring-ring |
| エラー状態のボーダー | border-destructive |
| UI部品 | 使用するトークン |
|---|
| 通常のアイコン | text-current |
| 控えめなアイコン | text-muted-foreground |
| エラーアイコン | text-destructive |
| 警告アイコン | text-warning |
| 成功アイコン | text-success |
| 情報アイコン | text-info |