# @entur/tokens 中文文档

规范地址：https://npmcn.com/package/%40entur/tokens/

版本：4\.3\.1
npm 元数据更新时间：2026-11-02T14:45:05.542Z
中文译文更新时间：2026-11-13T18:40:05.490Z
软件包许可：EUPL-1\.2

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40entur/tokens
原文对照：https://npmcn.com/package/%40entur/tokens/?lang=original
项目主页：https://github.com/entur/design-system#readme
源码仓库：https://github.com/entur/design-system

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：835 kB，37 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2019-09-25T12:01:57.870Z
- 最新版本发布：2026-11-02T14:45:05.317Z
- 近 30 天下载量：37240（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：110（近 12 个月 23 个）

## 中文简介

这个包包含了整个设计系统所使用的所有设计符号和设计变量. 我们目前正在向基于\[图 的新设计变量系统迁移(图)[https://help.figma.com/hc/en-us/articles/1533965713538 (中文(简体) )](https://help.figma.com/hc/en-us/articles/1533965713538)

## 安装

```sh
npm install @entur/tokens
```

也可以使用：`pnpm add @entur/tokens`、`yarn add @entur/tokens`、`bun add @entur/tokens`

## README

# Entur Linje 设计符号

这个包包含了整个设计系统所使用的所有设计符号和设计变量. 我们目前正在向一个新的设计可变系统过渡 [图图变量](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma)。 。 。 .

由于并非所有的值都作为变量提供,并为了避免断开更改,之前的所有设计符号都会被暂时保留. 这些是建筑从 `src/legacy-tokens.ts` 文档.

> 寻找 [文档](https://linje.entur.no/tokens)? 吗?

## 安装

```sh
npm install @entur/tokens
# or if you are using Yarn:
yarn add @entur/tokens
```

## 使用量

请参看 [文档](https://linje.entur.no/tokens) 用于深入使用信息.

此套件主要有几种出口:

-   a CSS 文件, 包含所有代号, 作为 kebab 的 CSS 属性
-   a SCSS 文件,所有符号为kebab cased SCSS变量
-   a LESS 文件, 以所有符号作为 kebab 大小写 LESS 变量
-   a JavaScript 文件,所有符号作为嵌入对象.

### 支助科

要使用 CSS 文件, 请像这样导入到您的捆绑中 :

```js
import '@entur/tokens/dist/styles.css';
```

然后您就可以访问所有作为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

```less
@import '@entur/tokens/dist/styles.less';
```

```scss
@import '@entur/tokens/dist/styles.scss';
```

然后可以像往常一样使用代码中的变量.

```less
// LESS
.custom-box {
  background-color: @colors-greys-grey10;
  color: @colors-brand-coral;
  font-size: @font-sizes-medium;
  margin: @space-medium @space-large;
}
```

```scss
// SCSS
.custom-box {
  background-color: $colors-greys-grey10;
  color: $colors-brand-coral;
  font-size: $font-sizes-medium;
  margin: $space-medium $space-large;
}
```

### Java 脚本

要使用 JavaScript 中的设计符号, 请导入您需要的符号 :

```js
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中可用的一组设计变量:

1.  生成 Figma 变量集的 JSON 导出
2.  更新其中相应的 JSON 文件 `src` 文件夹
3.  构建新变量并指定更改

### 1\. 生成 JSON 导出

JSON 使用 [瓦里亚贝勒2cs-plugin](https://www.figma.com/community/plugin/1261234393153346915),如果还没有下载插件。 转到包含要导出变量的 Figma 文件 . [语义色彩](https://www.figma.com/file/zFFjH3gKGON6vFJZQK5ltr/Tokens-Semantic-colors?type=design&mode=design&t=M9cT0w0kaaxyBHiq-1)。在菜单栏中,选择“puggins”和“可变s2css ” —— 打开一个模式。 在“ 选择您的收藏” 下选择要导出的变量集 。 在“类型”下选择“JSON”,在“颜色”和“单位”下选择“hex”和“rem”。 然后点击"Generate"并复制结果.

### 2\. 更新JSON文件

回到这个repo,找到JSON的可变文件,你想更新, eg. `semantic.json`,删除其内容并粘贴您在步骤 1 中复制的生成结果。 然后保存文件.

### 3\. 构建变量

JSON 文件内容更新后, 请运行脚本 `yarn build` 在此软件包中或 `yarn build:packages` 从根. 这将生成新的文件,其中既包含此软件包中的最新值,也包含已更新组件颜色值的所有其他软件包中的最新值。 一旦建造完成,将做出所有改变并推进承诺.

## 常见问题

### @entur/tokens 是什么？

这个包包含了整个设计系统所使用的所有设计符号和设计变量\. 我们目前正在向基于\[图 的新设计变量系统迁移\(图\)https://help\.figma\.com/hc/en-us/articles/1533965713538 \(中文\(简体\) \)

### 如何安装 @entur/tokens？

在项目目录运行 npm install @entur/tokens，或使用 pnpm add / yarn add / bun add。

### @entur/tokens 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @entur/tokens 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @entur/tokens 可以商用吗？

@entur/tokens 使用 EUPL-1\.2 许可。声明的许可为 EUPL-1\.2，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @entur/tokens 的下载量有多少？

根据 npm 官方下载统计，@entur/tokens 在 2026/10/14 – 2026/11/12 这 30 天内被下载 37,240 次，日均约 1,241 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @entur/tokens 还在维护吗？

最新版本 4\.3\.1 发布于 2026/11/02（11 天前）；至今共发布 110 个版本，其中过去 12 个月发布了 23 个；首次发布于 2019/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。