# @appdirect/ad-design-tokens 中文文档

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

版本：0\.0\.19
npm 元数据更新时间：2026-11-05T18:57:35.362Z
中文译文更新时间：2026-11-06T12:06:42.030Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：1.9 MB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-10-14T15:44:53.278Z
- 最新版本发布：2026-11-05T18:57:35.179Z
- 近 30 天下载量：3282（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

AppDirect 设计代币来源和发行文物.

## 安装

```sh
npm install @appdirect/ad-design-tokens
```

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

## README

# @ appire/ad-design-tokes (英语)

AppDirect 前端应用的设计符号.

## 安装

```bash
npm install @appdirect/ad-design-tokens
```

## 可用出口

-   **解析语义符号 :**
    -   `@appdirect/ad-design-tokens/semantic/light`
    -   `@appdirect/ad-design-tokens/semantic/dark`
-   **已解析的组件符号 :**
    -   `@appdirect/ad-design-tokens/components/light`
    -   `@appdirect/ad-design-tokens/components/dark`
-   **已解析的符号输出( 每层) :**
    -   `@appdirect/ad-design-tokens/resolved/core.json`
    -   `@appdirect/ad-design-tokens/resolved/open-color.json`
    -   `@appdirect/ad-design-tokens/resolved/derived.json`
    -   `@appdirect/ad-design-tokens/resolved/semantic-light.json`
    -   `@appdirect/ad-design-tokens/resolved/semantic-dark.json`
    -   `@appdirect/ad-design-tokens/resolved/components-light.json`
    -   `@appdirect/ad-design-tokens/resolved/components-dark.json`
-   **Figma / Tokens Studio (DTCG JSON 配有 `{ref}` 别名完整:**
    -   `@appdirect/ad-design-tokens/figma/open-color.json`
    -   `@appdirect/ad-design-tokens/figma/core.json`
    -   `@appdirect/ad-design-tokens/figma/derived.json`
    -   `@appdirect/ad-design-tokens/figma/semantic.light.json`
    -   `@appdirect/ad-design-tokens/figma/semantic.dark.json`
    -   `@appdirect/ad-design-tokens/figma/components.light.json`
    -   `@appdirect/ad-design-tokens/figma/components.dark.json`
    -   `@appdirect/ad-design-tokens/figma/$themes.json` (Tokens Studio主题列表)
-   **CSS 变量 :**
    -   `@appdirect/ad-design-tokens/css/foundations.css` (只有语义符号——框架适配器的基础)
    -   `@appdirect/ad-design-tokens/css/mantine.css` (机器适配器——组件选择器参考) `--ad-*` (马来语)
    -   `@appdirect/ad-design-tokens/css/tokens.css` (创始人+组件令牌——香草消费者完全独占)
    -   `@appdirect/ad-design-tokens/css/open-color.css` (单位:千美元)`--ad-open-color-*` 调色板)
-   **设计文件适配器 :**
    -   `@appdirect/ad-design-tokens/design-spec.yaml` (解决YAML 有效载荷以同步) `DESIGN.md` 前题在 `ad-design-system`(中文(简体) )
-   **联合来文的切入点:**
    -   `@appdirect/ad-design-tokens` (完全解开的捆绑)

## 使用量

### 图片通过Tokens工作室

Tokens 工作室位于 `dist/figma/` 在已发布的软件包中。 这个 `$themes.json` 将图层文件分为两个主题(`Light`, (中文(简体) ), `Dark`) 因此,Tokens Studio在导入时创建了以下 Figma 变量集合 :

| 收藏 | 模式 |
| --- | --- |
| `Tokens / Open-Color` | 数值 |
| `Tokens / Core` | 数值 |
| `Tokens / Derived` | 数值 |
| `Tokens / Semantic` | 光, 暗色( 暗色) |
| `Tokens / Semantic Brand` | 数值 |
| `Tokens / Components` | 光, 暗色( 暗色) |

互动状态(hover, active, focus, disable)被有意排除在Figma导出之外——它们是代码方面的关注. 图片只绑定默认/恢复状态 .

### 解决 JSON 进口问题

```js
import semanticLight from '@appdirect/ad-design-tokens/semantic/light' with { type: 'json' };
import componentsDark from '@appdirect/ad-design-tokens/components/dark' with { type: 'json' };
import resolvedCore from '@appdirect/ad-design-tokens/resolved/core.json' with { type: 'json' };
```

### CSS变量——香草消费者

```js
import '@appdirect/ad-design-tokens/css/tokens.css';
```

### CSS 变量——只调色板

```js
import '@appdirect/ad-design-tokens/css/open-color.css';
```

### CSS 变量 — Maintine 适配器

导入于 `@mantine/core/styles.css` 因此适配器的更高特异性选择者获胜:

```js
import '@mantine/core/styles.css';
import '@appdirect/ad-design-tokens/css/foundations.css';
import '@appdirect/ad-design-tokens/css/mantine.css';
```

```css
.button {
  background: var(--ad-color-brand-primary);
  color: var(--ad-color-brand-on-primary);
}
```

### JS 切入点

```js
import tokens from '@appdirect/ad-design-tokens';

console.log(tokens.semantic.light.color.bg.default.$value);
```

## 常见问题

### @appdirect/ad-design-tokens 是什么？

AppDirect 设计代币来源和发行文物\.

### 如何安装 @appdirect/ad-design-tokens？

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

### @appdirect/ad-design-tokens 支持 TypeScript 吗？

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

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

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

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

@appdirect/ad-design-tokens 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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