選択されたカラーパレットに適応するセマンティックカラートークン

セマンティックカラートークンは、用途に基づいた色の定義です。選択されたカラーパレット（colorPalette）に応じて動的に適応します。

colorPalette

各カラーパレットは同じ構造に従います。colorPaletteを設定すると、colorPalette.* のトークンが対応するパレットの色に解決されます。

このページのプレビューは、ヘッダーのテーマトグル（mori / umi）に追従します。テーマを切り替えると、各トークンの解決値と前景色のコントラスト比が変化します。トークン名はクリックでコピーでき、スウォッチをクリックすると解決値やコントラスト比などの詳細を確認できます。

Background

ページやセクション、セカンダリ面の背景に使うトークン

セクションの面に使う標準の背景色

セカンダリ面の塗りに使う濃い背景色

ページ全体に使う最も淡い背景色

アプリ全体の背景

無効状態のコントロールの背景

強調された背景

反転背景

沈んだ背景

パネルやカードの背景

淡いアプリ背景

※ ページ全体には bg.subtle、セクションの面には bg を使う

Surface

カードやリストなどコンポーネントの面に使うトークン

コンポーネントの面（通常時）

コンポーネントの面（押下時）

コンポーネントの面（ホバー時）

※ hover → active の順で一段ずつ濃くする。段階を飛ばさない

Solid

ボタンなどの塗りつぶしに使う高彩度トークン

ボタンなどの塗りつぶし

塗りつぶし（ホバー時）

※ solid の上のテキストには必ず contrast を使う
※ hover 時は solid.emphasized に切り替える

Foreground

テキストやアイコンに使う前景色トークン

標準の文字色

補足テキスト用の文字色

bg.secondary の上に載せる文字色（白抜き）

控えめな文字色

無効状態のコントロールの文字色

※ fg 系は bg / surface 系の上でのみ使う。solid の上には contrast を使う

Contrast

solid 塗りつぶしの上に載せる文字色トークン

solid の上に載せる文字色

※ contrast は solid / solid.emphasized の上専用。淡い背景の上では使わない

Border

枠線や区切り線に使うトークン

パレットの色味を帯びた枠線

標準の枠線

強調された枠線

エラー状態の枠線

情報表示の枠線

入力欄など操作対象の枠線

控えめな枠線

最も淡い枠線

成功状態の枠線

警告状態の枠線

※ 通常の区切りには border、入力欄など操作対象には border.interactive を使う

Focus

フォーカスリングに使うトークン

パレットに追従するフォーカスリング

エラー時のフォーカスリング

※ フォーカスリングは focus.ring を outline か box-shadow で描画する

Overlay

モーダルなどの背面を覆うオーバーレイ用トークン

モーダルのオーバーレイ

軽い暗転用のオーバーレイ

※ モーダルの背面には overlay を重ね、コンテンツ自体を暗くしない

Colors