Entur Linje 设计符号
这个包包含了整个设计系统所使用的所有设计符号和设计变量. 我们目前正在向一个新的设计可变系统过渡 图图变量。 。 。 .
由于并非所有的值都作为变量提供,并为了避免断开更改,之前的所有设计符号都会被暂时保留. 这些是建筑从 src/legacy-tokens.ts 文档.
寻找 文档? 吗?
安装
npm install @entur/tokens
# or if you are using Yarn:
yarn add @entur/tokens
使用量
请参看 文档 用于深入使用信息.
此套件主要有几种出口:
- a CSS 文件, 包含所有代号, 作为 kebab 的 CSS 属性
- a SCSS 文件,所有符号为kebab cased SCSS变量
- a LESS 文件, 以所有符号作为 kebab 大小写 LESS 变量
- a JavaScript 文件,所有符号作为嵌入对象.
支助科
要使用 CSS 文件, 请像这样导入到您的捆绑中 :
import '@entur/tokens/dist/styles.css';
然后您就可以访问所有作为CSS变量的设计符号. 然后可以这样使用它们:
.custom-box {
background-color: var(--colors-greys-grey10);
color: var(--colors-brand-coral);
font-size: var(--font-sizes-medium);
margin: var(--space-medium) var(--space-large);
}
请参看已有的设计系统文件.
小规模/小规模
要使用 LESS 或 SCSS 文件,请导入您的 LESS 或 SCSS 文件 。 方法同: method
@import '@entur/tokens/dist/styles.less';
@import '@entur/tokens/dist/styles.scss';
然后可以像往常一样使用代码中的变量.
// LESS
.custom-box {
background-color: @colors-greys-grey10;
color: @colors-brand-coral;
font-size: @font-sizes-medium;
margin: @space-medium @space-large;
}
// SCSS
.custom-box {
background-color: $colors-greys-grey10;
color: $colors-brand-coral;
font-size: $font-sizes-medium;
margin: $space-medium $space-large;
}
Java 脚本
要使用 JavaScript 中的设计符号, 请导入您需要的符号 :
import { StyleSheet } from 'react-native';
import { colors, breakpoints, fontSizes } from '@entur/tokens';
StyleSheet.create({
example: {
fontSize: fontSizes.medium,
color: colors.brand.coral,
},
});
px 对雷姆
这些值主要以像素提供. 如果您需要Rem中的值,请添加一个 .rem 在符号名后,例如. space.rem.large 对等价值和 space.large 对于像素值.
[供维护者使用] 更新设计变量
需要三个步骤来更新本repo中可用的一组设计变量:
- 生成 Figma 变量集的 JSON 导出
- 更新其中相应的 JSON 文件
src文件夹 - 构建新变量并指定更改
1. 生成 JSON 导出
JSON 使用 瓦里亚贝勒2cs-plugin,如果还没有下载插件。 转到包含要导出变量的 Figma 文件 . 语义色彩。在菜单栏中,选择“puggins”和“可变s2css ” —— 打开一个模式。 在“ 选择您的收藏” 下选择要导出的变量集 。 在“类型”下选择“JSON”,在“颜色”和“单位”下选择“hex”和“rem”。 然后点击"Generate"并复制结果.
2. 更新JSON文件
回到这个repo,找到JSON的可变文件,你想更新, eg. semantic.json,删除其内容并粘贴您在步骤 1 中复制的生成结果。 然后保存文件.
3. 构建变量
JSON 文件内容更新后, 请运行脚本 yarn build 在此软件包中或 yarn build:packages 从根. 这将生成新的文件,其中既包含此软件包中的最新值,也包含已更新组件颜色值的所有其他软件包中的最新值。 一旦建造完成,将做出所有改变并推进承诺.