Design tokens 是一套全局的设计变量，用于存储和管理应用中所有关键的视觉设计决策，例如颜色、字体、间距、边框、阴影、动画等属性。它们通常以简单、机器可读的格式（例如 JSON、YAML 或 CSS 自定义属性）记录，并作为整个项目中的单一设计源泉，从而确保在不同组件、模块乃至多个平台之间实现设计一致性。
---
1. design-tokens.css：定义了所有设计变量
- 颜色系统（主色、辅助色、状态色、中性色、文本色等）
- 间距系统（基于4px的单位，从XS到XXL的预设值）
- 排版系统（字体、字号、粗细、行高、字间距）
- 尺寸与形状（边框圆角、边框样式、阴影）
- 组件尺寸（头像、按钮、输入框的尺寸变量）
- 动画与过渡（持续时间、缓动函数、预设动画）
- 布局（内容宽度、栅格、Z轴层级）
- 聊天相关的特定变量
2. utilities.css：基于设计变量的实用工具类
- 文本颜色与背景色类
- 排版工具类（字号、粗细、行高等）
- 间距工具类（margin、padding的各种方向与尺寸）
- 边框与圆角工具类
- 阴影工具类
- Flexbox布局工具类
- 显示与定位工具类
- 宽度与高度工具类
- 过渡与动画工具类
- 杂项工具类（截断、溢出、空白符处理等）
3. 更新了main.css，按照正确顺序导入设计系统文件
## 主要特点
- **统一性：**
设计令牌为所有 UI 元素定义了共享的视觉语言，不论组件或模块来自哪个开发团队，都能保持一致的样式。
- **可维护性：**
当需要更新设计规范时，只需要在设计令牌文件中统一修改，然后整个项目中的所有引用该令牌的样式都会自动更新，避免了多处硬编码样式的重复修改。
- **跨平台兼容：**
无论是在 Web、移动端或者其他前端平台，设计令牌都可以作为共享的视觉规范，帮助设计师和开发者保持一致的设计标准。
- **增强协作：**
设计师和开发者可以通过设计令牌建立一个共同的“语言”，设计师可以以令牌的方式定义 UI 的视觉元素，而开发者则可以在代码中直接引用这些变量，减少沟通隔阂和转译误差。
---
## 工作原理
1. **定义设计规范：**
设计团队首先确定项目所需的视觉元素，比如主色、辅助色、字体族、字号、边距等。
2. **转化为令牌：**
这些视觉元素转化为一组命名的变量，每个变量就是一个 design token。例如：
- `primary-color: #1e88e5`
- `font-family-base: 'Helvetica Neue', sans-serif`
- `spacing-small: 8px`
3. **集中管理与存储：**
这些令牌通常存放在一个全局文件中（如 JSON、SCSS 文件或 CSS 变量），项目中各个组件都通过引用这个文件来获取相应的视觉样式。
4. **开发中引用：**
开发者在编写 Vue 组件时，通过预处理器（例如 Sass/SCSS）、CSS 变量或者直接使用 JavaScript 模块导入设计令牌。例如，在 Vue 单文件组件的 `<style>` 部分可以这样引用 CSS 自定义属性：
```css
:root {
--primary-color: #1e88e5;
--font-family-base: 'Helvetica Neue', sans-serif;
--spacing-small: 8px;
}
.button {
background-color: var(--primary-color);
font-family: var(--font-family-base);
padding: var(--spacing-small);
}
```
---
## 实战意义
- **一致性：**
当你在 Vue 项目中使用 design tokens，所有组件都从同一组令牌中获取样式值，确保整体视觉语言保持一致，而无需每次都重复定义相同的值。
- **灵活性：**
设计令牌可以根据产品需求进行主题切换（例如，深色模式与浅色模式），只需切换令牌的值，而不用修改组件本身的代码结构。
- **协同工作：**
设计团队和开发团队可以各自独立地工作。设计师更新设计令牌后，通过版本控制和同步机制，开发团队就能自动获取新的视觉设计，而且不需要重新编写大量 CSS 代码。
---
## 总结
设计令牌系统（design tokens system）就是一组全局的、可复用的设计变量，它充当了设计与代码之间的桥梁，帮助你在 Vue 3 项目中实现统一、可维护、灵活且高效的视觉风格。通过集中管理和使用设计令牌，你能够快速响应设计变化，确保产品在跨平台和多组件情况下保持一致的用户体验。