# @chai-ui/tokens 中文文档

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

版本：1\.4\.1
npm 元数据更新时间：2026-10-30T21:30:24.914Z
中文译文更新时间：2026-11-09T09:21:40.835Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：57 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-10-01T20:06:58.282Z
- 最新版本发布：2026-10-30T21:30:24.566Z
- 近 30 天下载量：4256（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 32 个）

## 中文简介

Chai UI设计了活字符号——以CSS变量"TypeScript"所构建的单一真理源"和一款Figma Tokens/Variables-plugin JSON.

## 安装

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

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

## README

[![Chai UI](https://chai-ui.com/chai-wordmark.svg)](https://chai-ui.com/)

[![npm version](https://img.shields.io/npm/v/@chai-ui/tokens?label=npm&color=009747)](https://www.npmjs.com/package/@chai-ui/tokens) [![MIT license](https://img.shields.io/badge/license-MIT-009747)](https://github.com/kazarazat/chai-ui/blob/main/LICENSE) [![CI](https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml) [![Coverage](https://codecov.io/gh/kazarazat/chai-ui/graph/badge.svg)](https://codecov.io/gh/kazarazat/chai-ui) [![Docs](https://img.shields.io/badge/docs-chai--ui.com-009747)](https://chai-ui.com/docs/)

# @ chai- ui/ 纸箱

颜色、空间、半径、类型和运动值的单一真理源 过柴UI. 一个JSON档案,三个消费者出局:

```
src/tokens.json  →  dist/css/tokens.css        (CSS custom properties)
                 →  dist/js/index.js/.d.ts      (typed JS/TS exports)
                 →  dist/figma/tokens.figma.json (Figma token set)
```

## 编辑符号

编辑 `src/tokens.json` 只有这个 DTCG口味格式:每片叶子都是 `{ "$value": ... }`,一个值可以引用另一个符号 `{color.root.green-50}` 看到了吗 `color.semantic.*` 参考实例 `color.root.*`。总是针对 `color.semantic.*` (或添加) 新的语义化名)而不是 `color.root.*` 直接,所以未来 重取主题只触及根调色板。 新的语义作用也需要其 阴暗主题值 `color.dark.*` (见下文); 建造失败无一.

运行 `pnpm build` (从这里,或 `pnpm --filter @chai-ui/tokens build` 从 重新生成根) `dist/`。 。 。 .

## 使用符号

**支助科**

```css
@import "@chai-ui/tokens/css";

.my-thing {
  background: var(--chai-color-semantic-control-surface);
  padding: var(--chai-space-4);
}
```

**联合材料/临时秘书处**

```ts
import { tokens, flatTokens } from "@chai-ui/tokens";

tokens.color.semantic.accent; // "#009747"
flatTokens["color.semantic.accent"]; // same value, flat lookup
```

**图片**

`dist/figma/tokens.figma.json` 形状为 [图格玛的托肯斯工作室](https://tokens.studio/) 插件 (导入 ~ JSON). 这也是手册的合理起点 如果您不愿添加插件, 则导入图片变量 已解决, 因此在 Figma 端不需要查询 .

这仅仅是一个设计纸箱管道: 它没有保留Figma _组件_ 与代码组件同步.

## 黑暗主题

黑暗主题为选入:设置 `data-chai-theme="dark"` 打开 `<html>`,或打开 任何元素,切换里面的每个柴分元件. 没有 属性不变.

```html
<html data-chai-theme="dark">
```

柴不照系统设置,因为你的应用决定了 其主题。 顺其道:

```ts
const dark = matchMedia("(prefers-color-scheme: dark)");
const sync = () =>
  dark.matches
    ? document.documentElement.setAttribute("data-chai-theme", "dark")
    : document.documentElement.removeAttribute("data-chai-theme");
sync();
dark.addEventListener("change", sync);
```

单位 `src/tokens.json`, (中文(简体) ), `color.dark` 持有每个语义角色在 暗主题,使用相同的根调色板。 画面上的角色 和录像, `media-backdrop` 和编辑区域颜色) 两个主题都是一样的。 黑暗主题中的每个文本对会遇到 WCAG 2.2 AA 对比 绿色品牌走向 `green-60`,因为 `green-50` 也一样 黑暗的文字在黑暗的表面.

构造会释放暗值 `[data-chai-theme="dark"]` 内 `@chai-ui/tokens/css`,与材料颜色角色 再次,所以开关, 提交按钮和文本字段也跟随主题。 调整其中一项作用 仅在暗色主题下覆盖它 :

```css
[data-chai-theme="dark"] {
  --chai-color-semantic-control-surface: #202124;
}
```

## 常见问题

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

Chai UI设计了活字符号——以CSS变量"TypeScript"所构建的单一真理源"和一款Figma Tokens/Variables-plugin JSON\.

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

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

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

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

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

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

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

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

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

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

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

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