ニュートラルランプ
<html>(または任意のサブツリー)の data-neutral 属性は、
ニュートラルランプ — すべての面、枠線、ミュート背景、セカンダリ
ボタン、本文テキストの背後にあるグレー群 — をアクセントカラーに触れずに
差し替えます。5 つのランプが同梱され、いずれもライトとダークの両方に
調整済みです。
data-neutral は
data-color(アクセント)、
data-theme(ライト / ダーク)、
data-densityと直交します。
同じ祖先に設定すればすべて一緒にカスケードします — 例えばダークモードで
slate ニュートラルに teal アクセントなら
data-color="teal" data-neutral="slate" data-theme="dark" です。
data-neutral の値 | 性格 | ライトのページ背景 / 枠線 | ダークの面 |
|---|---|---|---|
(なし) / gray | デフォルトニュートラル | #f9fafb / #d0d5dd | #1f2937 |
slate | 冷たい、青み | #f8fafc / #cbd5e1 | #1e293b |
zinc | 冷たい、低彩度 | #fafafa / #d4d4d8 | #27272a |
neutral | 純グレー | #fafafa / #d4d4d4 | #262626 |
stone | 温かい、茶み | #fafaf9 / #d6d3d1 | #292524 |
ライトモードでは、どのランプでもカードの面は白のままです(動くのは ページ背景、枠線、ミュート塗り、セカンダリボタン、テキストだけ)— デフォルトと同じ振る舞いです。ダークモードでは面そのものがランプの 800 シェードに再着色されます。ヘッダーのテーマスイッチを切り替えて、 下の各行のダーク版を確かめてください。
ライブプレビュー
Section titled “ライブプレビュー”下の各パネルは異なる data-neutral 値を持ちます。外側のパネルはランプの
ページ背景を使い、内側のカードは面です。
ページへの適用
Section titled “ページへの適用”サイト全体なら <html> に設定します:
<html data-neutral="slate">…</html>セクション単位の上書き:
<section data-neutral="stone">…</section>ほかの軸と同様、サブツリーでも機能します。各ランプブロックが影響する
コンポーネント変数を具体的な値で再宣言する(凍結された var() 継承が
ない)からです —
カスケードの実際の動きを
参照。
何が変わるか
Section titled “何が変わるか”デフォルト以外の各ランプは、次の semantic キーを上書きします(ライトは
neutral.<ramp>.tokens.json、ダークは neutral.<ramp>.dark.tokens.json):
--hc-color-bg --hc-color-text --hc-color-text-muted--hc-color-border --hc-color-border-strong --hc-color-muted-bg--hc-color-surface (dark only)--hc-color-action-secondary-* --hc-color-status-neutral-*これらは各コンポーネントの --hc-{component}-* の面 / テキスト / 枠線
変数へカスケードします。ビルドは影響する末端を
[data-neutral="<ramp>"](ライト)と
[data-theme="dark"][data-neutral="<ramp>"](ダーク)のブロック内に
再出力します。
意図的に影響しないもの:
- アクセント(
action.primary、フォーカスリング)—data-colorの 所有物。 - semantic の
info/success/warning/error— 固定の ステータスパレット。 - コントロールのサイズ —
data-densityの所有物。