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

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

colorPalette

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

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

Background

ページやセクションの背景に使うトークン

ページの地色。白いパネル（bg.panel）を浮かせる沈んだ背景色

bg より淡い背景色（step1）

アプリ全体の背景

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

強調された背景

エラー状態のアラートやバナーの地色

情報表示のアラートやバナーの地色

反転背景

沈んだ背景

パネルやカードの背景

白いパネル状のコントロールのホバー背景

淡いアプリ背景

成功状態のアラートやバナーの地色

警告状態のアラートやバナーの地色

※ ページ全体の地色には colorPalette.bg を使い、その上に置くカードやパネルは bg.panel で浮かせる
※ colorPalette.bg.subtle は bg より淡い（step1）。グローバルの bg.subtle は bg より暗い（gray.2）で向きが逆なので混同しない
※ アラートやバナーの地色には bg.error / bg.warning / bg.success / bg.info を、同名の fg.* と組み合わせて使う

Surface

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

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

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

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

白いパネルの上にごく薄く色を差す面（表の見出し行・縞・カードの hover）

※ subtle → surface → hover → active の順で一段ずつ濃くする。段階を飛ばさない
※ 白いパネル（bg.panel）の上にごく薄く色を差す面（表の見出し行や縞、カードの hover）には surface.subtle を使う

Solid

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

ボタンなどの塗りつぶし

塗りつぶし（押下時）。solid.emphasized をさらに一段沈めた色

塗りつぶし（ホバー時）

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

Foreground

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

標準の文字色

補足テキスト用の文字色

控えめな文字色

標準の文字色

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

エラーメッセージの文字色

情報メッセージの文字色

bg.inverted の上に載せる文字色

補足テキスト用の文字色

入力欄や Select の未入力時に表示するプレースホルダーの文字色

控えめな文字色

成功メッセージの文字色

警告メッセージの文字色

※ fg 系は bg / surface 系の上でのみ使う。solid の上には contrast を、bg.inverted の上には fg.inverted を使う
※ エラーメッセージなどのステータス文字には fg.error / fg.warning / fg.success / fg.info を使う
※ 入力欄や Select のプレースホルダーには fg.placeholder を使う（fg.subtle は半透明で白地の Lc が足りない）

Contrast

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

solid の上に載せる文字色

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

Border

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

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

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

パレットの色味を帯びた操作対象の枠線

パレットの色味を帯びた控えめな枠線

パレットの色味を帯びた最も淡い枠線

標準の枠線

強調された枠線

エラー状態の枠線

情報表示の枠線

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

控えめな枠線

最も淡い枠線

成功状態の枠線

警告状態の枠線

※ 通常の区切りには border、入力欄など操作対象には border.interactive を使う
※ colorPalette.border.* はグローバルの border.* と同じ段構成（subtle / muted / 標準 / interactive / emphasized）で、パレットの色味を帯びた枠線が欲しいときに差し替える

Focus

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

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

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

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

Overlay

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

モーダルのオーバーレイ

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

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

Colors