# @baukit/ui-tokens 中文文档

规范地址：https://npmcn.com/package/%40baukit/ui-tokens/

版本：0\.18\.3
npm 元数据更新时间：2026-11-07T02:36:07.745Z
中文译文更新时间：2026-11-07T18:29:07.006Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：164 kB，52 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.0\.0
- 运行依赖：0 个
- peer 依赖：eslint ^10\.11\.0
- 首次发布：2026-08-25T18:46:14.266Z
- 最新版本发布：2026-11-07T02:36:07.402Z
- 近 30 天下载量：8693（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：67（近 12 个月 67 个）

## 中文简介

无依赖性设计-toke schema,校验器,无障碍检查器,以及网络和React Industrial的决定性编译器.

## 安装

```sh
npm install @baukit/ui-tokens
```

也可以使用：`pnpm add @baukit/ui-tokens`、`yarn add @baukit/ui-tokens`、`bun add @baukit/ui-tokens`

## README

# `@baukit/ui-tokens`

一个无依赖性的设计脚本计划,验证器,可访问性检查器,以及网络和React Industrial的决定性编译器.

## 定义和验证符号

```ts
import { checkContrast, parseTokens, type DesignTokens } from '@baukit/ui-tokens';

const tokens = parseTokens(untrustedJson);
const violations = checkContrast(tokens);
```

颜色不透明 `#RGB` 或者说 `#RRGGBB` 有光和暗变体的 sRGB 值. 彩叶需要至少一个语义组和名称. 类型、空间、半径、运动和高地均被命名为尺度. `contrastPairs` 声明前景/背景语义路径; 普通文本必须达到 4. 5:1并标出条目 `largeText` 这两个主题必须达到3:1。 校验错误包括路径, 例如 `$.color.text.primary.light`,而对比失败包括计算出的比例.

校验是手写而非Zod基:schema是小的,这使得生产依赖性保持在了零,它使得诊断能够适应语义符号路径.

## 用颜色工作

颜色帮助者接受三到六位数的 SRGB 颜色,带有 选项 `#`。 规范化和计算出的颜色使用小写 `#rrggbb` 形式.

```ts
import {
  blendColors,
  chooseReadableForeground,
  hexToRgb,
  normalizeHexColor,
  rgbToHex,
} from '@baukit/ui-tokens';

normalizeHexColor('09C'); // '#0099cc'
hexToRgb('#0099cc'); // { r: 0, g: 153, b: 204 }
rgbToHex({ r: 0, g: 153, b: 204 }); // '#0099cc'
blendColors('#ffffff', '#000000', 0.25); // '#404040'

const foreground = chooseReadableForeground('#005fcc', ['#ffffff', '#111111'], 4.5);
// { foreground: '#ffffff', ratio: 5.98..., meetsThreshold: true }
```

`blendColors` 夹住其比值 `[0, 1]`。 。 。 . `chooseReadableForeground` 返回时 第一个符合门槛的候选人。 如果没有人通过,它返回 比例最高的候选人 `meetsThreshold` 改为 `false`。 。 。 .

## 检查语义对比矩阵

`DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS` 定义这些角色路径 :

-   `color.background.primary` 财务报告和审定财务报表 `color.background.elevated`
-   `color.text.primary` 财务报告和审定财务报表 `color.text.muted`
-   `color.border.primary` 财务报告和审定财务报表 `color.focus.ring`
-   `color.action.primary`, (中文(简体) ), `color.action.onPrimary`, (中文(简体) ), `color.action.secondary`,以及 `color.action.onSecondary`
-   `color.status.success`, (中文(简体) ), `color.status.warning`, (中文(简体) ), `color.status.danger`,以及他们的 `onSuccess`, (中文(简体) ), `onWarning`,以及 `onDanger` 前景

文字和有标签的展望需要4.5:1. 边界和焦点圈需要 3:1 两个背景角色. 检查器测试每条要求 光和暗的变体并返回每一个失败.

```ts
import {
  checkSemanticContrastMatrix,
  DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS,
} from '@baukit/ui-tokens';

const failures = checkSemanticContrastMatrix(tokens, [
  ...DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS,
  {
    foregroundRole: 'color.chart.label',
    backgroundRole: 'color.chart.background',
    minimumRatio: 4.5,
  },
]);
```

通过不同的列表来替换默认值 。 缺少的角色或最小值 在可能为1至21的WCAG范围外抛出一个描述性错误.

## 计算垂直布局

产品提供每个维度和门槛。 两个函数都否定 或非无限值.

```ts
import { getUsableContentHeight, isShortViewport } from '@baukit/ui-tokens';

getUsableContentHeight(720, 112, 128); // 480
isShortViewport(600, productLayout.shortViewportHeight); // true
```

## 编译

```ts
import { toCssVariables, toReactNative } from '@baukit/ui-tokens';

const css = toCssVariables(tokens);
const nativeModule = toReactNative(tokens);
```

`toCssVariables` 输出已排序 `--bk-*` 报表 `:root`,然后在 `[data-theme="dark"]`。 。 。 . `toReactNative` 发出一个排序的巢穴 `tokens` 常数与推断 `Tokens` 类型。 无障碍声明是构建元数据,在生成的运行时常数中被省略.

## 执行符号 `no-raw-color`

设计纸盒的图案只有在颜色远离组件时才值得使用. `@baukit/ui-tokens/eslint` 报告 CSS 的 ESLint 平面配置插件 直接用应用程序代码书写的颜色 .

```js
import uiTokens from '@baukit/ui-tokens/eslint';

export default [
  {
    plugins: { '@baukit/ui-tokens': uiTokens },
    rules: {
      '@baukit/ui-tokens/no-raw-color': [
        'error',
        { allowedFiles: ['src/theme/tokens.ts', 'src/theme/**'] },
      ],
    },
  },
];
```

`configs.recommended` 当产品需要不时, 以默认方式打开规则 选项:

```js
import { configs } from '@baukit/ui-tokens/eslint';

export default [configs.recommended];
```

规则报告 `#rgb`, (中文(简体) ), `#rrggbb`,以及 `#rrggbbaa` 十六进制值加 `rgb()`, (中文(简体) ), `rgba()`, (中文(简体) ), `hsl()`,以及 `hsla()` 任何出现的地方,在字符串和 模板文字相同。 CSS 等颜色关键词 `crimson` 只报告 样式类似位置: 颜色命名属性, a `StyleSheet.create` 电话,a `style`, (中文(简体) ), `color`,或 `fill` JSX属性,a `css` 标记模板,或 名称结束于 `style`, (中文(简体) ), `theme`, (中文(简体) ), `palette`,或 `colors`该 限制会保留路由名称,测试id,以及普通的发音去掉报告.

选项 :

| 选项 | 默认 | 含义 |
| --- | --- | --- |
| `allowedFiles` | `[]` | 类似光滑的路径, 可以声明生色 . `*` 在路径段内匹配, `**` 横跨各段。 把标志性定义放在这里. |
| `allowedValues` | `transparent`, (中文(简体) ), `currentColor`, (中文(简体) ), `inherit`, (中文(简体) ), `none` | 文学作品随处可见 条目添加默认值 . |
| `additionalStyleProperties` | `[]` | 额外的属性或属性名称被视为风格相近. |
| `reportKeywords` | `true` | 设定为 `false` 仅报告十六进制和功能标记. |

## 边界

此软件包共享语义值, 如 `color.background.primary`这是故意的,不是 设计系统而不是跨平台组件库:DOM和React Industrial组件, 互动行为,原始品牌-palette决定, 和产品主题都留在它之外.

`exampleTokens` 证明每个团体都是测试对象 这不是Baukit视觉语言,和 把它复制到一个产品中作为起动调色板并不是它的目的.

生产入口没有运行时间依赖. `eslint` 是一个可选的对等依赖 仅通过 `/eslint` 子路径, 因此导入包永远不会加载它 .

## 常见问题

### @baukit/ui-tokens 是什么？

无依赖性设计-toke schema,校验器,无障碍检查器,以及网络和React Industrial的决定性编译器\.

### 如何安装 @baukit/ui-tokens？

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

### @baukit/ui-tokens 支持 TypeScript 吗？

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

### @baukit/ui-tokens 支持 ESM 还是 CommonJS？

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

### @baukit/ui-tokens 需要什么版本的 Node\.js？

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

### @baukit/ui-tokens 可以商用吗？

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

### @baukit/ui-tokens 的下载量有多少？

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

### @baukit/ui-tokens 还在维护吗？

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