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-hairline亮 transparent · 暗 gray-800（同 border）
只用于 border-*：给带阴影的表面（卡片/浮层/按钮）勾轮廓。浅色主题下它就是 transparent——用作 text- / bg- / fill- 会静默隐形（无报错、无回落），填充与文字请改用 border 或 muted。
文字
主文字
--color-foreground亮 gray-900 · 暗 gray-50
次要文字
--color-muted亮 gray-500 · 暗 gray-400
品牌 / 强调
主色
--color-primary亮 brand-700 · 暗 brand-400
主色悬停
--color-primary-hover亮 brand-500 · 暗 brand-500
焦点环
--color-ring亮 brand-500 · 暗 brand-400
状态
危险
--color-danger亮 danger-700 · 暗 danger-400
成功
--color-success亮 success-600 · 暗 success-500
警告
--color-warning亮 warning-700 · 暗 warning-500
图表分类色
数据序列专用，SVG 直接通过 var() 消费；亮暗模式各自调整亮度以保持对比。
1
2
3
4
原始灰阶
底层调色盘位于 primitives.css，明暗共用且不随主题变化；语义色由它派生。
50100200300400500600700800900950