@ coveord/ plasma- tokens (英语)

等离子体设计系统的设计标志.

设计标志是什么?

简而言之,一个设计符号就是存储的设计决定. 它可以被理解为一个持有一个选择结果的变量(在此情况下是用菲格玛来做的). 可以决定多个不同的主题,例如颜色,打字,间隔等. 因此,重要的是要考虑到设计标志的种类与设计主题相同.

本一揽子计划的目标

通过代码向依赖等离子体设计系统的所有科维奥产品分配设计标志.

安装

npm install @coveord/plasma-tokens

对于TypeScript用户:包提供了自己的类型声明.

使用量

工具包是通过多种产出提供的。 选择最适合您需要的格式 .

类型脚本

import * as PlasmaTokens from '@coveord/plasma-tokens';

PlasmaTokens.color.primary.actionBlue[6]; // '#1372ec'

萨斯

@import '~@coveord/plasma-tokens/scss';
// or individual libraries
@import '~@coveord/plasma-tokens/scss/Colors';

.something {
    background-color: $plasma-color-primary-action-blue-6;
}

支助科

首先在页面中包含您想要的 Css 文件 .

<link href="/node_modules/@coveord/plasma-tokens/css/Colors.css" rel="stylesheet" />

CSS中的指针被曝光为 CSS 变量。 。 。 .

.something {
    background-color: var(--plasma-color-primary-action-blue-6);
}

图标

所有图标都位于 icons 文件夹在 .svg 格式.

如果您要在 React 应用程序中使用图标,请参考 @coveord/plasma-react-icons。 。 。 .

可用的符号库