Update nexus wiki content

2026-05-03 05:42:06 +08:00
parent 90f3811b83
commit 111bc65b7b
707 changed files with 32306 additions and 7289 deletions
--- a/wiki/concepts/CSS-Design-System.md
+++ b/wiki/concepts/CSS-Design-System.md
@@ -0,0 +1,92 @@
+---
+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 的完整定义和示例代码