# @devslab/dds-tokens 中文文档

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

版本：0\.33\.0
npm 元数据更新时间：2026-11-11T18:59:14.185Z
中文译文更新时间：2026-11-12T04:12:30.527Z
软件包许可：SEE LICENSE IN LICENSE

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

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

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

- 包体积（解压后）：47.1 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-08-30T20:25:03.991Z
- 最新版本发布：2026-11-11T18:59:13.705Z
- 近 30 天下载量：4050（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：46（近 12 个月 46 个）

## 中文简介

DDS (DevsLab Design System) 设计符号——一个JSON源,为CSS, Tailwind, TypeScript/RN和Ionic所建

## 安装

```sh
npm install @devslab/dds-tokens
```

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

## README

# @devslab/ds-tokens (英语)

🌐 [한국어](https://npmcn.com/package/%40devslab/dds-tokens/README.ko.md)

DDS 设计符号, 由 Repo 根的单一源创建 (单位:千美元)`tokens/*.json`, W3C Design Tokens 格式)为每个消费形状 (第2节). `pnpm build` 生产:

| 艺术 | 导入 | 消费者 |
| --- | --- | --- |
| `dist/tokens.css` | `@devslab/dds-tokens/tokens.css` | 每个网络表面. `--dds-*` 自定义属性 — 打开 `:root`暗着 `[data-theme="dark"]` |
| `dist/tailwind/theme.css` | `@devslab/dds-tokens/tailwind/theme.css` | 尾风v4(`@theme`(中文(简体) ) |
| `dist/tailwind/preset.js` 编号 : `.cjs` | `@devslab/dds-tokens/tailwind/preset` | 尾风v3(`presets: [...]`(中文(简体) ) |
| `dist/tokens.ts` (+ 数) `tokens.js` 编号 : `tokens.d.ts`(中文(简体) ) | `@devslab/dds-tokens` | RN和任何运行时间代码——生数(网络上px,RN上pt) |
| `dist/ionic.css` | `@devslab/dds-tokens/ionic.css` | 音响响响起 `--ion-*` 映射到 `--dds-*`: 品牌颜色`primary` + 键 `-rgb`编号 :`-shade`编号 :`-tint`编号 :`-contrast`),三种状态颜色及其 `-contrast`,页背景/文本/边框、字体和app chrome(`item`, (中文(简体) ), `toolbar`, (中文(简体) ), `tab-bar`, (中文(简体) ), `card`(中文(简体) ) |

## 使用说明

-   **装入令.** `tokens.css` 首先是:; `theme.css` 编号 : `ionic.css` 参考 变量。 尾风彩色公用事业通过 `var(--dds-*)`所以他们 运行时跟随主题.
-   **黑暗模式 .** 设定 `data-theme="dark"` 打开 `<html>` (或任何树下 --) `data-theme="light"` 将树接回树下, 这样面板可以固定到其中之一 页:1 没有发布媒体查询;自动跟踪是消费者的电话, 与devslab.kr的切换相同.
-   **原始调色板不在CSS中.** 组件可能只使用语义 (spec §3.1); CSS不发运的东西不能被硬码所反对. 调色板值可用自 `tokens.ts` 用于绘图-定义代码.
-   **尾风取名.** 颜色名称保留语义路径 : `bg-bg-brand`, (中文(简体) ), `text-text-primary`, (中文(简体) ), `border-border-default`平起平起 ("品牌") 碰撞—— `color.bg.brand` 财务报告和审定财务报表 `color.text.brand` 是不同的价值观. 间距没有被覆盖 : Tailwind 默认的四分之一矩格已经 等同 DDS 4px 比例尺 (`p-1`\=4px (英语) `p-16`\=64px; DS 数据交换 `space.2` =: `p-0.5`) (中文(简体) ).

## 脚本

-   `pnpm build` — 样式词典 v4 解析 `tokens/*.json`; 明确 格式化器发送文物( 未知) `$type` 失败的构建).
-   `pnpm check` 符号 JSON 验证(叶子形状,参考分辨率, 光/暗平,值形状) + `tsc --strict` 在生成的TS上.

重罚级 `pnpm verify` 额外运行 `scripts/check-docs-sync.mjs`, (中文(简体) ), 当 CI 失败时 `docs/design-system*.md` 或者说 `preview/index.html` 漂移 从符号值.

## 常见问题

### @devslab/dds-tokens 是什么？

DDS \(DevsLab Design System\) 设计符号——一个JSON源,为CSS, Tailwind, TypeScript/RN和Ionic所建

### 如何安装 @devslab/dds-tokens？

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

### @devslab/dds-tokens 支持 TypeScript 吗？

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

### @devslab/dds-tokens 支持 ESM 还是 CommonJS？

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

### @devslab/dds-tokens 可以商用吗？

@devslab/dds-tokens 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @devslab/dds-tokens 的下载量有多少？

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

### @devslab/dds-tokens 还在维护吗？

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