# @daikin-oss/dds-tokens 中文文档

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

版本：2\.0\.0
npm 元数据更新时间：2026-09-01T09:30:03.535Z
中文译文更新时间：2026-11-11T08:59:34.253Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：476 kB，68 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-05-31T20:50:53.460Z
- 最新版本发布：2026-09-01T09:30:03.147Z
- 近 30 天下载量：2880（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 11 个）

## 中文简介

DDS 设计符号定义

## 安装

```sh
npm install @daikin-oss/dds-tokens
```

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

## README

# 脚趾

这个软件包为戴金设计系统(DDS)提供多种格式的设计标志:

-   **JS/Type 脚本**: 具有类型脚本声明的无害环境管理和通用JS模块
-   **支助科**: CSS 自定义属性( CSS 变量)
-   **常设委员会**: 用于灵活整合的混音器
-   **尾风 CSS v4**: Tailwind CSS 集成的主题文件
-   **贾森**: 用于工具和集成的调试元数据

**可用主题 :**

-   品牌: `Daikin` 财务报告和审定财务报表 `AAF`
-   颜色方案 : `Light` 财务报告和审定财务报表 `Dark` 每个品牌的模式
-   密度 : `Default` 财务报告和审定财务报表 `Compact` 规模,独立于品牌/颜色计划

> \[注\] 品牌/颜色和密度是独立的轴,每个轴被分割成独立的文件. 您必须导入 **两者** 一个色彩主题文件和一个密度文件来注册一些组件依赖的所有 CSS 变量.

对于完整的输出文件列表,请检查 `build` 安装后文件夹 .

## 使用量

安装软件包 :

```sh
npm install @daikin-oss/dds-tokens
```

### 导入 CSS

```js
import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css";
```

或者说

```css
@import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");
```

此导入所有设计符作为 CSS 自定义属性 `:root` 选择器.

密度代币(为高能控件的尺寸)与品牌/彩色CSS文件相分离,可以独立导入,再与任何品牌/彩色主题相组合:

```css
@import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");
@import url("@daikin-oss/dds-tokens/css/density/Compact/variables.css");
```

可用密度文件 :

-   `css/density/Default/variables.css`
-   `css/density/Compact/variables.css`

### 导入 SCSS 混音器

SCSS混接器需要SCSS编译器,但它们在CSS变量的部署位置上提供了灵活性.

导入全部主题 :

```scss
@use "pkg:@daikin-oss/dds-tokens/scss/mixins" as dds-tokens;

:root {
  @include dds-tokens.daikin-Light-variables;
}

:root[data-theme="aaf"] {
  @include dds-tokens.aaf-Light-variables;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include dds-tokens.daikin-Dark-variables;
  }

  :root[data-theme="aaf"] {
    @include dds-tokens.aaf-Dark-variables;
  }
}
```

导入单个主题 :

```scss
@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Light/mixins" as daikin-Light;
@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Dark/mixins" as daikin-Dark;

:root {
  @include daikin-Light.variables;
}

:root.dark {
  @include daikin-Dark.variables;
}
```

密度混合剂可以采用同样的方式,独立于品牌/颜色主题:

```scss
@use "pkg:@daikin-oss/dds-tokens/scss/density/Default/mixins" as density-Default;
@use "pkg:@daikin-oss/dds-tokens/scss/density/Compact/mixins" as density-Compact;

:root {
  @include density-Default.variables;
}

:root[data-density="compact"] {
  @include density-Compact.variables;
}
```

### 尾风 CSS v4 集成

此软件包提供 Tailwind CSS v4 主题文件,将 DDS 令牌映射到 Tailwind CSS 变量.

#### 共同主题文件(主题不可判断)

这个 `tailwind4.css` 文件提供了与任何 DDS 主题合作的主题不可知映射 :

```css
@import "@daikin-oss/dds-tokens/tailwind4.css";
```

此文件使用 `@theme inline` 和参考 DDS CSS 变量,不含倒数。 您必须单独装入一个 DDS 主题 CSS 文件以提供实际符号值 .

示例

```css
@import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
@import "@daikin-oss/dds-tokens/css/density/Default/variables.css";

@import "@daikin-oss/dds-tokens/tailwind4.css";
```

#### 主题文件

您也可以使用针对主题的 Tailwind CSS 文件,其中包括倒置值:

```css
@import "@daikin-oss/dds-tokens/css/daikin/Light/tailwind4.css";
@import "@daikin-oss/dds-tokens/css/density/Default/tailwind4.css";
```

可用文件 :

-   `css/daikin/Light/tailwind4.css`
-   `css/daikin/Dark/tailwind4.css`
-   `css/aaf/Light/tailwind4.css`
-   `css/aaf/Dark/tailwind4.css`
-   `css/density/Default/tailwind4.css`
-   `css/density/Compact/tailwind4.css`

使用这些文件 `@theme` (不是内置的)带有倒置值,允许它们独立工作而不需要单独的DDS主题CSS文件.

#### 可变映射

DDS 符號被映射到 Tailwind CSS 根据符號類型的變數:

-   `color` → `--color-dds-*`
-   `spacing` → `--spacing-dds-*`
-   `borderRadius` → `--radius-dds-*`
-   `borderWidth` → `--border-width-dds-*`
-   `fontSize` → `--font-size-dds-*`
-   `fontWeight` → `--font-weight-dds-*`
-   `fontFamily` → `--font-family-dds-*`
-   `lineHeight` → `--line-height-dds-*`

示例输出 :

```css
/* Common file (build/tailwind4.css) */
@theme inline {
  --color-dds-color-blue-10: var(--dds-color-blue-10);
  --spacing-dds-space-100: var(--dds-space-100);
  /* ... */
}

/* Theme-specific file (build/css/daikin/Light/tailwind4.css) */
@theme {
  --color-dds-color-blue-10: var(--dds-color-blue-10, #ddf3fc);
  --spacing-dds-space-100: var(--dds-space-100, 4px);
  /* ... */
}
```

### 导入 JS 变量

```js
// ESM
import { colorBlue10 } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
import { inputHeight } from "@daikin-oss/dds-tokens/js/density/Default/variables.js";

// CommonJS
const {
  colorBlue10,
} = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
```

### 使用 JSON 文件

JSON 下的文件 `json/` 提供符号元数据,包括类型和值。 这些主要用于内部使用和工具整合.

可用文件 :

-   `json/daikin/Light/tokens.json`
-   `json/daikin/Dark/tokens.json`
-   `json/aaf/Light/tokens.json`
-   `json/aaf/Dark/tokens.json`
-   `json/density/Default/tokens.json`
-   `json/density/Compact/tokens.json`

文件结构 : `{ "<token name>": ["<token value>", "<style-dictionary token type>", "<tokens-studio token type>" | null] }`

示例

```json
{
  "color-blue-10": ["#ddf3fc", "color", null],
  "space-100": ["4px", "dimension", "spacing"]
}
```

此外,源主题JSON文件(位于 `themes/`)在软件包内的同一路径上发布,用于高级使用案例.

## 常见问题

### @daikin-oss/dds-tokens 是什么？

DDS 设计符号定义

### 如何安装 @daikin-oss/dds-tokens？

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

### @daikin-oss/dds-tokens 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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