简体中文
令牌浏览器
全部全局令牌与组件覆盖槽列在一张表里：按名字、取值或说明搜，按类别挑；上方切明暗、密度与对比度，「当前取值」与色块随之实算。点「复制」拿到 var() 写法。想先定一套品牌色与圆角再看取值，用主题设计器。
68 / 5612 条
| 令牌 | 源值 | 当前取值 | 复制 |
|---|---|---|---|
--xh-bg-page | var(--xh-color-neutral-100) | — | |
--xh-bg-canvas | var(--xh-color-neutral-0) | — | |
--xh-bg-surface | var(--xh-color-neutral-0) | — | |
--xh-bg-surface-raised | var(--xh-color-neutral-0) | — | |
--xh-bg-subtle | color-mix(in oklab, var(--xh-ink) 4.7%, transparent) | — | |
--xh-bg-subtle-hover | color-mix(in oklab, var(--xh-ink) 10.2%, transparent) | — | |
--xh-bg-subtle-active | color-mix(in oklab, var(--xh-ink) 16.9%, transparent) | — | |
--xh-bg-field | var(--xh-bg-surface) | — | |
--xh-bg-field-invalid | color-mix(in oklab, var(--xh-border-invalid) 4%, transparent) | — | |
--xh-bg-mark | var(--xh-color-yellow-200) | — | |
--xh-bg-muted | color-mix(in oklab, var(--xh-ink) 4.7%, transparent) | — | |
--xh-bg-brand | var(--xh-color-brand-600) | — | |
--xh-bg-brand-hover | var(--xh-color-brand-700) | — | |
--xh-bg-brand-active | var(--xh-color-brand-800) | — | |
--xh-bg-brand-subtle | color-mix(in oklab, var(--xh-bg-brand) 12%, var(--xh-bg-surface)) | — | |
--xh-bg-brand-subtle-hover | color-mix(in oklab, var(--xh-bg-brand) 20%, var(--xh-bg-surface)) | — | |
--xh-bg-brand-subtle-active | color-mix(in oklab, var(--xh-bg-brand) 28%, var(--xh-bg-surface)) | — | |
--xh-bg-segment-selected | var(--xh-bg-brand) | — | |
--xh-bg-segment-selected-hover | var(--xh-bg-brand-hover) | — | |
--xh-bg-segment-selected-disabled | color-mix(in oklab, var(--xh-bg-brand) 50%, var(--xh-bg-surface)) | — | |
--xh-bg-overlay | color-mix(in oklab, var(--xh-color-neutral-900) 40%, transparent) | — | |
--xh-bg-media-chrome | color-mix(in oklab, var(--xh-color-neutral-950) 55%, transparent) | — | |
--xh-bg-media-chrome-hover | color-mix(in oklab, var(--xh-color-neutral-950) 70%, transparent) | — | |
--xh-bg-media-chrome-active | color-mix(in oklab, var(--xh-color-neutral-950) 80%, transparent) | — | |
--xh-bg-scrollbar-track | oklch(0 0 0 / 0) | — | |
--xh-fg-default | var(--xh-color-neutral-900) | — | |
--xh-fg-muted | var(--xh-color-neutral-600) | — | |
--xh-fg-subtle | var(--xh-color-neutral-550) | — | |
--xh-fg-disabled | var(--xh-color-neutral-400) | — | |
--xh-fg-field-clear | color-mix(in oklab, var(--xh-fg-muted) 50%, transparent) | — | |
--xh-fg-on-brand | var(--xh-color-neutral-0) | — | |
--xh-fg-on-brand-subtle | color-mix(in oklab, var(--xh-bg-brand) 60%, var(--xh-fg-default)) | — | |
--xh-fg-on-media-chrome | var(--xh-color-neutral-0) | — | |
--xh-fg-brand | var(--xh-color-brand-600) | — | |
--xh-fg-brand-strong | var(--xh-color-brand-700) | — | |
--xh-fg-segment-selected | var(--xh-fg-on-brand) | — | |
--xh-fg-segment-selected-disabled | var(--xh-fg-on-brand) | — | |
--xh-fg-success | var(--xh-color-success-700) | — | |
--xh-fg-warning | var(--xh-color-warning-800) | — | |
--xh-fg-info | var(--xh-color-info-700) | — | |
--xh-fg-danger | var(--xh-color-danger-700) | — | |
--xh-fg-danger-hover | color-mix(in oklab, var(--xh-color-danger-700) 82%, var(--xh-color-neutral-950)) | — | |
--xh-fg-scrollbar-thumb | color-mix(in oklab, var(--xh-fg-default) 15%, transparent) | — | |
--xh-fg-scrollbar-thumb-hover | color-mix(in oklab, var(--xh-fg-default) 25%, transparent) | — | |
--xh-fg-scrollbar-thumb-active | color-mix(in oklab, var(--xh-fg-default) 35%, transparent) | — | |
--xh-border-default | color-mix(in oklab, var(--xh-ink) 10.2%, transparent) | — | |
--xh-border-subtle | color-mix(in oklab, var(--xh-ink) 4.7%, transparent) | — | |
--xh-border-strong | color-mix(in oklab, var(--xh-ink) 16.9%, transparent) | — | |
--xh-border-control | var(--xh-border-default) | — | |
--xh-border-control-hover | color-mix(in oklab, var(--xh-ink) 37.9%, transparent) | — | |
--xh-border-control-focus | var(--xh-ring-focus) | — | |
--xh-border-invalid | var(--xh-color-danger-600) | — | |
--xh-border-at-limit | var(--xh-color-warning-600) | — | |
--xh-gradient-brand-from | var(--xh-color-brand-500) | — | |
--xh-gradient-brand-to | var(--xh-color-brand-700) | — | |
--xh-diff-added-bg | oklch(0.94 0.05 150) | — | |
--xh-diff-added-fg | oklch(0.44 0.13 150) | — | |
--xh-diff-removed-bg | oklch(0.94 0.05 25) | — | |
--xh-diff-removed-fg | oklch(0.47 0.16 25) | — | |
--xh-syntax-string | oklch(0.52 0.13 165) | — | |
--xh-syntax-number | oklch(0.5 0.13 70) | — | |
--xh-syntax-keyword | oklch(0.5 0.2 300) | — | |
--xh-ink | oklch(0 0 0) | — | |
--xh-bg-subtle-opaque | color-mix(in srgb, var(--xh-ink) 4.7%, var(--xh-bg-surface)) | — | |
--xh-bg-subtle-hover-opaque | color-mix(in srgb, var(--xh-ink) 10.2%, var(--xh-bg-surface)) | — | |
--xh-bg-subtle-active-opaque | color-mix(in srgb, var(--xh-ink) 16.9%, var(--xh-bg-surface)) | — | |
--xh-bg-muted-opaque | color-mix(in srgb, var(--xh-ink) 4.7%, var(--xh-bg-surface)) | — | |
--xh-border-default-opaque | color-mix(in srgb, var(--xh-ink) 10.2%, var(--xh-bg-surface)) | — |
怎么读
| 列 | 内容 |
|---|---|
| 令牌 | 名字；组件覆盖槽另写所属组件、部件与一句说明 |
| 源值 | 令牌产物里的写法，引用保留 var()；组件覆盖槽写它缺省取自哪一支 |
| 当前取值 | 在表格所在的局部视觉环境里实算出的值，颜色另画色块；组件覆盖槽取它缺省取自的那一支 |
全局令牌分原语与语义两层，见设计令牌与主题。组件覆盖槽是每个组件公开的样式入口，写在组件根或祖先上即改那一处，不必去改全局语义令牌；各组件页的「CSS 变量」一节列的是同一批。
「跟随系统」走纯 CSS 的 data-theme="system"：表格的根上写的就是这个值，系统明暗变了取值跟着变，不经脚本。