nexus/wiki/concepts/CSS-Design-System.md at b40abbcd473a7093d8261e212e3d6de97c1e516a

ishenwei/nexus

Fork 0

Files

weishen 111bc65b7b Update nexus wiki content

2026-05-03 05:42:12 +08:00

2.2 KiB

Raw Blame History

title, type, tags, sources, last_updated

title

type

Definition

CSS Design System 是一套结构化的 CSS 架构规范，通过 CSS Custom Properties（CSS 变量）定义颜色、排版、间距等基础设计 Token，供整个项目复用，确保视觉一致性和主题切换能力。

Core Components

Color System

: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

: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

: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 检测系统偏好

[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];
    /* ... */
  }
}

Theme-Toggle：主题切换交互组件
Theme-Manager：JavaScript 主题管理类
Layout-Framework：基于此系统的布局架构
Component-Architecture：组件样式规范

Sources

design-ux-architect — CSS Design System 的完整定义和示例代码

2.2 KiB Raw Blame History Unescape Escape