Style Dictionary Utilities 使用指南

Style Dictionary Utilities 使用指南

style-dictionary-utilsUtilities to use in your style dictionary config项目地址:https://gitcode.com/gh_mirrors/st/style-dictionary-utils

项目介绍

Style Dictionary Utilities 是一个专为 Style Dictionary 设计的扩展包，旨在通过一系列转换、格式化工具和过滤器增强设计令牌的处理能力。这个npm包提供了多种实用功能，帮助开发者在他们的配置文件中更灵活地变换、筛选设计系统的元素，确保设计语言的一致性和高效管理。支持typescript环境，并涵盖了从颜色到过渡等多种设计属性的过滤和处理。

项目快速启动

安装

首先，你需要安装 style-dictionary-utils。如果你还没有安装 Style Dictionary，也需一并安装它。

npm install --save style-dictionary style-dictionary-utils

配置与启动

接着，在你的项目中创建或修改 style-dictionary.config.js 文件来集成此工具。以下是一个简单的配置示例，展示了如何仅允许尺寸类型的设计令牌：

module.exports = {
  "source": ["tokens.json"],
  "platforms": {
    "ts": {
      "transformGroup": "ts",
      "files": [{
        "destination": "theme.css",
        "format": "css/variables",
        "filter": "isDimension"
      }]
    }
  },
};

然后执行 Style Dictionary 命令来编译你的设计令牌：

npx style-dictionary build

这将根据你的配置生成相应的CSS变量文件，其中只包含维度类型的令牌。

应用案例和最佳实践

在实际开发中，利用 style-dictionary-utils 的强大过滤功能可以实现高度定制化的编译过程。例如，如果你想为UI组件库单独生成一份包含所有颜色和渐变的样式表，你可以这样配置：

module.exports = {
  ...
  "platforms": {
    "ui-components": {
      "transformGroup": "ts",
      "files": [{
        "destination": "colors-and-gradients.css",
        "format": "css/variables",
        "filter": "isColorOrGradient"
      }]
    }
  },
  ...
};

这种做法保证了生成的CSS是精确且高效的，只包含组件所需的设计令牌。

典型生态项目

虽然直接关联的“典型生态项目”信息未直接提供，但在实际应用中，style-dictionary-utils 可以被广泛应用于任何使用Style Dictionary构建设计系统的企业级项目中。比如结合React、Vue等前端框架构建的大型应用，或是设计系统如Material-UI这样的项目，它们都可以从这些工具集中受益，通过这套机制更好地管理和标准化视觉元素和主题。

Style Dictionary Utilities 作为设计系统工作流中的一个重要环节，能够与前端框架、构建工具（如Webpack）以及CI/CD流程紧密结合，促进团队间的设计语言一致性和工作效率的提升。

---

以上就是关于 style-dictionary-utils 的基本使用指南，希望对你在构建可维护和扩展的设计系统过程中有所帮助。

style-dictionary-utilsUtilities to use in your style dictionary config项目地址:https://gitcode.com/gh_mirrors/st/style-dictionary-utils