设计令牌
所有可安装组件共享的语义、表面与深度契约。
语义令牌
这些值描述角色和状态，组件使用它们而不是硬编码颜色。
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ring新拟态表面令牌
raised、inset、hover、floating 等深度效果仅使用共享阴影令牌。
--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 只组合主题源码明确拥有的有限值。
- Depth
- subtle · balanced · deep
- Light
- top-left · top-right · bottom-left · bottom-right
- Control shape
- rounded · soft · pill
- Motion
- 120ms · 180ms · 260ms
Preset
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
使用规则
- Component source consumes semantic and surface variables instead of owning a private palette.
- Persistent selected state stays visually distinct from transient hover state.
- Reduced motion changes transition behavior without removing depth or focus semantics.
- Generated CSS, bootstrap and registry style items come from the same theme engine.