# @bitbaum/design-tokens 中文文档

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

版本：1\.5\.2
npm 元数据更新时间：2026-11-03T08:13:33.542Z
中文译文更新时间：2026-11-08T04:02:59.713Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：3.4 MB，161 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2026-09-05T15:00:28.299Z
- 最新版本发布：2026-11-03T08:13:33.165Z
- 近 30 天下载量：6834（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

为OrangeCat,Loki和Solon设计SSOT——指代,自备相貌相相貌相相相貌相相貌相相貌相相相貌相相相貌相相貌相相貌相相貌相相相貌相相相貌相相貌相相相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相相貌相貌相.

## 安装

```sh
npm install @bitbaum/design-tokens
```

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

## README

# @ bitbaum/ 设计指针

设计 **单一真相来源** 给奥兰治卡特,洛基和索隆.

一个文件—— [`tokens.css`](https://npmcn.com/package/%40bitbaum/design-tokens/tokens.css) 定义每一种颜色、类型、重量, 跟踪,半径和共享原始 三种产品使用。 他们进口的. 无所复制.

## 为什么

这些道具曾经被手工复制成三回,并漂出. 索伦的 `globals.css` 背着一条评论 声称它的标志 匹配橙色猫的时 共享 **零** 名称或价值 ——所以这三种产品看起来像 三个不同的公司。 复制漂移; 无法导入 .

## 重排整个堆栈

1.  编辑标记的块 `▼▼▼ THE KNOBS ▼▼▼` 内 `tokens.css` 或更新可选内容 `composition.css` 接口改进合同.
2.  弹出 `package.json`版本 **财务报告和审定财务报表** 设置匹配的清晰 `.github/release-request.txt`; 提交公关和密码包 CI.
3.  一个成功的 **主干线推 CI** 触发 `tag-approved-release.yml`。它只标记最近核实的 SHA ,并且从未重写已有的版本标签.
4.  标记工作流程明确发送 `publish.yml`; npm 出版仍然由 `NPM_PUBLISHING` 并且需要可信出版的靴子 如果变量关闭, 则存在 Git 标记, 但是 **无 npm 发布** 被索赔.
5.  将消费者升级到确认的Git标签,发布npm版本,或精确的源承诺SHA;运行其被冻结的锁文件CI.

一次性发布请求不会自动批准未来的版本出错:请求必须与表单版本相匹配.

更改显示类型为 **单行**数字 :

```css
--font-display: "Instrument Serif", Georgia, serif;
--font-display-weight: 400;   /* the face's weight lives WITH the face */
--tracking-display: -0.015em; /* and so does its tracking */
```

## 安装

```jsonc
// package.json
"@bitbaum/design-tokens": "^1.2.0"
```

```tsx
// app/layout.tsx — import BEFORE the app's own globals.css
import "@bitbaum/design-tokens/tokens.css";
import "./globals.css";
```

```js
// tailwind.config.js (v3)
module.exports = {
  presets: [require("@bitbaum/design-tokens/tailwind-preset")],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
};
```

尾风 v4 应用程序消耗 `tokens.css` 结束 `@theme`; 变量名称为 完全相同,所以两条路径保持同步.

## 可选跨产品构成语法

这个 **品牌标志** 属于奥兰治卡特/洛基/索隆. 它们共享的调色板绝不应强加于无关的产品,或 客户网站.

间隔、控制大小、视觉节奏和互动 _决定_, (中文(简体) ), `composition.css` 是选入的, 命名空间层。 它没有定义字体,品牌 颜色、体型或全局重置.

```tsx
// App Router — load AFTER the app's CSS reset and BEFORE product CSS modules.
// The shared classes intentionally use :where() specificity, so importing
// them before a later universal '*' padding reset would erase their padding.
import './globals.css';
import '@bitbaum/design-tokens/composition.css';
```

```tsx
<main className="bb-frame">
  <div className="bb-stack" style={{ '--bb-stack-gap': '1.5rem' }}>
    <div className="bb-measure">A product-specific headline and description</div>
    <div className="bb-actions">
      <a className="bb-button bb-button--primary" href="/start">Get started</a>
      <a className="bb-button bb-button--secondary" href="/method">Read the method</a>
    </div>
  </div>
</main>
```

仅绘制小缝隙 **语义** CSS角色一次在每个应用程序中:

```css
:root {
  --bb-action-bg: var(--color-action);
  --bb-action-fg: var(--color-on-action);
  --bb-control-bg: var(--color-surface);
  --bb-control-fg: var(--color-text);
  --bb-line: var(--color-border);
  --bb-muted: var(--color-text-muted);
  --bb-focus: var(--color-focus);
}
```

导出语法包括: `bb-frame`, (中文(简体) ), `bb-measure`, (中文(简体) ), `bb-section`, (中文(简体) ), `bb-stack`, (中文(简体) ), `bb-cluster`, (中文(简体) ), `bb-grid`, (中文(简体) ), `bb-actions`, (中文(简体) ), `bb-choice-row`, (中文(简体) ), `bb-list`, (中文(简体) ), `bb-keyline`, (中文(简体) ), `bb-tabular`, (中文(简体) ), `bb-control`, (中文(简体) ), `bb-button`,以及 `bb-skip`。 。 。 .

它保证了44px控制,可见的焦点,反应的等细胞选择, 和减少运动支持。 Apps自有打字,颜色,间隔调整, 组件及其内容。 执行 **没有** 将所有信息制成卡片: 语法刻意提供白地和发线列表.

**释放合同:** 新组成子路径首先出现在 源版本 `1.2.0`· ; `v1.1.0` 已经 **没有** 包括它。 经核实 标记管道只标记明确要求的版本 `.github/release-request.txt` 在主CI为绿色后. 校验 `v1.2.0` Git ref 和登记簿在分别索赔之前为 发表。 在此之前,使用经核实的准确承诺SHA. 现有 `tokens.css` 消费者不通过选择退出而改变外观.

## 合同

组件声明 **意图**从来没有机械.

| 执行 | 别 | 为什么 |
| --- | --- | --- |
| `className="font-display"` | `font-['Instrument_Serif']` | 脸不是组件的生意 |
| `className="font-display"` | `font-display font-bold` | 显示面部 **一个重量**; 一个被合成的粗体看起来便宜 |
| `className="bg-surface-base"` | `bg-[#1c1c1c]` | 重用药不能要求找到六分法 |
| `className="text-accent"` | `text-[#ff5c00]` | 一个动作颜色, 一个定义 |
| `bg-accent text-on-accent` | `bg-accent text-white` | 口音为白色 **3.10:1 (中文(简体) )** 而AA失败;相配的墨水为 6.10:1 |
| `className="tabular"` | —— 说 | 变化的号码不可抖动 |
| `font-display` 年 月 时`text-2xl` | `font-display text-lg` | 24px以下的高相接缝为: _轻点_ 胜过身体和等级的颠倒 |
| `className="wordmark"` | `font-display` 在标志上 | 大写 + 打开跟踪是显示所幸存的小尺寸 |

在每道雷波的设计门上执行 所以漂移失败了建造而不是 静静地运输.

## 类型

自动托管( latin + latin- ext), 不向 Google 请求运行时间 :

| 作用 | 脸 | 重量 | 卡莉丝 |
| --- | --- | --- | --- |
| 显示 | 文书塞里夫 | 仅400 | 头条、 字签 |
| 萨斯语 | 间 | 400-700个变量 | 所有UI和正文文本 |
| 单 | IBM Plex 单曲 | 400、500个 | 地址、签名、散列、清点 |

这三个都是SIL开放字体许可证.

### 生成图像的面相( E)`next/og`(中文(简体) )

没有 `fonts`,下一个/og's `ImageResponse` 画与地质常数 捆绑, 对于任何字符, 没有字体覆盖它要求 `fonts.googleapis.com` (和 `cdn.jsdelivr.net` 当图像被绘制时: 预先交出一个图像,或绘制一个图像的服务器,然后取决于Google 关闭一个emoji 失败整个图像。 换句话说

```tsx
import { ogFonts, ogText } from '@bitbaum/design-tokens/og';

return new ImageResponse(<Card title={ogText(post.title)} />, {
  ...size,
  fonts: await ogFonts(),
});
```

-   `ogFonts()` 是Geist 400, 下一个/og会用到的脸, 所以图像是 不变. `ogFonts('inter:400,600')` 或者说 `ogFonts('inter')` (每个重量) 名称;每个字体以其家族命名,以及 a `fontFamily` 没有字体返回到第一个字体.
-   `ogText(text, ...specs)` 撇开面部的画 一个字 缺少一个字母(另一个脚本)整体,一个emoji或自己的符号. 使用 它在文本上,图像不控制,例如名称或标题来自 数据库.
-   对于这种文本,请在Geist之后通过Inter: `ogFonts('geist', 'inter:400')` 财务报告和审定财务报表 `ogText(text, 'geist', 'inter:400')`佐藤里和Geist一起画画 然后拿走 Geist 缺少(希腊语、越南语、 、多发箭头) 获取; 盖斯特画像以前一样 .
-   渲染器既不读取WOFF2,也不读取可变字体,所以这些字体是静态的 在联署材料模块中作为WOFF存储的实例(`og/faces/`: 任何运行时间(对接或 节点),任何捆绑者都会导入它们,一条路线只装入面孔 名称。 已装运:Geist 400、Inter 400和600。 一张它缺少的相貌会增加 `OG_FACES` 内 `scripts/og-fetch-fonts.mjs` 并释放,而永不取出.

### 下一个应用程序的面孔( Y)`next/font/local`(中文(简体) )

`next/font/google` 下载其面部时 `next build`,所以一个建筑失败 当Google字体不回答时。 舰队的应用软件使用舰只 `fonts/<face>/` 换句话说,除了它 `OFL.txt`,以及 [`fonts/faces.json`](https://npmcn.com/package/%40bitbaum/design-tokens/fonts/faces.json) 列出每个文件的子集, 样式、重量范围、, `unicode-range` sHA-256 Google提供以下服务:

| 脸 (斜口) | 重量 | 样式 | 子集 |
| --- | --- | --- | --- |
| 中间`inter`(中文(简体) ) | 100-900变量 | 常规 | 拉丁文、拉丁文、西文、希腊文、希腊文、西文 |
| 格罗特斯克航天公司`space-grotesk`(中文(简体) ) | 300-700变量 | 常规 | 拉丁语、拉丁语、vietnames |
| IBM Plex Mono (英语:`ibm-plex-mono`(中文(简体) ) | 400、500、600个 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |
| 女士们`fraunces`(中文(简体) ) | 100-900变量 | 正常, 斜体 | 拉丁语、拉丁语、vietnames |
| 科莫朗·加拉蒙德(签名)`cormorant-garamond`(中文(简体) ) | 300-700变量 | 正常, 斜体 | 亚铁、亚铁、克力克、克力克、克力克 |
| 马克·桑斯(DM Sans)`dm-sans`(中文(简体) ) | 100-1000变量 | 常规 | 拉丁语,拉丁语 |
| 盖斯特( Geist) (`geist`(中文(简体) ) | 100-900变量 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |
| 盖斯特·莫诺(Geist Mono)`geist-mono`(中文(简体) ) | 100-900变量 | 常规 | 拉丁文、拉丁文、西里尔文、西里尔文、符号2、vietnamese |
| JetBrains Mono (英语:`jetbrains-mono`(中文(简体) ) | 100-800个变量 | 常规 | 拉丁语、拉丁语、西里尔语、希腊语、西里尔语 |
| 蒙特塞拉特(`montserrat`(中文(简体) ) | 100-900变量 | 常规 | 亚铁、亚铁、克力克、克力克、克力克 |

`next/font` 在调用模块中只使用字面选项, 而只使用一个调用 携带一个 `unicode-range`,所以应用程序从命令中获取其字体模块 而不是从援助者那里

```bash
pnpm exec design-tokens-next-fonts src/app/fonts.ts \
  'sans=inter;variable=--font-inter' \
  'display=space-grotesk;weight=500,700;variable=--font-space-grotesk'
```

```tsx
// app/layout.tsx
import { display, sans } from './fonts';
<html className={`${sans.variable} ${display.variable}`}>
```

脸后键 : `weight=` (默认:整个范围), `style=` (默认) `normal`, (中文(简体) ), `variable=`, (中文(简体) ), `subsets=` (默认:全部发运), `preload=` (默认) `latin`· ; `none`, (中文(简体) ), `display=` (默认) `swap`, (中文(简体) ), `hinting=on` (真实的玩具) 文件在 `fonts/<face>/hinted/`,该 Google 在 Windows 上为当前 Chrome 服务 或 Linux; 默认为未插件 `next/font/google` (下载). 它写了一个 `localFont` 调用 每个子集,按Google的顺序:相同的文件、权重、样式、范围以及 预装 `next/font/google` 制作,格式化 与应用程序自己的更美. 文件的头一行是写它的命令; 添加 `--check` 改为 当文件和软件包有分歧时失败。 有两件事和谷歌不同 既不更改已提供页面:家族以导出( Turbopack) 命名 忽略一个 `font-family` 声明在 `.variable`),而倒地相会是: 从文件而不是Google的表格中测量.

`node scripts/fetch-fonts.mjs` (仅保存者,从未在建筑中) 文件到这里: 它问Google究竟什么 `next/font/google` 问及其 用户代理.

### 为什么是静脉

每个AI和基础设施公司都在同一暗黑的黑幕里竞争 奇特的大会,其中的胜利者 谁拥有最大的设计预算. 一种高度矛盾的Serif退出了这种比较:它读作体制性而非 启动,它完全适合一个堆栈,其产品是 _合法性_ —— 说 签名的表决票,可核查的国库, 唯一的附件审计线索.

* * *

部分 **[位点](https://bitbaum.orangecat.ch/)** 开放的AI-本土产品 在苏黎世建造的基础设施。 这里的每个软件包都列出使用该软件的应用程序: **[应用程序使用设计键](https://bitbaum.orangecat.ch/packages/#design-tokens)**。 。 。 .

## 数据地图

`--map-scale-1` . `--map-scale-7` 是一个按顺序排列的尺度 和弦(平分,从阴向光;六分,所以是SVG) `fill` 把他们当作是. 光亮在每一步都上升,所以天平能活下来 和灰度; `test/contrast.test.js` 保持这样. `--map-no-data` 财务报告和审定财务报表 `--map-boundary` 遵循主题。 不止一个当局声称的领域 **已孵化**,从不给它自己的颜色: `--map-hatch-width` 每个 `--map-hatch-gap` 时间 `--map-hatch-angle`,在文本颜色中。 颜色是 从来没有唯一的载体:每张地图都有列表和传说.

## 常见问题

### @bitbaum/design-tokens 是什么？

为OrangeCat,Loki和Solon设计SSOT——指代,自备相貌相相貌相相相貌相相貌相相貌相相相貌相相相貌相相貌相相貌相相貌相相相貌相相相貌相相貌相相相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相貌相相貌相貌相\.

### 如何安装 @bitbaum/design-tokens？

在项目目录运行 npm install @bitbaum/design-tokens，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 design-tokens-next-fonts，可以用 npx design-tokens-next-fonts 直接运行。

### @bitbaum/design-tokens 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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

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

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