981 B
981 B
title, type, tags
| title | type | tags | |||
|---|---|---|---|---|---|
| CSS 设计系统 | concept |
|
定义
通过 CSS 变量（Custom Properties）定义颜色、字体、间距、布局的系统化方法，为项目提供一致性的视觉语言和可维护的样式基础。
核心要素
- 颜色变量：语义化命名（--bg-primary, --text-primary, --accent-color）
- 字体系统：层级化字号（--text-xs 到 --text-3xl）
- 间距系统：基于 4px 网格的间距变量（--space-1 到 --space-16）
- 布局系统：容器尺寸（--container-sm 到 --container-xl）
主题支持
- Light Theme：浅色背景和深色文字
- Dark Theme：深色背景和浅色文字
- System Theme：通过 prefers-color-scheme 自动匹配系统偏好
实践
- 使用语义化命名而非具体颜色值
- 建立设计 tokens 供组件复用
- 通过 CSS 变量实现主题动态切换