CSS 设计系统：从 token 到组件
从设计 token 到组件的完整 CSS 设计系统构建指南。
CSS 设计系统
一个好的设计系统不是「漂亮」，而是「可复用 + 可扩展 + 一致性」。
三个层级
- Token 层：颜色、字号、间距等原子级变量
- Primitive 层：按钮、卡片、输入框等基础组件
- Pattern 层：Hero、Header、Footer 等业务组件
Token 的命名
:root {
--chino: 217 47% 51%; /* 主色 HSL 三元组 */
--radius-lg: .5rem;
--space-4: 1rem;
}
使用 HSL 三元组的好处是：可以拆开合成任意透明度。
.card { background: hsla(var(--background), .7); }
暗色模式
.chino-dark {
--background: 220 25% 5%;
--default-900: 220 20% 97%;
}
只需切换类名，所有组件自动适配。