トークン
カラーロール
テキスト、サーフェス、線のロール。それぞれライト用とダーク用の値を持ちます。
このページの内容
クラス
| クラス | 宣言 |
|---|---|
fg-text-<name> | color: var(--color-text-<name>); |
bg-surface-<name> | background-color: var(--color-surface-<name>); |
b-line-<name> | border-color: var(--color-line-<name>); |
その他のカラーファミリー（19 件）
| クラス | 宣言 |
|---|---|
b-<role>-<name> | border-color: var(--color-<role>-<name>); |
bb-<role>-<name> | border-bottom-color: var(--color-<role>-<name>); |
bg-<role>-<name> | background-color: var(--color-<role>-<name>); |
bl-<role>-<name> | border-left-color: var(--color-<role>-<name>); |
br-<role>-<name> | border-right-color: var(--color-<role>-<name>); |
bt-<role>-<name> | border-top-color: var(--color-<role>-<name>); |
bx-<role>-<name> | border-inline-color: var(--color-<role>-<name>); |
by-<role>-<name> | border-block-color: var(--color-<role>-<name>); |
fg-<role>-<name> | color: var(--color-<role>-<name>); |
bxe-<role>-<name> | border-inline-end-color: var(--color-<role>-<name>); |
bxs-<role>-<name> | border-inline-start-color: var(--color-<role>-<name>); |
bye-<role>-<name> | border-block-end-color: var(--color-<role>-<name>); |
bys-<role>-<name> | border-block-start-color: var(--color-<role>-<name>); |
fill-<role>-<name> | fill: var(--color-<role>-<name>); |
caret-<role>-<name> | caret-color: var(--color-<role>-<name>); |
accent-<role>-<name> | accent-color: var(--color-<role>-<name>); |
stroke-<role>-<name> | stroke: var(--color-<role>-<name>); |
outline-<role>-<name> | outline-color: var(--color-<role>-<name>); |
text-fill-color-<role>-<name> | -webkit-text-fill-color: var(--color-<role>-<name>); |
ロールは色のキーの一部です。fg-text-muted は color 名前空間を通じて --color-text-muted を参照します。bg-text-link や outline-line-control も含め、すべてのカラーファミリーでロールのキーを使えます。ロール名がプロパティを制限することはありません。
値
ライトとダークは、各プリセット light-dark() 値の 2 つの引数に対応します。選択は要素で実際に使われるカラースキームによって決まり、クラスの接頭辞や OS だけでは決まりません。
テキスト
| クラス | ライト | ダーク |
|---|---|---|
fg-text-body | var(--color-zinc-70) | var(--color-zinc-30) |
fg-text-strong | var(--color-zinc-100) | var(--color-white) |
fg-text-muted | var(--color-zinc-60) | var(--color-zinc-40) |
fg-text-disabled | var(--color-zinc-40) | var(--color-zinc-60) |
fg-text-inverse | var(--color-white) | var(--color-black) |
fg-text-link | var(--color-blue-60) | var(--color-blue-30) |
fg-text-link-hover | var(--color-blue-70) | var(--color-blue-20) |
fg-text-stone | var(--color-stone-60) | var(--color-stone-30) |
fg-text-gray | var(--color-gray-60) | var(--color-gray-30) |
fg-text-zinc | var(--color-zinc-60) | var(--color-zinc-30) |
fg-text-neutral | var(--color-neutral-60) | var(--color-neutral-30) |
fg-text-slate | var(--color-slate-60) | var(--color-slate-30) |
fg-text-brown | var(--color-brown-60) | var(--color-brown-30) |
fg-text-orange | var(--color-orange-70) | var(--color-orange-30) |
fg-text-amber | var(--color-amber-80) | var(--color-amber-40) |
fg-text-yellow | var(--color-yellow-90) | var(--color-yellow-40) |
fg-text-lime | var(--color-lime-80) | var(--color-lime-40) |
fg-text-green | var(--color-green-80) | var(--color-green-40) |
fg-text-beryl | var(--color-beryl-90) | var(--color-beryl-40) |
fg-text-teal | var(--color-teal-90) | var(--color-teal-40) |
fg-text-cyan | var(--color-cyan-90) | var(--color-cyan-40) |
fg-text-sky | var(--color-sky-70) | var(--color-sky-30) |
fg-text-blue | var(--color-blue-60) | var(--color-blue-30) |
fg-text-indigo | var(--color-indigo-60) | var(--color-indigo-30) |
fg-text-violet | var(--color-violet-60) | var(--color-violet-30) |
fg-text-purple | var(--color-purple-60) | var(--color-purple-30) |
fg-text-fuchsia | var(--color-fuchsia-70) | var(--color-fuchsia-30) |
fg-text-pink | var(--color-pink-80) | var(--color-pink-30) |
fg-text-crimson | var(--color-crimson-80) | var(--color-crimson-30) |
fg-text-red | var(--color-red-80) | var(--color-red-30) |
サーフェス
| クラス | ライト | ダーク |
|---|---|---|
bg-surface-base | var(--color-zinc-0) | var(--color-zinc-95) |
bg-surface-inset | var(--color-zinc-5) | var(--color-zinc-100) |
bg-surface-raised | var(--color-white) | var(--color-zinc-90) |
bg-surface-floating | var(--color-white) | var(--color-zinc-80) |
bg-surface-inverse | var(--color-black) | var(--color-white) |
線
| クラス | ライト | ダーク |
|---|---|---|
b-line-divider | oklch(0% 0 none / .12) | oklch(100% 0 none / .12) |
b-line-control | var(--color-zinc-50) | var(--color-zinc-40) |
b-line-subtle | oklch(0% 0 none / .06) | oklch(100% 0 none / .06) |
その場所のカラースキームが値を選ぶ
fg-text-muted は color: var(--color-text-muted) を出力します。プリセット値は light-dark(var(--color-zinc-60), var(--color-zinc-40)) で、ライトでは最初の色を、ダークでは 2 番目の色を選びます。クラスと生成ルールは変わりません。
1 つのロールと 2 つのローカルなカラースキーム
実際に使われるカラースキームが、最初か 2 番目の色を選びます。両方の見本は fg-text-muted と bg-surface-base を保ち、その場所のスキームが計算された色を変えます。
テキストによる説明
- fg-text-muted は color: var(--color-text-muted) を生成します。プリセットトークンは light-dark(var(--color-zinc-60), var(--color-zinc-40)) を含みます。
- ライトの見本は最初の引数 --color-zinc-60 を、ダークの見本は 2 番目の引数 --color-zinc-40 を使います。
- 両方の見本は bg-surface-base と同じテキストクラスを使います。色付きの引き出し線は 2 つの引数を識別するための注記であり、結果の文字色ではありません。
- 分岐を選ぶのは、その場所で実際に使われるカラースキームです。この比較は、システムのメディアクエリーが手動のローカルテーマに従うことを意味しません。
プリセットはルートで color-scheme: light dark を有効にします。data-theme="light" と data-theme="dark" のセレクターにより、ルート、入れ子の領域、シャドウホストでスキームを選べます。選択はネイティブ CSS が行うため、切り替え時にこのユーティリティを再生成する必要はありません。
@dark と @light のクラス接尾辞が調べるのはシステムの設定です。data-theme を手動で選んでも、これらのメディアクエリーは有効になりません。セレクターに基づく条件には、モードの仕様で定義する形式を使います。
ロールが提供するのは色であり、コンポーネントや、あらゆる背景に対するコントラストの保証ではありません。反転サーフェスには対になる反転テキストのロールがあります。区切り線や控えめな線は装飾用で、コントロールの線は境界を識別するためのものです。サーフェス、不透明度、トークン値を変更したら、実際の色の組み合わせを再確認してください。
関連項目： 変数とモード、ネイティブの light-dark() による選択.
使用例
ロールを組み合わせてカードを作ります。浮き上がったサーフェス、区切り線、強調・本文・控えめなテキストを使います。
Make space for ideas
A steady rhythm keeps the focus on the content.
4 min read
<article class="… b(1) b-solid b-line-divider bg-surface-raised"> <h3 class="… fg-text-strong">Make space for ideas</h3> <p class="… fg-text-body">A steady rhythm keeps the focus on the content.</p> <p class="… bt(1) bt-solid bt-line-divider fg-text-muted">4 min read</p></article>生成された CSS
@layer theme { :root, :host { --color-zinc-30: oklch(78% .0025 265); --color-zinc-40: oklch(68.6% .0028 265); --color-zinc-60: oklch(48.6% .003 265); --color-zinc-70: oklch(39.8% .0028 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40)) } :root, :host { --color-white: oklch(100% 0 none) }}@layer utilities { .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .bt-line-divider { border-top-color: var(--color-line-divider) } .b-solid { border-style: solid } .bt-solid { border-top-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .bt\(1\) { border-top-width: calc(1 * 1px) } .fg-text-body { color: var(--color-text-body) } .fg-text-muted { color: var(--color-text-muted) } .fg-text-strong { color: var(--color-text-strong) }}カスタマイズ
カラースキームごとに値を 1 つ持つロールを追加します。--color-text-brand を定義すると fg-text-brand が使えるようになります。
@theme { --color-text-brand: light-dark( var(--color-indigo-60), var(--color-indigo-30) );}生成された CSS
@layer theme { :root, :host { --color-indigo-30: oklch(70.2% .1611 282.9); --color-indigo-60: oklch(50.06% .2906 282) } :root, :host { --color-text-brand: light-dark(var(--color-indigo-60), var(--color-indigo-30)) }}@layer utilities { .fg-text-brand { color: var(--color-text-brand) }}関連項目： テーマのディレクティブ、色.