93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
---
|
||
title: "CSS Design System"
|
||
type: concept
|
||
tags: [css, design-system, frontend, architecture]
|
||
sources: [design-ux-architect.md]
|
||
last_updated: 2026-04-24
|
||
---
|
||
|
||
## Definition
|
||
|
||
CSS Design System 是一套结构化的 CSS 架构规范，通过 CSS Custom Properties（CSS 变量）定义颜色、排版、间距等基础设计 Token，供整个项目复用，确保视觉一致性和主题切换能力。
|
||
|
||
## Core Components
|
||
|
||
### Color System
|
||
```css
|
||
:root {
|
||
/* Light Theme Colors */
|
||
--bg-primary: [spec-light-bg];
|
||
--bg-secondary: [spec-light-secondary];
|
||
--text-primary: [spec-light-text];
|
||
--text-secondary: [spec-light-text-muted];
|
||
--border-color: [spec-light-border];
|
||
|
||
/* Brand Colors */
|
||
--primary-color: [spec-primary];
|
||
--secondary-color: [spec-secondary];
|
||
--accent-color: [spec-accent];
|
||
}
|
||
```
|
||
|
||
### Typography Scale
|
||
```css
|
||
:root {
|
||
--text-xs: 0.75rem; /* 12px */
|
||
--text-sm: 0.875rem; /* 14px */
|
||
--text-base: 1rem; /* 16px */
|
||
--text-lg: 1.125rem; /* 18px */
|
||
--text-xl: 1.25rem; /* 20px */
|
||
--text-2xl: 1.5rem; /* 24px */
|
||
--text-3xl: 1.875rem; /* 30px */
|
||
}
|
||
```
|
||
|
||
### Spacing System
|
||
```css
|
||
:root {
|
||
--space-1: 0.25rem; /* 4px */
|
||
--space-2: 0.5rem; /* 8px */
|
||
--space-4: 1rem; /* 16px */
|
||
--space-6: 1.5rem; /* 24px */
|
||
--space-8: 2rem; /* 32px */
|
||
--space-12: 3rem; /* 48px */
|
||
--space-16: 4rem; /* 64px */
|
||
}
|
||
```
|
||
|
||
## Theme Support
|
||
|
||
CSS Design System 必须原生支持三种主题模式：
|
||
|
||
- **Light Theme**：浅色背景，深色文字
|
||
- **Dark Theme**：深色背景，浅色文字
|
||
- **System Theme**：`prefers-color-scheme` 检测系统偏好
|
||
|
||
```css
|
||
[data-theme="dark"] {
|
||
--bg-primary: [spec-dark-bg];
|
||
--bg-secondary: [spec-dark-secondary];
|
||
--text-primary: [spec-dark-text];
|
||
--text-secondary: [spec-dark-text-muted];
|
||
--border-color: [spec-dark-border];
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) {
|
||
--bg-primary: [spec-dark-bg];
|
||
/* ... */
|
||
}
|
||
}
|
||
```
|
||
|
||
## Related Concepts
|
||
|
||
- [[Theme-Toggle]]：主题切换交互组件
|
||
- [[Theme-Manager]]：JavaScript 主题管理类
|
||
- [[Layout-Framework]]：基于此系统的布局架构
|
||
- [[Component-Architecture]]：组件样式规范
|
||
|
||
## Sources
|
||
|
||
- [[design-ux-architect]] — CSS Design System 的完整定义和示例代码
|