Interface Lab
返回知识库
Design Systems Page Patterns

语义主题 Token 的作用域

主题 token 要定义作用域和层级,让组件消费语义角色,而不是散落一次性颜色值。

设计原则

设计系统的主题能力来自少量可预测的语义开关:强调色、灰阶、面板背景、缩放、圆角和组件变体。

大理论

Token 不是把所有 hex 变成变量。真正可维护的 token 要说明它属于品牌、主题、组件、状态还是局部场景,并能被浅色/深色模式共同消费。

小知识点

  1. 先定义全局主题 token,再定义组件语义 token,最后才允许局部例外。
  2. 颜色要区分 text、muted、border、surface、accent、danger、success、focus。
  3. 圆角、缩放和密度会改变产品气质,不能只看颜色。
  4. variant 应表达层级和用途,而不是每个视觉细节一个 prop。

设计判断

如果改一个 accent token 能稳定影响按钮、链接、焦点和选中态,作用域是健康的;如果每个组件都要手改 hex,token 契约失败。

实现建议

组件只消费语义 token 或变体。新增 token 时同步写用途、默认值、深色值、可访问性约束和受影响组件。

反例/风险

硬编码 hex、浅色 token 直接反转成深色、状态色只靠颜色表达、品牌色无对比度检查。

案例分析

Radix Themes 的主题文档把 accentColorgrayColorpanelBackgroundscalingradius 和组件 variant 作为主题入口。可学习点是:主题控制面要小而语义清楚,组件再通过 variant 建立视觉层级。

来源链接

Radix Themes: https://www.radix-ui.com/themes/docs/theme/overview

Agent 指令

新增风格系统时必须产出 token 表和组件映射;禁止只把参考图颜色硬编码进单个组件。