设计令牌 (Design Tokens)

设计系统的原子级基础

设计令牌是设计系统中最基础的变量，它们存储着颜色、字体、间距等设计决策。它们是平台无关的，可以被转换为 CSS、iOS、Android 等任何平台的格式。

核心要点

原始令牌 (Primitive) — 最基础的值，如 `blue-500: #3B82F6`
语义令牌 (Semantic) — 有意义的命名，如 `color-primary: blue-500`
组件令牌 (Component) — 特定组件使用，如 `button-background: color-primary`

令牌层级示例

/* Primitive Tokens */
--blue-500: #3B82F6;
--gray-100: #F3F4F6;

/* Semantic Tokens */
--color-primary: var(--blue-500);
--color-background: var(--gray-100);

/* Component Tokens */
--button-bg: var(--color-primary);
--card-bg: var(--color-background);

使用语义化命名（如 primary、background）而非描述性命名（如 blue、light-gray），这样当品牌颜色改变时，你只需修改一处。

上一课完成并继续