来源：https://ui.docs.xihanfun.com/design/token-browser

# 令牌浏览器

全部全局令牌与组件覆盖槽列在一张表里：按名字、取值或说明搜，按类别挑；上方切明暗、密度与对比度，「当前取值」与色块随之实算。点「复制」拿到 `var()` 写法。想先定一套品牌色与圆角再看取值，用[主题设计器](./theme-designer)。

<XhTokenBrowser />

## 怎么读

| 列 | 内容 |
| --- | --- |
| 令牌 | 名字；组件覆盖槽另写所属组件、部件与一句说明 |
| 源值 | 令牌产物里的写法，引用保留 `var()`；组件覆盖槽写它缺省取自哪一支 |
| 当前取值 | 在表格所在的局部视觉环境里实算出的值，颜色另画色块；组件覆盖槽取它缺省取自的那一支 |

全局令牌分原语与语义两层，见[设计令牌与主题](../guide/theme#令牌的两层)。组件覆盖槽是每个组件公开的样式入口，写在组件根或祖先上即改那一处，不必去改全局语义令牌；各组件页的「CSS 变量」一节列的是同一批。

「跟随系统」走纯 CSS 的 `data-theme="system"`：表格的根上写的就是这个值，系统明暗变了取值跟着变，不经脚本。