CSS 变量驱动的主题系统设计

把"令牌"抽离出来

设计系统的核心是设计令牌（design tokens）——颜色、圆角、间距、阴影这些会被反复使用的值。我们把它们定义为 CSS 变量：

:root {
  --c-primary: #0c8a5b;
  --radius-md: 8px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
}

换肤 = 覆盖变量

所有组件只引用变量，从不写死颜色。换肤时只需在另一作用域覆盖同名变量：

html.dark {
  --c-primary: #3fae7e;
  --c-bg: #141615;
}

组件代码一行都不用改，整套界面就完成了明暗切换。

为什么不用预处理器

• 原生变量可运行时修改，预处理器变量在编译后就消失了。
• 可被 JS 读写，getComputedStyle 能拿到当前值，便于做动态主题。
• 零构建依赖，浏览器原生支持。

命名约定

我们用语义化命名（--c-bg、--c-text-muted）而非具象命名（--blue-500）。这样当品牌色从蓝换成绿时，只需要改一处定义，而不必全站替换。

变量名描述"用途"，而非"外观"。这是设计系统可维护的关键。