chromatic

Chromatic 是一款通过从描述设计令牌的源文件生成平台特定文件来管理设计系统的工具。其 README 将其描述为一种使用设计令牌的跨平台设计系统构建系统。 令牌文件可以使用自然语法包含丰富的表达式。示例包括算术运算（如 18pt + 5px）、单位（如 12px）、函数（如 rgb()、mix() 和 saturate()）以及对其他令牌的引用。例如，名为 primary-hue 的令牌可设置为 210deg，primary 可定义为 hsl({primary-hue}, 100%, 40%)，而 primary-dark 则可以通过 darken 转换引用 primary。这使得令牌定义在保持简洁的同时，仍能表达数值之间的关系。 Chromatic 支持主题。每个令牌都可以有主题变体，例如深色和浅色，或紧凑和舒适的布局。必要的输出产物会自动生成。例如，cta-button-background 令牌可以为深色和浅色主题定义不同的值。主题支持还体现在导入功能中：深色主题文件可以被导入到基础令牌文件中，从而使生成的输出包含默认值和主题值。 该工具旨在实现零配置。只需一个简单的 YAML 或 JSON 令牌文件即可开始使用。在需要时，Chromatic 同样可定制：用户可以编写或修改输出文件的格式以满足其需求。此外，它还提供可从构建系统调用的 API。 Chromatic 是多平台的。它可以从单个令牌文件为 Web 生成 Sass 和 CSS 产物，为 iOS 生成 JSON 和 plist 格式产物，以及为 Android 生成 XML 产物。它还可以生成 HTML 格式的样式指南。 README 中的入门指南涵盖了通过 npm install -g @arnog/chromatic 全局安装包，使用 chromatic example ./test 创建示例目录，以及运行 chromatic ./test -o tokens.scss 或 chromatic ./test -o tokens.html。用户也可以编写自己的令牌文件。包含 background 和 body-color 值的 tokens.yaml 文件可以通过 chromatic tokens.yaml -o tokens.scss 转换为带有默认标志的 Sass 变量。深色主题文件可以设置 theme: dark 以及 background 和 body-color 等令牌，然后导入到主令牌文件中。生成的 CSS 输出包含根级自定义属性以及带有 data-theme='dark' 自定义属性的深色主题选择器。