设计令牌
查看所有可安装组件共享的语义、表面与深度令牌。
语义令牌
这些值描述角色与状态。组件使用这些令牌，而不是硬编码颜色。
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ring新拟态表面令牌
凸起、凹陷、悬停与浮动表面的深度使用共享阴影令牌。
--neu-surface--neu-surface-soft--neu-surface-low--neu-shadow-raised--neu-shadow-raised-sm--neu-shadow-inset--neu-shadow-inset-sm--neu-shadow-hover--neu-shadow-floating--neu-radius-control--neu-radius-surface--neu-duration配置维度
Theme Studio只组合主题源码定义的有限值。以下名称为代码中使用的值。
- 深度
- subtle · balanced · deep
- 光照方向
- top-left · top-right · bottom-left · bottom-right
- 控件形状
- rounded · soft · pill
- 动效时长
- 120ms · 180ms · 260ms
预设
Air
冷蓝灰色 · 鲜明蓝色
style-air
balanced · top-left · soft
Lavender
紫灰色 · 柔和对比
style-lavender
subtle · top-left · pill
Sage
沉静鼠尾草绿 · 自然对比
style-sage
subtle · top-right · soft
Clay
暖米色 · 珊瑚色
style-clay
balanced · top-left · rounded
Graphite
中性灰色 · 清晰对比
style-graphite
deep · top-left · rounded
使用规则
- 组件使用语义与表面变量，不维护独立配色。
- 持续选中状态与临时悬停状态保持视觉区分。
- 减少动态效果只调整过渡行为，不移除深度或焦点语义。
- 生成的CSS、初始化脚本与注册表样式项来自同一个主题引擎。