# @blackbaud/skyux-design-tokens 中文文档

规范地址：https://npmcn.com/package/%40blackbaud/skyux-design-tokens/

版本：7\.6\.0
npm 元数据更新时间：2026-11-02T19:59:46.494Z
中文译文更新时间：2026-11-08T05:40:45.832Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.4 MB，36 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>= 4\.2\.1
- 运行依赖：0 个
- 首次发布：2017-06-23T16:25:23.946Z
- 最新版本发布：2026-11-02T19:59:46.359Z
- 近 30 天下载量：51708（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：157（近 12 个月 61 个）

## 中文简介

SKY UX 设计符号

## 安装

```sh
npm install @blackbaud/skyux-design-tokens
```

也可以使用：`pnpm add @blackbaud/skyux-design-tokens`、`yarn add @blackbaud/skyux-design-tokens`、`bun add @blackbaud/skyux-design-tokens`

## README

# skyux 设计托盘

[![npm](https://img.shields.io/npm/v/@blackbaud/skyux-design-tokens.svg)](https://www.npmjs.com/package/@blackbaud/skyux-design-tokens)

这个寄存器包含了用于SKY UX建筑风格的设计符. 信使被存储在'src/deign-tokens.yml'中 此软件包发布后将包含以下文件:

```
|-- scss
|    |-- variables.scss (A sass variable file containing the design tokens)
|    |-- mixins.scss (A file containing convenience mixins)
|-- yaml
|    |-- design-tokens.yaml (The original yaml file containing the SKY UX design tokens)
|-- json
|    |-- design-tokens.json (A JSON representation of the design tokens)
```

要在本地创建这些结果文件, 克隆此寄存器, 运行 `npm install` 接下来 `npm run build`。 。 。 .

## 更新快取测试

如果看到显示测试是"过时"的测试失败,则意味着输出的活字符号已经改变而快照测试失败. 要更新快照, 运行 `vitest run --update` 并审查对快照文件的修改,以确保这些修改都是预期的。 如果你没有 `vitest` 安装、 运行 `npm i -g vitest`。 。 。 .

## 以本地预览测试

查看本地产品 SPA 变化,确保您有 `.env.local` 文件并运行命令 `npm run dev`。本地预览将应用到与该预览相同的域中的所有SPA `VITE_LAUNCH_URL` 定义 `.env.local`当您编辑和保存文件时,预览会刷新.

如果你没有 `.env.local` 档案,联系团队中的人 帮助设置它.

要在本地预览的 SPA 中添加额外的 CSS, 请创建文件 `src/dev/extra-styles.css`。此样式表将添加到 SPA 中,并可用于测试目的覆盖样式。 这是一个普通的 CSS 文件,所以角选择器喜欢 `:ng-deep` 财务报告和审定财务报表 `:host` 而SCSS的筑巢语法不会奏效. `!important` 并将有助于测试.

## 视觉测试

`src/visual-tests` 是一个没有框架的页面,可以演示每个公共类别和自定义的自建属性 `bundles/public-api-styles.json` 财务报告和审定财务报表 `bundles/public-api-tokens.json`,由已建成的CSS所命名. 它用于视觉回归快照.

运行 `npm run visual-tests` 用于构建软件包并服务页面,或 `npm run build:visual-tests` 作为静态文件在 `dist-visual-tests/`。 。 。 .

查询参数选择要渲染的内容 :

| 参数 | 数值 | 默认 |
| --- | --- | --- |
| `page` | `borders`, (中文(简体) ), `colors`, (中文(简体) ), `elevation`, (中文(简体) ), `spacing`, (中文(简体) ), `typography` | 所有页面 |
| `theme` | `default`, (中文(简体) ), `modern` | `default` |
| `mode` | `light`, (中文(简体) ), `dark` | `light` |
| `brand` | `base`, (中文(简体) ), `blackbaud` | `base` |
| `spacing` | `standard`, (中文(简体) ), `compact` | `standard` |

`mode`, (中文(简体) ), `brand`,以及 `spacing` 仅适用于现代主题。 譬如说, `?page=colors&theme=modern&mode=dark&brand=blackbaud`。 。 。 .

一旦页面打开, `body` 获得一个 `data-ready` 属性,因此可以等待快照工具 `body[data-ready]`。 。 。 .

### 珀西的快照

运行 `npm run test:visual-tests` 并使用 Playwright 来获取 [珀西 佩尔](https://percy.io/) 每一主题的每一页的简介:

-   `default`
-   `modern` 内 `light` 财务报告和审定财务报表 `dark` 模式,与 `base` 财务报告和审定财务报表 `blackbaud` 品牌

`compact` 间距没有被快照, 因为还没有任何符号随它而改变 .

没有 `PERCY_TOKEN` 环境变量, Percy 被跳过 测试只检查每个页面。 设定 `PERCY_TOKEN` 将快照发给Percy.

这个 `Visual tests` GitHub 工作流程运行于每个拉动请求和推到 `master` 并释放分枝。 推力创建了比对拉动请求的基线. 从叉子上取出请求 无法进入信使,所以他们没有珀西.

## 常见问题

### @blackbaud/skyux-design-tokens 是什么？

SKY UX 设计符号

### 如何安装 @blackbaud/skyux-design-tokens？

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

### @blackbaud/skyux-design-tokens 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/blackbaud\_\_skyux-design-tokens 是否存在。

### @blackbaud/skyux-design-tokens 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @blackbaud/skyux-design-tokens 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 4\.2\.1。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @blackbaud/skyux-design-tokens 可以商用吗？

@blackbaud/skyux-design-tokens 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blackbaud/skyux-design-tokens 的下载量有多少？

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

### @blackbaud/skyux-design-tokens 还在维护吗？

最新版本 7\.6\.0 发布于 2026/11/03（5 天前）；至今共发布 157 个版本，其中过去 12 个月发布了 61 个；首次发布于 2017/06/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。