# @aurodesignsystem/design-tokens 中文文档

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

版本：9\.4\.3
npm 元数据更新时间：2026-11-07T02:12:53.486Z
中文译文更新时间：2026-11-07T05:21:37.083Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：5.6 MB，106 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：^22\.14\.0 \|\| \>= 24\.10\.0
- 运行依赖：0 个
- 首次发布：2023-09-13T17:26:45.646Z
- 最新版本发布：2026-11-07T02:12:52.740Z
- 近 30 天下载量：85476（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：108（近 12 个月 36 个）

## 中文简介

阿拉斯加航空 Air Auro 设计系统标识库

## 安装

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

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

## README

# 奥罗设计托肯斯

[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/AuroDesignTokens/testPublish.yml?branch=master&style=for-the-badge)](https://github.com/AlaskaAirlines/AuroDesignTokens/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/design-tokens.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/design-tokens) [![License](https://img.shields.io/npm/l/@aurodesignsystem/design-tokens.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)

## 概览

奥罗设计 Tokens是Auro设计系统的基础,为不同平台和执行提供了一致的设计价值. 这些标志为阿拉斯加航空公司和夏威夷航空公司品牌定义了颜色,打字,间隔等视觉属性.

## 安装

```bash
npm install @aurodesignsystem/design-tokens
```

## 快速启动

### CSS 自定义属性

对于大多数网络应用程序,建议使用 CSS 自定义属性:

```js
// In a React or similar application
import "@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css"
```

```html
<!-- In an HTML file -->
<link rel="stylesheet" href="node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css">
```

### 与萨斯

在与萨斯合作时:

```scss
@import "~@aurodesignsystem/design-tokens/dist/themes/alaska/primitives--alaska.scss";
```

### Java 脚本使用法

```js
import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/JSVariables--color.js';
```

## 可用主题

奥罗设计 Tokens 支持多个主题:

| 主题 | 说明 | 使用量 |
| --- | --- | --- |
| 阿拉斯加语Name | 目前阿拉斯加航空主题 | 阿拉斯加航空公司品牌接口 |
| 阿拉斯加经典 | 带有 Auro 经典值但最新符号名的过渡主题 | 仅针对移徙情况 |
| 阿摩斯语Name | 当前 Atmos 主题 | Atmos 品牌接口 |
| 夏威夷语 | 夏威夷航空主题 | 夏威夷航空公司品牌接口 |
| 奥罗经典 | 遗产主题(被贬) | 仅用于后向兼容 |

## 应用主题

使用 `data-aag-theme` 属性。 所有的孩子元素都会继承主题的设计符号.

```html
<html data-aag-theme="aag-theme-as">
  <!-- All content uses Alaska theme tokens -->
</html>
```

可用的主题代码 :

| 主题 | 属性值 |
| --- | --- |
| 阿拉斯加语Name | `aag-theme-as` |
| 阿拉斯加经典 | `aag-theme-asc` |
| 夏威夷语 | `aag-theme-ha` |
| 阿摩斯语Name | `aag-theme-atm` |

## 嵌入式主题

通过应用不同的主题可以嵌入主题 `data-aag-theme` 值到儿童元素。 子及其后人会使用被巢被子的主题的符号,而其余页面保留了母主题.

```html
<html data-aag-theme="aag-theme-as">
  <!-- Alaska theme -->
  <header>...</header>

  <section data-aag-theme="aag-theme-ha">
    <!-- Hawaiian theme within this section only -->
    <p>This content uses Hawaiian tokens.</p>
  </section>

  <!-- Back to Alaska theme -->
  <footer>...</footer>
</html>
```

## 部分主题覆盖( 只有颜色或类型)

主题被分割成 **颜色** 财务报告和审定财务报表 **打印** 象征团体。 您可以应用一个主题的一个方面而不通过附加来影响另一个方面 `-color` 或者说 `-type` 到属性值.

### 纯色覆盖

在保留父主题打字时应用主题的颜色符号 :

```html
<html data-aag-theme="aag-theme-as">
  <!-- Alaska color + Alaska typography -->

  <section data-aag-theme="aag-theme-ha-color">
    <!-- Hawaiian colors, but still Alaska typography -->
    <p>Hawaiian color palette with Alaska fonts.</p>
  </section>
</html>
```

### 仅限字法的覆盖

在保留父主题颜色的同时应用主题的打字符 :

```html
<html data-aag-theme="aag-theme-as">
  <!-- Alaska color + Alaska typography -->

  <section data-aag-theme="aag-theme-ha-type">
    <!-- Hawaiian typography, but still Alaska colors -->
    <p>Hawaiian fonts with Alaska color palette.</p>
  </section>
</html>
```

### 合并部分覆盖

您可以将部分选择器堆放在同一元素上, 从一个主题混合颜色, 从另一个主题混合打印 :

```html
<html data-aag-theme="aag-theme-as">
  <section data-aag-theme="aag-theme-ha-color">
    <div data-aag-theme="aag-theme-atm-type">
      <!-- Hawaiian colors + Atmos typography -->
    </div>
  </section>
</html>
```

## 文档

关于综合文件,请见我们:

-   [架构指南](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/architecture)
-   [主题指南](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/themes)
-   [移徙指南](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/migration)
-   [API 参考](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference)
-   [完整文档 - Auro Docs](https://auro.alaskaair.com/getting-started/developers/design-tokens)

## 软件包结构

Npm 软件包在 `./dist/` 按主题排列的目录.

## 捐款

请读我们的 [提供指南](https://npmcn.com/package/%40aurodesignsystem/design-tokens/.github/CONTRIBUTING.md) 详细介绍我们的行为守则和提交拉动请求的程序.

## 许可证

该项目根据Apache 2.0许可证颁发许可——见 [自由主义](https://npmcn.com/package/%40aurodesignsystem/design-tokens/LICENSE) 详细文件.

## 常见问题

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

阿拉斯加航空 Air Auro 设计系统标识库

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

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

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

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

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

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

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

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

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

@aurodesignsystem/design-tokens 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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