设计原则
设计系统的主题能力来自少量可预测的语义开关:强调色、灰阶、面板背景、缩放、圆角和组件变体。
大理论
Token 不是把所有 hex 变成变量。真正可维护的 token 要说明它属于品牌、主题、组件、状态还是局部场景,并能被浅色/深色模式共同消费。
小知识点
- 先定义全局主题 token,再定义组件语义 token,最后才允许局部例外。
- 颜色要区分 text、muted、border、surface、accent、danger、success、focus。
- 圆角、缩放和密度会改变产品气质,不能只看颜色。
- variant 应表达层级和用途,而不是每个视觉细节一个 prop。
设计判断
如果改一个 accent token 能稳定影响按钮、链接、焦点和选中态,作用域是健康的;如果每个组件都要手改 hex,token 契约失败。
实现建议
组件只消费语义 token 或变体。新增 token 时同步写用途、默认值、深色值、可访问性约束和受影响组件。
反例/风险
硬编码 hex、浅色 token 直接反转成深色、状态色只靠颜色表达、品牌色无对比度检查。
案例分析
Radix Themes 的主题文档把 accentColor、grayColor、panelBackground、scaling、radius 和组件 variant 作为主题入口。可学习点是:主题控制面要小而语义清楚,组件再通过 variant 建立视觉层级。
来源链接
Radix Themes: https://www.radix-ui.com/themes/docs/theme/overview
Agent 指令
新增风格系统时必须产出 token 表和组件映射;禁止只把参考图颜色硬编码进单个组件。