CSS `Design System` `Token Pipeline` `Schema Validation` 与版本管理

各位观众老爷，晚上好！我是今晚的主讲人，大家可以叫我老码。今晚咱们不聊风花雪月，就来聊聊CSS设计系统背后的那些技术活儿，特别是那条至关重要的“Token Pipeline”，以及如何用“Schema Validation”来保证它的质量，最后再聊聊版本管理。放心，全程高能，绝对让你不虚此行！

一、设计系统：不止是UI组件库

首先，咱们得明确一个概念：设计系统可不是简单的UI组件库！它是一个更庞大的概念，涵盖了设计原则、视觉规范、组件、模式以及文档。它旨在为整个组织提供一致的设计和开发语言，提高效率，降低维护成本。

简单来说，设计系统就是一套“军规”，确保大家在做UI的时候，用的都是同一套标准，避免出现“你用红色，我用粉红，他用姨妈红”的混乱局面。

二、Token：设计系统的DNA

Token，也就是设计令牌，是设计系统中最核心的概念之一。你可以把它理解为设计系统的“DNA”，它定义了设计系统中所有可复用的值，比如颜色、字体、间距、阴影等等。

Token的好处在于，它将设计决策与代码分离，使得设计师可以独立修改设计，而无需修改代码。同时，开发者也可以通过修改Token来快速调整整个系统的外观。

举个例子，假设我们定义了一个名为--primary-color的Token，它的值为#007bff（蓝色）。那么，我们就可以在CSS中使用这个Token来定义按钮的颜色：

.button {
  background-color: var(--primary-color);
  color: white;
}

如果设计师觉得这个蓝色不够亮眼，想要换成#29ABE2（浅蓝色），只需要修改--primary-color的值即可，所有使用这个Token的按钮都会自动更新。

三、Token Pipeline：令牌的生命周期

Token Pipeline，也就是令牌管道，是设计系统中最关键的流程之一。它定义了Token从创建到最终应用的整个生命周期。一个典型的Token Pipeline可能包含以下步骤：

定义Token: 设计师使用设计工具（如Figma、Sketch）定义Token。
导出Token: 将设计工具中的Token导出为某种格式的文件（如JSON、YAML）。
转换Token: 将Token转换为适合不同平台和框架的格式（如CSS variables、JavaScript constants）。
验证Token: 使用Schema Validation来验证Token的格式和值是否符合规范。
发布Token: 将Token发布到代码仓库或CDN，供开发者使用。
消费Token: 开发者在代码中使用Token来定义UI组件的样式和行为。

下面，我们重点来聊聊Token Pipeline中的两个关键环节：转换Token和验证Token。

3.1 转换Token：让Token适应不同环境

不同的平台和框架对Token的格式要求不同。比如，在CSS中，我们需要使用CSS variables来定义Token；在JavaScript中，我们需要使用JavaScript constants来定义Token。因此，我们需要一个工具来将Token转换为适合不同环境的格式。

目前有很多工具可以用来转换Token，比如Style Dictionary、Theo、Token Transformer等等。这些工具都提供了强大的转换功能，可以根据不同的配置将Token转换为各种格式。

这里我们以Style Dictionary为例，演示如何将一个JSON格式的Token文件转换为CSS variables：

首先，我们需要安装Style Dictionary：

npm install style-dictionary --save-dev

然后，我们需要创建一个config.js文件，用于配置Style Dictionary：

module.exports = {
  "source": ["tokens/*.json"], // Token文件所在的目录
  "platforms": {
    "css": {
      "transformGroup": "css", // 使用CSS transform group
      "buildPath": "dist/", // 输出目录
      "files": [{
        "destination": "variables.css", // 输出文件名
        "format": "css/variables", // 输出格式
        "options": {
          "selector": ":root" // CSS变量的作用域
        }
      }]
    }
  }
};

最后，我们需要运行Style Dictionary来生成CSS variables：

style-dictionary build

这样，我们就可以在dist/variables.css文件中找到生成的CSS variables：

:root {
  --color-primary: #007bff;
  --font-size-base: 16px;
  --spacing-small: 8px;
}

3.2 验证Token：确保Token的质量

Token的质量直接影响到整个设计系统的质量。如果Token的格式不正确，或者Token的值不符合规范，就会导致UI组件的样式错误，或者整个系统出现不一致的问题。因此，我们需要一个工具来验证Token的格式和值是否符合规范。

这就是Schema Validation的用武之地。Schema Validation是指使用一个预定义的Schema来验证数据是否符合规范。Schema定义了数据的结构、类型、取值范围等等。通过Schema Validation，我们可以确保Token的格式和值是正确的。

这里我们以JSON Schema为例，演示如何使用JSON Schema来验证一个JSON格式的Token文件：

首先，我们需要定义一个JSON Schema：

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Design Token Schema",
  "description": "A schema for validating design tokens",
  "type": "object",
  "properties": {
    "color": {
      "type": "object",
      "properties": {
        "primary": {
          "type": "string",
          "pattern": "^#([0-9a-fA-F]{3}){1,2}$", // 验证颜色值是否为HEX格式
          "description": "The primary color of the design system"
        },
        "secondary": {
          "type": "string",
          "pattern": "^#([0-9a-fA-F]{3}){1,2}$",
          "description": "The secondary color of the design system"
        }
      },
      "required": ["primary", "secondary"]
    },
    "font": {
      "type": "object",
      "properties": {
        "size": {
          "type": "object",
          "properties": {
            "base": {
              "type": "integer",
              "minimum": 10, // 验证字体大小是否大于等于10
              "maximum": 24, // 验证字体大小是否小于等于24
              "description": "The base font size of the design system"
            }
          },
          "required": ["base"]
        }
      },
      "required": ["size"]
    },
    "spacing": {
      "type": "object",
      "properties": {
        "small": {
          "type": "integer",
          "minimum": 4, // 验证间距是否大于等于4
          "maximum": 16, // 验证间距是否小于等于16
          "description": "The small spacing of the design system"
        }
      },
      "required": ["small"]
    }
  },
  "required": ["color", "font", "spacing"]
}

然后，我们可以使用一个JSON Schema Validator来验证Token文件：

const Ajv = require('ajv');
const ajv = new Ajv();
const schema = require('./schema.json'); // 引入JSON Schema
const data = require('./tokens.json'); // 引入Token文件

const validate = ajv.compile(schema);
const valid = validate(data);

if (!valid) {
  console.error(validate.errors); // 输出错误信息
} else {
  console.log('Token file is valid!');
}

如果Token文件不符合Schema的规范，Validator会输出错误信息，帮助我们快速找到问题所在。

四、版本管理：Token的进化史

设计系统不是一成不变的，它会随着业务的发展而不断演进。因此，我们需要对Token进行版本管理，以便追踪Token的变更历史，并且能够回滚到之前的版本。

版本管理可以使用Git等版本控制系统来实现。我们可以将Token文件存储在Git仓库中，每次修改Token时都创建一个新的Commit。

除了使用Git进行版本管理，我们还可以使用一些专门的设计系统版本管理工具，比如Abstract、Zeroheight等等。这些工具提供了更强大的版本管理功能，比如可以对Token进行Diff比较，可以对Token进行标注等等。

五、实战案例：一个完整的Token Pipeline示例

为了更好地理解Token Pipeline，我们来演示一个完整的Token Pipeline示例：

定义Token: 使用Figma定义Token，并导出为JSON格式的文件tokens.json：

{
  "color": {
    "primary": "#007bff",
    "secondary": "#6c757d"
  },
  "font": {
    "size": {
      "base": 16
    }
  },
  "spacing": {
    "small": 8
  }
}

验证Token: 使用JSON Schema Validator验证tokens.json文件：

const Ajv = require('ajv');
const ajv = new Ajv();
const schema = require('./schema.json');
const data = require('./tokens.json');

const validate = ajv.compile(schema);
const valid = validate(data);

if (!valid) {
  console.error(validate.errors);
  throw new Error('Token file is invalid!');
} else {
  console.log('Token file is valid!');
}

schema.json:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Design Token Schema",
  "description": "A schema for validating design tokens",
  "type": "object",
  "properties": {
    "color": {
      "type": "object",
      "properties": {
        "primary": {
          "type": "string",
          "pattern": "^#([0-9a-fA-F]{3}){1,2}$",
          "description": "The primary color of the design system"
        },
        "secondary": {
          "type": "string",
          "pattern": "^#([0-9a-fA-F]{3}){1,2}$",
          "description": "The secondary color of the design system"
        }
      },
      "required": ["primary", "secondary"]
    }
  },
  "required": ["color"]
}

转换Token: 使用Style Dictionary将tokens.json文件转换为CSS variables：

const StyleDictionary = require('style-dictionary').extend({
  source: ['tokens.json'],
  platforms: {
    'web/css': {
      transformGroup: 'css',
      buildPath: 'dist/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables'
      }]
    }
  }
});

StyleDictionary.buildAllPlatforms();

发布Token: 将生成的variables.css文件发布到CDN，供开发者使用。

消费Token: 开发者在CSS中使用CSS variables来定义UI组件的样式：

.button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-small);
  font-size: var(--font-size-base);
}

六、总结与展望

Token Pipeline是CSS设计系统中至关重要的环节，它确保了Token的质量和一致性。通过Schema Validation，我们可以有效地防止Token出现错误。通过版本管理，我们可以追踪Token的变更历史，并且能够回滚到之前的版本。

随着设计系统的不断发展，Token Pipeline也会变得越来越复杂。未来，我们可以期待更多的自动化工具和更强大的版本管理功能，来帮助我们更好地管理Token。

七、一些小建议

拥抱自动化: 尽量使用自动化工具来完成Token Pipeline的各个环节，减少人工干预，提高效率。
重视Schema Validation: Schema Validation是保证Token质量的关键，一定要认真定义Schema，并且定期更新。
选择合适的版本管理工具: 根据项目的实际需求选择合适的版本管理工具，确保能够有效地追踪Token的变更历史。
与设计师紧密合作: 设计师和开发者应该紧密合作，共同维护Token，确保设计和代码的一致性。

好了，今天的讲座就到这里。希望大家能够有所收获。如果大家有什么问题，欢迎提问！感谢各位的耐心聆听，祝大家编程愉快！

发表回复 取消回复

发表回复取消回复