設計變數
色彩角色
文字、表面與線條角色，各自具有淺色與深色值。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
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() 值的兩個參數。實際選擇由元素使用的配色方案決定，不是單靠 class 前綴或作業系統。
文字
| 類別 | 淺色 | 深色 |
|---|---|---|
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))：淺色選取第一個色彩，深色選取第二個。class 與生成規則都不會改變。
一個角色，兩種區域配色方案
實際使用的配色方案會選取第一個或第二個色彩。兩個範例都保留 fg-text-muted 與 bg-surface-base，由區域配色方案改變它們的計算色彩。
文字說明
- fg-text-muted 產生 color: var(--color-text-muted)。其預設 token 包含 light-dark(var(--color-zinc-60), var(--color-zinc-40))。
- 淺色範例使用第一個參數 --color-zinc-60，深色範例使用第二個參數 --color-zinc-40。
- 兩個範例都使用 bg-surface-base 與相同的文字 class。有色引導線用來識別兩個參數，是標註線，不是最後的文字色彩。
- 實際使用的區域配色方案會選取分支。這個比較不表示系統媒體查詢會跟隨手動選取的區域主題。
預設集在根元素啟用 color-scheme: light dark。其中的 data-theme="light" 與 data-theme="dark" 選擇器，可在根元素、巢狀區域或 shadow host 選取配色方案。選擇由原生 CSS 執行，切換配色方案不需要重新生成這個 utility。
@dark 與 @light class 後綴檢查的是系統偏好設定。手動選擇 data-theme 不會啟用這些媒體查詢。需要以選擇器為條件時，請使用模式契約定義的形式。
角色提供的是色彩，不是元件，也不保證在每個背景上都有足夠對比。反相表面有對應的反相文字角色。分隔線與低調線條屬於裝飾用途，控制項線條則用來識別邊界。變更表面、透明度或 token 值時，請重新檢查實際的色彩配對。
用法
使用角色組成卡片：浮起的表面、分隔線，以及強調、內文與弱化文字。
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) }}自訂
新增一個角色，為每個配色方案各設定一個值：--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) }}