@ digdir/ design- system- tokens (英语)

从 Digdir Common Design System 变形设计符号到代码工作.

安装

npm|yarn|pnpm install @digdir/design-system-tokens

使用量

这个软件包为我们每个支持的品牌提供了标志.

目前得到支持的品牌:

• altinn
• digdir
• tilsynet
• brreg

当导入包时, 确保指定您要导入的品牌符号 。 默认情况下 digdir 如果不指定品牌,则导入.

import '@digdir/design-system-tokens/brand/<brand>/tokens';

// This imports Digdir brand css tokens
import '@digdir/design-system-tokens';

//  This imports Altinn css tokens
import '@digdir/design-system-tokens/brand/altinn/tokens.css';

文件格式

所有标志文件都有同名名称, tokens,用文件扩展名分隔,以获取所希望的格式.

目前支持的符号格式是 css。 。 。 .

支助科

当导入 css 符号时, 一组 css 变量 将添加到您的 :root {}。 。 。 . 您只需要在您的应用程序中导入一次, 最好是在您“ root” html 的某个地方 .

所有变量前缀为 fds 以不使你的命名空间.

import '@digdir/design-system-tokens/brand/altinn/tokens.css';

div {
  padding: var(--fds-spacing-1);
}