# @eos-ui/tokens 中文文档

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

版本：0\.20\.0
npm 元数据更新时间：2026-10-28T02:57:44.312Z
中文译文更新时间：2026-11-13T19:14:34.621Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40eos-ui/tokens
原文对照：https://npmcn.com/package/%40eos-ui/tokens/?lang=original
项目主页：https://eos.dame.gg/
源码仓库：https://github.com/Dame-G/eos

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

- 包体积（解压后）：271 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- 首次发布：2026-10-19T06:14:56.157Z
- 最新版本发布：2026-10-28T02:57:43.998Z
- 近 30 天下载量：5783（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：33（近 12 个月 33 个）

## 中文简介

eos设计令牌:CSS自定义属性,打入值和有对比检查的主题生成器.

## 安装

```sh
npm install @eos-ui/tokens
```

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

## README

# @ eos- ui/ 纸箱

Eos后面的设计符号(颜色、间隔、半径、阴影、类型、大小、运动、分层)作为CSS自定义属性、打出值和 `defineTheme()`,它从品牌颜色中构建一个主题,并检查每一个许诺的对比对.

```bash
npm install @eos-ui/tokens
```

```ts
import { defineTheme } from "@eos-ui/tokens";

const theme = defineTheme({ name: "clinic", brand: "#8a2be2", accent: "#2e7d32", radius: "round" });
theme.issues; // contrast pairs that fail (empty when sound)
theme.css(); // the theme as CSS custom properties, for the server
const remove = theme.apply(document.documentElement); // or set them in the browser; remove() takes them off
```

```css
/* the default tokens as a stylesheet: the light theme, with prefers-contrast: more handled */
@import "@eos-ui/tokens/tokens.css";

/* the same, and prefers-color-scheme: dark too */
@import "@eos-ui/tokens/tokens.auto.css";
```

使用 `tokens.auto.css` 只有在您的页面地面也遵循了这个方案时:它使得每个组件在黑暗的操作系统下都变得黑暗,所以后面的硬码白页看起来会破损. `tokens.css` 保持轻.

```ts
theme.dtcg(); // the same tokens as W3C Design Tokens JSON
```

所有变量都是前缀 `--e-` (单位:千美元)`--e-primary`, (中文(简体) ), `--e-space-4`) (中文(简体) ). [文档](https://eos.dame.gg/)麻省理工学院有执照.

## 投入

`defineTheme()` 取下方输入并发出每个符号。 任何令牌也可以在 `tokens`胜过一切衍生物 颜色输入需要十六进制(3、4、6或8位数字), `rgb()`, (中文(简体) ), `color-mix(in srgb, ...)`, (中文(简体) ), `black` 或者说 `white`; 阿尔法被丢弃,无法读取的颜色被忽略并列在 `warnings`。 。 。 . `name` 标记主题( e)`data-e-theme`),以及 `strict` 扔出一个对比失败, 而不是在其中列出 `issues`。 。 。 .

| 投入 | 衍生物 |
| --- | --- |
| `brand`, (中文(简体) ), `accent` | `brand`, (中文(简体) ), `brand-accent`, (中文(简体) ), `primary`, (中文(简体) ), `secondary`, (中文(简体) ), `secondary-soft`, (中文(简体) ), `surface-tint` 编辑 `scrim`。 。 。 . `accent` 只能是次要行动 绝不是成功的基调 |
| `danger`, (中文(简体) ), `warning`, (中文(简体) ), `success` | `danger`, (中文(简体) ), `on-danger`, (中文(简体) ), `danger-soft`, (中文(简体) ), `warning`, (中文(简体) ), `warning-soft`, (中文(简体) ), `success`, (中文(简体) ), `success-soft` |
| `background`, (中文(简体) ), `surface`, (中文(简体) ), `foreground` | 理由, `ink`, (中文(简体) ), `muted`, (中文(简体) ), `border`, (中文(简体) ), `border-strong`。暗色表面会升起动作颜色 |
| `preset` `"paper" | "ink" | "quiet"` | `elevation`, (中文(简体) ), `strokes`, (中文(简体) ), `radius`, (中文(简体) ), `depth` 财务报告和审定财务报表 `motion` 一起来 你自己的作品赢了. `paper` 是默认的外观, `ink` 有胆量,锋利和快活 在3px板上, `quiet` 1px平板上是圆和温和的 |
| `fonts`, (中文(简体) ), `radius` | `font-sans`, (中文(简体) ), `font-mono`, (中文(简体) ), `font-script`, (中文(简体) ), `radius-sm` 改为 `radius-lg`。 。 。 . `radius` 是一个预设的, px 中的一个基数( s)`md`· ; `sm` 半个, `lg` 双倍)或 `{ sm, md, lg }` |
| `textScale`, (中文(简体) ), `spaceScale` | `text-xs` 改为 `text-4xl` 图标、复选框和相机框(`textScale`,在浏览器自身字体大小上:这些符号为rem; `space-1` 改为 `space-16` ,并通过提及 `gap-*`, (中文(简体) ), `pad-*` 财务报告和审定财务报表 `gutter` 指针( a)`spaceScale`. 1 是默认值 |
| `strokes` `{ hair, focus }` | `stroke-hair`, (中文(简体) ), `stroke-card`, (中文(简体) ), `stroke-edge`, (中文(简体) ), `stroke-focus` (也是重点差距), `stroke-focus-gap-field`笔 `stroke-edge` 或者说 `stroke-card` 结束 `tokens` |
| `contrast` `"standard" | "high" | "auto"` | `high` 套装 `border` 财务报告和审定财务报表 `border-strong` 改为 `ink`, (中文(简体) ), `muted` 15:1时,为中性 `surface-tint` 更阴暗 `scrim`。 。 。 . `auto` 应用到 `prefers-contrast: more` |
| `motion` `"default" | "snappy" | "gentle"` | `duration-tap`, (中文(简体) ), `duration-fade`, (中文(简体) ), `duration-move`, (中文(简体) ), `easing-out`. 减少运动已经停止一切 |
| `elevation` `"outline" | "lifted" | "bold"` | `shadow-frame`, (中文(简体) ), `shadow-well`, (中文(简体) ), `shadow-float`, (中文(简体) ), `shadow-paper`。一个相框是一个冲出环和一个浮起的面板 `lifted` 并用纸板打出牌来, `bold` 画出2px环和更深的井. 阴影随来 `background` |
| `scheme` `"light" | "dark" | "auto"`, (中文(简体) ), `dark` | `auto` 保持主题亮度并应用 `dark` (默认表面) `#10151a`下 `prefers-color-scheme: dark` |
| `density` `"comfortable" | "compact"` | `compact` 比额表 `space-*` 改为0.75(如: `gap-*`, (中文(简体) ), `pad-*` 财务报告和审定财务报表 `gutter` 和设定 `control-height` 到44px水龙头目标(`2.75rem`· ; `chip-height` (原始内容存档于2018-10-12). 22px. 小一点 `controlHeight` 提出并报告 |
| `depth` | `depth` 在px, 从它 `depth-thin` (一半,至少1px)和 `depth-bold` (双) |
| `controlHeight` | `control-height`, (中文(简体) ), `chip-height` |

`derivedFrom`, (中文(简体) ), `constants` 财务报告和审定财务报表 `inputTokens` 说明哪些输入驱动每个符号,哪些符号是固定的. `themeInputs` 列出来自 `ThemeInput`,用于文档和工具.

## 键层

一个符号被命名 `<family>-<role>[-<step>]`数字 : `space-4`, (中文(简体) ), `gap-tight`, (中文(简体) ), `stroke-edge`, (中文(简体) ), `shadow-float`, (中文(简体) ), `depth-thin`, (中文(简体) ), `z-modal`, (中文(简体) ), `text-sm`大小是它测量的东西,然后是尺寸和步骤: `control-height`, (中文(简体) ), `icon-size-md`, (中文(简体) ), `panel-width-sm`颜色是其作用,然后是其状态或步骤: `primary`, (中文(简体) ), `primary-hover`, (中文(简体) ), `danger-soft`, (中文(简体) ), `surface-tint`。步骤运行 `sm`, (中文(简体) ), `md`, (中文(简体) ), `lg`, (中文(简体) ), `xl`和组件 `size` 读取它自己名字的标志.

-   **语义相间.** `gap-tight`, (中文(简体) ), `gap-snug`, (中文(简体) ), `gap-base`, (中文(简体) ), `gap-loose`, (中文(简体) ), `gap-section`, (中文(简体) ), `pad-chip`, (中文(简体) ), `pad-control`, (中文(简体) ), `pad-control-sm`, (中文(简体) ), `pad-cell`, (中文(简体) ), `pad-card`, (中文(简体) ), `pad-panel`, (中文(简体) ), `gutter-min` 财务报告和审定财务报表 `gutter` 名称 `space-N` 缩放。 每一个都是指 `space-N`这样 `spaceScale` 财务报告和审定财务报表 `density` 通过它们到达每个组件. [捐款](https://npmcn.com/package/CONTRIBUTING.md) 拥有何时使用的表格.
-   **类型.** `text-*` 尺寸, `control-height`, (中文(简体) ), `chip-height` 和图标,检查 和相机框在雷姆. `tap` 保持44px的状态. `leading-none`, (中文(简体) ), `-tight`, (中文(简体) ), `-snug`, (中文(简体) ), `-normal`,以及 `leading-helper` 财务报告和审定财务报表 `leading-chip` (a) 20px线用于 `text-sm` 财务报告和审定财务报表 `text-xs`在4px网格上,是行高; `tracking-label` (上层标签)和 `tracking-tight` (播放类型和大数字)字母间隔. 每个记录的样式都是 `font` 快捷键 : `font: var(--e-type-kicker)` (单位:千美元)`type-h1` 改为 `type-h6`, (中文(简体) ), `type-deck`, (中文(简体) ), `type-body`, (中文(简体) ), `type-small`, (中文(简体) ), `type-helper`, (中文(简体) ), `type-button`, (中文(简体) ), `type-kicker`, (中文(简体) ), `type-meta`, (中文(简体) ), `type-count`, (中文(简体) ), `type-numeral`, (中文(简体) ), `type-numeral-l`) (中文(简体) ).
-   **平板与互动.** `depth`, (中文(简体) ), `depth-thin` 财务报告和审定财务报表 `depth-bold` 是升起的边缘的厚度 `depth` 组); `slab-ink` (与 `border-strong`)是中性的颜色. `shadow-sink` 是在静静的控制器内被切开的板子. `shadow-ring-hover` 财务报告和审定财务报表 `shadow-ring-press` 是徘徊的发线环 和新闻状态,绘制在 `stroke-edge`,与 `wash-hover`, (中文(简体) ), `wash-press` (一个相对相配的悬浮对)和 `transition-state`。 。 。 . `stroke-underline-offset` 是每个下划线文本中的空白.
-   **尺寸.** `icon-size-sm` 改为 `icon-size-xl` 框为 `EIcon` `size` `sm` 改为 `xl`,以及 `avatar-size-sm` 改为 `avatar-size-lg` 联合国 `EAvatar`。 。 。 . `panel-width-sm`, (中文(简体) ), `-md` 财务报告和审定财务报表 `-lg` (28,32,36rem)是对话框,抽屉,弹出器和土司的宽度; `container-width-sm`, (中文(简体) ), `-md` 财务报告和审定财务报表 `-lg` (40、60、80雷姆) `EContainer`· ; `term-width` 标签栏 `EDescriptionList`· ; `list-max-height` 选项列表的高度 ; `shell-width` 财务报告和审定财务报表 `shell-rail` 这是 `EAppShell` 柱子及其侧线; `radius-round` 是圆相.
-   **行动.** `duration-fade` 坐在中间 `duration-tap` 财务报告和审定财务报表 `duration-move`· ; `easing-enter` 财务报告和审定财务报表 `easing-exit` 是用来进出的 所有三个持续时间都在 `prefers-reduced-motion`。 。 。 .
-   **层层.** `z-raised`, (中文(简体) ), `z-sticky` 财务报告和审定财务报表 `z-focus` a. 命令一个组件内的部件; `z-header` 将粘贴的应用程序头放在上面; `z-modal`, (中文(简体) ), `z-popover`, (中文(简体) ), `z-toast`, (中文(简体) ), `z-tooltip` 财务报告和审定财务报表 `z-skip` 位于页面上方.
-   **颜色.** `info`, (中文(简体) ), `info-soft`, (中文(简体) ), `link`, (中文(简体) ), `focus-field` 财务报告和审定财务报表 `slab-ink` 是其他颜色的别名, 保留了这个主题可以将它们分开 . `primary-soft` 是您所在的平面品牌( 一个选中的标签, 当前导航项) . `success` 是它自己的颜色,所以是一个品牌 `accent` 永远不要让成功再次成为现实.
-   **间距尺度.** `space-5`, (中文(简体) ), `space-10` 财务报告和审定财务报表 `space-16` 是没有组件使用的、为你自己的布局而保留的大小步骤.

## 检查、警告和解释

`theme.issues` 列出每个失败的已承诺的对比对 。 双人包括: `ink`, (中文(简体) ), `muted` 财务报告和审定财务报表 `primary` 在徘徊的、按住的和选定的填充物上, `muted` 在选择的亮点 和悬浮环对面表面. `color-mix()` 对已知的标志进行评价 `transparent` 躺在对地上 无法评估的一对( 未知的符号, 另一个颜色空间) 不被默默跳过: 它被命名于 `theme.warnings`,其中还列出了被忽略或调整的投入(一个不是正数的比额表,a `controlHeight` 根据紧凑的自来水目标,a `dark` 无 `scheme: "auto"`,在 `tokens`并用 `console.warn` 外部生产. `theme.explain("primary")` 说出一个迹象是什么决定的,哪个投入驱使它,以及你给谁的.

## 跟着访客

`scheme: "auto"` 财务报告和审定财务报表 `contrast: "auto"` 选择进入。 地基地标保持光线,标准主题. 每个变体都与其它主题一样产生(因此它经过对比检查并列在 `issues`),只有不同的符号在内部被放出 `@media (prefers-color-scheme: dark)`, (中文(简体) ), `@media (prefers-contrast: more)` 和两个一起. `color-scheme` 实值 `light` 在根部和根部 `dark` 在黑暗媒体查询中. `theme.alternates` 列出他们. `theme.apply()` 评估查询本身,并在更改时重新油漆,直到其返回的函数被调用. `themeVariant(theme, { dark, more })` 以物配主 `color-scheme` 使用这些设置的访客会看到一个设定标志本身的渲染器,以及 `darkVariant(input)` 给输入的阴暗变体.

```ts
defineTheme({ brand: "#8a2be2", scheme: "auto", contrast: "auto", dark: { surface: "#0e1117" } });
```

理由`background`, (中文(简体) ), `surface`, (中文(简体) ), `foreground`)从未被带入暗变体: give `dark` 那些它需要的东西.

每个主题的 CSS 也带有两个固定的覆盖. 下 `prefers-reduced-motion: reduce`, (中文(简体) ), `duration-tap`, (中文(简体) ), `duration-fade` 财务报告和审定财务报表 `duration-move` 为0.01毫米(`!important`所以他们击败了内含的标志 `apply()` 页:1 循环加载器必须关闭自己,因为0.01ms的循环会闪烁. 打印时,页面会使用屏幕显示的主题的光调色板(每个符号都会被放回深色或高相位变体),其中 `ink`,边框和地块黑白相间,所以一个组件不需要自己的打印颜色. `apply()` 在页上打印,并带有自己的主题调色板.

## 设计工具

`theme.dtcg()` 返回主题为 [W3C 设计托肯斯](https://www.designtokens.org/) JSON,按类别分类`color`, (中文(简体) ), `spacing`, (中文(简体) ), `layout`, (中文(简体) ), `radius`, (中文(简体) ), `shadow`, (中文(简体) ), `fontSize`, (中文(简体) ), `tracking`, (中文(简体) ), `leading`, (中文(简体) ), `size`, (中文(简体) ), `stroke`, (中文(简体) ), `depth`, (中文(简体) ), `duration`, (中文(简体) ), `easing`, (中文(简体) ), `zIndex`, (中文(简体) ), `weight`, (中文(简体) ), `type`, (中文(简体) ), `font`) (中文(简体) ). 默认主题也作为 `@eos-ui/tokens/tokens.dtcg.json`,准备导入 Tokens Studio for Figma 或提供样式词典.

-   引用另一个符号的符号变成别名: `"focus-ring": { "$value": "{color.ink}" }`。 。 。 .
-   颜色、尺寸、持续时间、立方位宽放、z-索引和字体堆放 `$type`。一个没有 DTCG 类型的值,例如堆叠的阴影或 `color-mix()`,保留其 CSS 字符串,没有 `$type`。 。 。 .
-   每个符号的用法是它的 `$description`。 。 。 .

## 常见问题

### @eos-ui/tokens 是什么？

eos设计令牌:CSS自定义属性,打入值和有对比检查的主题生成器\.

### 如何安装 @eos-ui/tokens？

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

### @eos-ui/tokens 支持 TypeScript 吗？

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

### @eos-ui/tokens 支持 ESM 还是 CommonJS？

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

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

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

### @eos-ui/tokens 可以商用吗？

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

### @eos-ui/tokens 的下载量有多少？

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

### @eos-ui/tokens 还在维护吗？

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