# @campfire-interactive/design-tokens 中文文档

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

版本：0\.7\.5
npm 元数据更新时间：2026-11-02T18:35:49.780Z
中文译文更新时间：2026-11-09T19:03:31.324Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40campfire-interactive/design-tokens
原文对照：https://npmcn.com/package/%40campfire-interactive/design-tokens/?lang=original

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

- 包体积（解压后）：66 kB，4 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-04-15T20:30:34.343Z
- 最新版本发布：2026-11-02T18:35:49.633Z
- 近 30 天下载量：1823（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

Campfire 套件的共享设计标志——生平平,语义角色,每个应用口音钩子,以及一个可选入的黑暗主题

## 安装

```sh
npm install @campfire-interactive/design-tokens
```

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

## README

# @ campfire- 交互/ 设计托盘

营火套房中每一共同价值的真相来源——颜色,类型, 相距、光度、阴影、运动、z指数、图表序列和铬维度—— 作为 CSS 自定义属性 `--cfi-` 前缀.

`tokens.css` 来源; `tokens.json` 由它生成 `scripts/generate.mjs` 并解决 `var(--cfi-app-*, fallback)` 链到 非CSS消费者的字词.

## 0.2.x是重写,收养尚未开放

0.1.1有42个代币. 0.2.0有148个,分三层,并有选入的黑暗主题. 语义命名是 **未结算** 直到多个应用程序迁移到 所以把这些名字当作动产.

一个名字已经移动: 橙色坡道是 `--cfi-color-orange-*`,重新命名为 `--cfi-color-primary-*`。这个文件中的 Raw 缩略图由 hue 命名,所以一个角色单词 在调色板插槽中读作"主颜色"——这就是按钮最终的结局 电线接通了 这是主数据 和pim的应用身份颜色。 颜色 无论你按什么 `--cfi-action`。 。 。 .

3个已出版的软件包仍以文字背书引用旧名 (单位:千美元)`shell-header`, (中文(简体) ), `side-nav`, (中文(简体) ), `volume-intelligence-ui`这一点是故意的: 他们自作主张 他们今天所做的一切 没有提供别名,因为别名可以解决 `volume-intelligence-ui`应用程序导入时蓝色按钮为橙色 这个文件.

`^0.1.1` 并不确定为0.2.0——1.0以下的护身符从不跨越未成年人—— 所以没有什么是偶然的 弹出到 `^0.2.0` 是一种故意的行为, 城门就在里面 `CLAUDE.md`。 。 。 .

## 安装

```bash
npm i @campfire-interactive/design-tokens
```

```ts
// once, at the app entry point, BEFORE the app's own stylesheets
import '@campfire-interactive/design-tokens/tokens.css';
```

宣称依赖性本身并不能起到什么作用。 这是11人的附属关系 前端且无前端导入 `--cfi-*` 达到的变量 仅仅因为 `shell-header` 财务报告和审定财务报表 `side-nav` 把他们自己的用途捆起来. 导入样式表, 否则没有符号 .

## 三层,哪一层可以参考

1.  **原始比例** —— 说 `--cfi-color-gray-500`, (中文(简体) ), `--cfi-font-size-sm`。调色板值. 只有在定义语义符号时才会引用这些符号 .
2.  **语义作用** —— 说 `--cfi-surface`, (中文(简体) ), `--cfi-content-muted`, (中文(简体) ), `--cfi-border`, (中文(简体) ), `--cfi-action`,焦点戒指, 覆盖. **这就是CSS的组件 应用.** 一个通过这些部分变成生灰色的组件不能是 以暗模式重取主题并中断 .
3.  **App 覆盖** —— 说 `--cfi-app-primary` 还有朋友 应用程序自己的身份 颜色,为外壳徽章. 把这些设定在消耗的应用程序中.

### 两种颜色,两种工作

`--cfi-action` 是套房的颜色 任何你按的——按钮,链接, 焦点环,所选行。 它的价值是 omsf 的 `#030213`,因为 omsf 是 用于主样式的参考。 它在每一个应用程序中都是相同的,这就是它的重点.

`--cfi-app-primary` 是应用程序的身份颜色,它唯一的工作是应用程序 外壳头的徽章加上应用切换器中的瓦片。 犬类价值 每个应用程序是 `color` 输入 `shell-header`是因为 `appCatalog`。 。 。 .

**别把一个指向另一个.** 将按钮接入应用程序颜色 同一个主按钮紫罗兰在一个应用, 天蓝色在另一个,indigo在一个 第三——与设计系统相反.

## 黑暗模式是选入

```html
<html data-theme="dark">          <!-- explicit -->
<html class="cfi-theme-auto">     <!-- follow the OS -->
```

都不是偶然的,所以把这个文件添加到一个从未有过的应用程序中 被认为是黑暗模式不能改变它今天的样子.

## 状态颜色

每一个语义花朵都带有一个 `-soft` 背景资料和a `-text` 前景 开会4.5:1反对。 用对相. `bg-[#10B981]/10 text-[#10B981]` - 那个 形状有几种应用——接近2:1的土地.

## 常见问题

### @campfire-interactive/design-tokens 是什么？

Campfire 套件的共享设计标志——生平平,语义角色,每个应用口音钩子,以及一个可选入的黑暗主题

### 如何安装 @campfire-interactive/design-tokens？

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

### @campfire-interactive/design-tokens 支持 TypeScript 吗？

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

### @campfire-interactive/design-tokens 可以商用吗？

@campfire-interactive/design-tokens 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @campfire-interactive/design-tokens 的下载量有多少？

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

### @campfire-interactive/design-tokens 还在维护吗？

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