Color
颜色
组件只消费语义色（按用途命名），它们在亮/暗主题下映射到不同的原始色。 因此切主题只换值、不换类名。
界面 / 表面
页面底
--color-bg亮 gray-50 · 暗 gray-950
卡片表面
--color-surface亮 white · 暗 gray-900
表面悬停
--color-surface-hover亮 gray-100 · 暗 gray-800
边框 / 发丝线
--color-border亮 gray-200 · 暗 gray-800
文字
主文字
--color-foreground亮 gray-900 · 暗 gray-50
次要文字
--color-muted亮 gray-500 · 暗 gray-400
品牌 / 强调
主色
--color-primary亮 brand-600 · 暗 brand-500
主色悬停
--color-primary-hover亮 brand-500 · 暗 brand-400
焦点环
--color-ring亮 brand-500 · 暗 brand-400
状态
危险
--color-danger亮 danger-600 · 暗 danger-500
成功
--color-success亮 success-600 · 暗 success-500
警告
--color-warning亮 warning-600 · 暗 warning-500
图表分类色
数据序列专用，SVG 直接 var() 消费，明暗各自调亮度以保对比。
1
2
3
4
原始灰阶
底层调色盘（primitives.css），明暗共用、不随主题变。语义色由它们派生。
50100200300400500600700800900950