@ digdir/ 设计系统

CLI 和用于设计系统的工具

使用 --help 用于可用命令和选项

读取设计系统 读取 要开始.

使用量

使用 npx @digdir/designsystemet 以 Designsystemet 为基础创建 CSS 供使用 配置文件。它也可以创建类型声明和设计符号.

这使得您可以定义主题,包括自定义的颜色,字体家庭,以及边框辐射等. 我们建议使用 设计系统主题构建器 用于生成有效的配置.

⚠️ 被否决 ⚠️
这个 tokens create 财务报告和审定财务报表 tokens build 命令被贬低,并将在未来释放中被删除. 使用 designsystemet 带有配置文件.

更新令牌和 CSS

当发布新版本的 CLI 时, 或您已经做了更改, 重新运行 npx @digdir/designsystemet。 。 。 . 设定 cleanDir: true 在创建新目录之前删除其目录中的文件,从而删除已贬值或不需要的文件。 没错 false 默认。 由( ) 创建的已清理目录内的目录tokensDir)),或属于输出 cleanDir: false,保留。 在删除任何内容之前,如果目录会清理包含配置文件,是其中之一,是同义链接,或者在通往其中一个或另一个输出的路上有同义链接,则CLI会以出错而停止. 共通链接被删除,从未被跟踪.

⚠️ 警告 ⚠️
本工具创建的设计符号被视为执行细节,是主题 随时改变,而不被视为突破性的改变。 使您的自定义通过 在那里,你可以配置。 您可以直接编辑设计符号, 以改变配置中没有的内容 支持,请参见 与 Tokens 工作室同步设计托肯斯, (中文(简体) ), 但您要冒着风险这样做:您的编辑可能需要被重编或者在升级时进行调整.

该工具所创建的CSS文件被视作构建文物. 他们应该 没有 为: 直接编辑。 虽然CSS不会出乎意料地改变,但任何变量都可能会被添加 时间.

因此,在更新库时,必须经常重新运行此命令. 创建设计符再次取代任何直接编辑符,并再次创建 CSS 替换任何直接编辑.

使用配置文件

CLI会自动发现 a designsystemet.config.json 或者说 designsystemet.config.jsonc 当前目录中的文件。 你也可以使用这个 --config <path> 选项,以提供不同的配置名称和位置.

两者 .json 财务报告和审定财务报表 .jsonc 文件可能包含注释和后缀逗号(JSONC).

要启动,请使用此模板作为 designsystemet.config.json 文件 :

{
  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
}

在支持JSON Schema的编辑中 $schema 然后会给您的编辑器提示文件的结构.

最小配置示例

{
  "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
  "themes": {
    "theme": {
      "colors": {
        "accent": "#1E98F5",
        "neutral": "#1E2B3C",
      },
      "borderRadius": 4
    }
  }
}

要生成 CSS, 您可以运行 :

npx @digdir/designsystemet

创建 CSS 在 designsystemet,相对于配置文件,直接来自主题。 添加 "types" 改为 output 还创建类型声明,以及 "design-tokens" 同时保存设计符号.

产出

使用 output 选择创建的内容和地点。 每个项目都是一种输出类型("design-tokens", (中文(简体) ), "css" 或者说 "types"使用默认设置,或对象:

{
  "output": [
    // defaults: dir "designsystemet/design-tokens", cleanDir false
    { "type": "design-tokens", "dir": "../path/to/design-tokens" },
    // defaults: dir "designsystemet", tokensDir from the design-tokens output, cleanDir false, tailwind false
    { "type": "css", "dir": "../path/to/css", "tokensDir": "../path/to/design-tokens" },
    // defaults: dir "designsystemet", tokensDir from the design-tokens output, cleanDir false
    { "type": "types", "dir": "../path/to/types", "tokensDir": "../path/to/design-tokens" },
  ],
}

设计符号总是先被创建,再被CSS创建,再被打入类型. 若为 tokensDir 未设置, CSS 和类型由 dir 会 议 日 程 和 议 程 design-tokens 输出.

这个 types 输出写入 types.d.ts (和被堕落者) colors.d.ts),增加 @digdir/designsystemet-types 带有主题的颜色名称.

没有 design-tokens 输出或 tokensDir, CSS和类型直接由主题创建,不写任何设计符号. 默认, "output": ["css"],只创建 CSS 这样.

themes 需要的只是根据主题产生的产出。 要从现有设计符号中构建 CSS 和类型, 请省去 themes 设置 tokensDir数字 :

{
  "output": [
    { "type": "css", "tokensDir": "./design-tokens" },
    { "type": "types", "tokensDir": "./design-tokens" },
  ],
}

设定 tailwind 编辑 css 输出到 "v4" 或者说 "v3" 同时创建 <theme>.tailwind.css 尾风版本。 默认false) 没有创建 Tailwind 文件 .

这个 outDir 财务报告和审定财务报表 clean 字段为 output。 CLI 将自动迁移您的配置文件 .

复杂配置示例

看看这个 *.config.json 下方的文件 packages/cli 在 Github repo 中,用于更复杂的示例.

从已存在的令牌创建配置

您可以获得一个最小的配置文件, 意思是没有覆盖, 使用以下命令从现有的设计符中生成 :

npx @digdir/designsystemet generate-config-from-tokens --dir <path to design tokens> --out <path to config file>

--out 默认为 designsystemet.config.json。生成的配置用途 output,与配置文件相对的被写入设计符目录。 CSS 和类型保存于 design-tokens-build 在目录中,命令从何处运行 tokens build 救了他们.