设计令牌
颜色角色
文本、表面和线条角色，各自具有浅色与深色值。
本页内容
类
| 类 | 声明 |
|---|---|
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() 值的两个参数。实际选择由元素使用的配色方案决定，而非仅由类前缀或操作系统决定。
文本
| 类 | 浅色 | 深色 |
|---|---|---|
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))：浅色选择第一个颜色，深色选择第二个。类与生成规则都不改变。
一个角色，两种局部配色方案
实际使用的配色方案选择第一个或第二个颜色。两个示例都保留 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，深色示例使用第二个参数 --color-zinc-40。
- 两个示例都使用 bg-surface-base 与相同的文本类。彩色引导线用于识别两个参数，是标注线，不是最终的文本颜色。
- 实际使用的局部配色方案选择分支。这个比较并不表示系统媒体查询会跟随手动选择的局部主题。
预设在根元素启用 color-scheme: light dark。其中的 data-theme="light" 和 data-theme="dark" 选择器可在根元素、嵌套区域或 shadow host 选择配色方案。选择由原生 CSS 执行，切换配色方案不需要重新生成这个工具类。
@dark 和 @light 类后缀检查的是系统偏好。手动选择 data-theme 不会启用这些媒体查询。需要基于选择器的条件时，请使用模式契约定义的形式。
角色提供的是颜色，不是组件，也不保证在每个背景上都有足够对比。反色表面有对应的反色文本角色。分隔线与弱化线条用于装饰，控件线条则用于识别边界。更改表面、透明度或令牌值时，请重新检查实际的颜色配对。
用法
使用角色组成卡片：抬升的表面、分隔线以及强调、正文和弱化文本。
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) }}