# @beehexa/design-tokens 中文文档

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

版本：2611\.8\.1
npm 元数据更新时间：2026-11-07T17:39:15.755Z
中文译文更新时间：2026-11-08T05:30:52.688Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：917 kB，32 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.22\.0
- 运行依赖：0 个
- 首次发布：2026-11-03T04:28:32.320Z
- 最新版本发布：2026-11-07T17:39:15.321Z
- 近 30 天下载量：1893（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

从权威的 DTCG 来源生成的 Beehexa 设计符号

## 安装

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

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

## README

# @ beehexa/ 设计脚趾

源码检查开发软件包( Q)`0.0.0`, (中文(简体) ), `private: true`,而不是登记册的发布号。 管理者必须在GitHub跑道邮票真实版本之前授权发行,并通过npm Trusted Publishing/OIDC发布被检查的柏油球.

## 使用已安装的软件包

在蜂窝中建起. 设计源检出 `npm ci && npm run build:packages`. 在批准发布前,消费者安装当地参考 `packages/design-tokens` (例如亚恩) `portal:../beehexa.design/packages/design-tokens`) (中文(简体) ). 不将生成的 CSS/JavaScript 复制到产品中, 不使用 Vite 源别名, 或获取已实现的网站 HTML .

当地参考文献为 **仅限当地发展**. 消费者CI 需要实际发布的 npm 版本,并且决不能检查兄弟姐妹寄存器或从兄弟姐妹路径构建. 制片人CI保持单人存储状态. 不释放、 部署或执行 CI 作为本地工作的先决条件; 不可用的 npm 释放不允许添加交叉存储 CI 倒置 .

```js
import '@beehexa/design-tokens/css';
import { tokens, tokenInfo } from '@beehexa/design-tokens';

const text = tokens.light['color.text'];
const darkText = tokens.dark['color.text'] ?? text;
const description = tokenInfo['color.text'].description;
```

```ts
import type { TokenName } from '@beehexa/design-tokens';
const spacing: TokenName = 'space.200';
```

-   `tokens.light` 包含每个符号,并带有递归解决的引用.
-   `tokens.dark` 财务报告和审定财务报表 `tokens.vi` 只包含与光不同的值,包括通过别名间接变化。 越南三角洲是对照越南图解决的,而不只是基础目标. 它们是独立的模式三角洲;没有导出组合暗+ 越南天体。 切勿假设任意的三角洲合并模式与未来模式重叠;使用CSS级联进行合并演示.
-   `tokenInfo` 以相同的同义名称键入。 它包含 `name`, (中文(简体) ), `path`, (中文(简体) ), `type`, (中文(简体) ), `description`,生化别名 `value`,可选源 `dark`编号 :`vi` 扩展, `cssVar`,并完全解决 `resolved`编号 :`darkResolved`编号 :`viResolved`. 这些描述解释了个别决定;它们不能取代《公约》中的完整使用规则 `@beehexa/design-rules`。 。 。 .
-   生成的声明保存了字面符号键和值. `TokenName` 实值 `keyof typeof tokens.light`; 拼错的密钥不拓宽为 `Record<string, string>`。 。 。 .
-   `tokenPixels(name, locale = 'en', rootFontSize = 16)` 转换源数字scalar或 `px`编号 :`rem` 维度。 默认保留了名义上16px/rem几何;一个明显的被观测到的根尺度只保留了rem维度. 取代可缩放的 CSS 的本地Avatar/ Image道具必须通过从 `useAntDesignVueRootFontSize()` 在AntD适配器中(儿童重新使用其供应商的一项测量)。 越南语前缀选择已解决的替代品. 0仍然是0;颜色,复合字体和非数字角色抛出. 永远不要复制转换逻辑或强迫根匹配数字 API 。 固定帆布坐标可能故意保留名义默认.
-   `@beehexa/design-tokens/css` 保留本地语 `rem`定义 `--bh-*` 打开 `:root`,荣誉明确 `data-theme="light"`编号 :`"dark"`,仅使用系统暗偏好,而不使用明确的光线选择,并通过 `:lang(vi)` 以其他明确语言重播。 它没有设置应用程序的根字体大小 .
-   `@beehexa/design-tokens/css/pixels` 使用相同的生成器和选择器,每一次转换 `rem` 字数 **每雷姆16皮克**,包括复合值。 此可选兼容性入口不是仪表板集成: 使用本地 `/css`,保存读者的根设置并放入 `font.body.default` 在尸体上。 。 。 从不导入两个变体.
-   CSS所有子路径都包含包自有的副作用声明,因此严格的TypeScript消费者带有 `noUncheckedSideEffectImports` 不需要环境模块 shims。 运行时输出仍然解决 CSS 文件 .
-   来源 `font.features` 实值 `"cv05", "cv08"`生成的 CSS 将其普遍适用 `!important`,在语义上保留这些特征 `font` 简手重排。 通过添加本地选入特性 `--bh-font-features`,而不是一个相竞的地物.
-   `@beehexa/design-tokens/dtcg/color.json` (和所有其他原件) `tokens/*.json`)披露未变源数据.
-   `@beehexa/design-tokens/package.json` 曝光已安装的来源/版本元数据 .

## 应用程序滚动条

导入 `@beehexa/design-tokens/css/scrollbars` 在符号 CSS 之后选择 应用到一个本地- DOM 滚动条外观家族,包括蚂蚁表 机构, 树/列表持有人、抽屉、门户和本土测量探测器. `bh-scroll-region` 识别应用程序创建的卷轴所有权; 这不是 对未标记的框架持有人的外观豁免。 提交人 `src/styles/scrollbars.css` 船舶名称不变 `dist/scrollbars.css`。 。 。 . 它从不提供溢出,高地,强迫下水道,假卷轴,卷轴 动画或过卷封装。 应用程序布局用品 `overflow: auto` 仅在需要时,每个逻辑窗格保持一个连续所有者。 永远不要隐藏栏 或保留相竞的地方食谱.

这个 `scrollbar.*` 角色模型 Ant Design Vue 4 表格的真实滚动条符号 工厂:名义8px (`width` → `space.100`土生土长0.5雷姆), `colorTextPlaceholder` (单位:千美元)`thumb` → `color.text.subtlest`, (中文(简体) ), `colorTextHeading` (单位:千美元)`thumbHover` → `color.text`, (中文(简体) ), 财务报告和审定财务报表 `colorSplit` (单位:千美元)`track` → `color.border`) (中文(简体) ). `thumbActive` 作为蚂蚁的股份徘徊 有粘性滚动条; `corner` 共享音轨和 `radius` 用途 `radius.full`。 。 。 . 相同的值既服务于轴又继承了光/暗语别名分辨率; 越南语不需要单独的滚动条覆盖 。 保留不透明前景/凸起 与赛道相对,不是局部半透明相近.

**原生框架卷轴所有权被保留,并非免于外观.** 共享模块样式 : 斧头,包括原生的表形轨迹/橡树和树柄;无包装 需要标记或私人节点操纵。 移除旧的直生子女 `scrollbar-color:auto` 豁免。 屏幕外本地滚动条测量探测器 使用与表格正文相同的宽度,保留标题/正文对齐. 虚拟条没有浏览器滚动条伪元素: AntD4 源 适配器在不改变的情况下绘制其虚拟列表内置外观缺口 拇指位置/高处,能见度或拖动处理器. 摩纳哥消费 `scrollbar.*` 通过公共主题/选项和观察到的读者根; 仅其缺失的音轨/辐射涂料输入使用源适配器样式表.

WebKit-pseudo-element 引擎使用符号宽度/ 高度和实际拇指 徘徊/活动; 只使用标准引擎 `thin` 几何和主机 徘徊/活性颜色,因为他们的API没有拇指状态的伪元素. 平台 覆盖能见度/几何仍为原生,强迫颜色模式保留原生 系统卷轴画和几何。 键盘、轮子和触摸滚动仍然保留 当然 完全所有权、无障碍和倒置指导是Scrollbar 组件(来源) `src/content/components/scrollbar/`) (中文(简体) ).

## 来源权限和限制

`beehexa.design/tokens/*.json` 这是唯一的符号源. `scripts/token-utils.mjs` 拥有平分,CSS命名,模式-意识图解等功能,CSS生成;网站和包构建者共享. 构建拒绝重复的代号/ CSS 名称, 未知的引用, 以及光, 暗, 越文, 和合并的 暗+ 的循环 。 越南图. 生成的产出不是另一个可编辑的来源 .

用法选择仍然受完整已安装的规则文档的制约,包括可访问性,交互状态,布局,响应性和地语规则. 使用语义角色符号而不是由源定义一个角色的调色板原始相. 没有产品/包装板豁免。 计划或缺失的源指导必须报告上游而不是下游发明。 源设计系统仍然是一项工作建议;存在一个符号或元数据描述并不意味着其组件指导是完整的或GA.

## 制作人命令

来源: `npm run build:packages`, (中文(简体) ), `npm run check:packages`, (中文(简体) ), `npm run pack:packages`。工作空间 `npm run build -w @beehexa/design-tokens` 仅构建这个软件包; `prepack` 包装前还要建出真正的文物. 软件包检查只需要这个生产者寄存器,从不进行仪表盘检查. 发行内容包括ESM,声明,两个符号CSS变体,选择入围的滚动条样式表,没有变化的DTCG文件以及这个README. 被打包的负载检查器需要打入的滚动条条目,对照被编写出的来源检查其字节并严格地从取出焦油球中进行副作用导入解析.

## 常见问题

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

从权威的 DTCG 来源生成的 Beehexa 设计符号

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

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

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

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

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

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

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

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

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

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

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

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

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

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