# @dloizides/design-tokens 中文文档

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

版本：1\.20\.0
npm 元数据更新时间：2026-11-10T14:49:41.934Z
中文译文更新时间：2026-11-12T12:47:19.524Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：438 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：0 个
- 首次发布：2026-07-09T10:17:26.315Z
- 最新版本发布：2026-11-10T14:49:41.601Z
- 近 30 天下载量：3595（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

Dloizides.com 组合的框架-不可知性设计-Token SURCE. 每个app(aml / erevna / katalogos),每个app的CurRENT值中以字节表示种子,以三种形式从一个来源释放出来: CSS自定义属性(:root)

## 安装

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

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

## README

# @dloizides/ 设计指针

框架不可知性 **设计脚本源** 用于 dloizides.com 组合——跨高架 统一字 (任务#78). 每个应用程序一个打入的符号集,种子 **每个应用程序当前中的字节换字节 数值**,在 **三个表格来自一个来源**。 。 。 .

> **#1规则——保留行为取出,不是重新设计.** 每一个预设的镜像 应用程序 已存在的外观。 采用此软件包更改 **无** 视觉 运行时间测试证实 RN 输出深等同应用程序当前 `DEFAULT_THEME_CONFIG` 和AML CSS复制 `ui.css`是因为 `:root` 逐字记录.

只值—— **无组件**。 (共享反应组件位于 `@dloizides/ui-layout`, (中文(简体) ), `ui-forms`, (中文(简体) ), `ui-feedback`, (中文(简体) ), `ui-icons`, (中文(简体) ), `ui-tables`. ) (中文(简体) )

## 四个输出表

一个 `DesignTokens` 每个应用程序的对象输入四个纯发射器:

| 表单 | 发送器 | 消费者堆栈 | 产出 |
| --- | --- | --- | --- |
| **(a) CSS定制属性** | `toCssVars(tokens, names, opts?)` | Stack-A 香草-JS(AML控制台) | (单位:千美元) `:root { --…: …; }` 字符串( + 可选的暗模式块) |
| **(b) RN-web主题对象** | `toRnTheme(tokens)` | RN-web (erevna, katalogos) (英语) | (单位:千美元) `TenantThemeConfig`\- 相容对象 |
| **(c) 预设尾风** | `toTailwindPreset(tokens)` | DOM 反应( 同步主题 Studio) | `{ theme: { extend: { colors, borderRadius, boxShadow, fontFamily } } }` |
| **(d) 共享UI工具包主题** | `toUiTheme(tokens, mode?)` | 网上的RN网络 `@dloizides/ui-*` 工具包(伊克诺斯语、克菲语) | (单位:千美元) `UiTheme` 页:1 `ui-feedback`是因为 `UiProvider` |

```ts
import {
  AML_TOKENS, EREVNA_TOKENS, KATALOGOS_TOKENS, PRESETS,
  toCssVars, toRnTheme, toTailwindPreset, toUiTheme,
  AML_CSS_VAR_NAMES, DEFAULT_CSS_VAR_NAMES,
} from '@dloizides/design-tokens';

// (a) AML console — reproduces wwwroot/shared/ui.css :root exactly
const css = toCssVars(AML_TOKENS, AML_CSS_VAR_NAMES);

// (b) RN-web — drop in as the tenant-theme fallback (deep-equals the current default)
const rnDefault = toRnTheme(EREVNA_TOKENS);

// (c) DOM-React ThemeStudio — spread into tailwind.config.presets
const tw = toTailwindPreset(KATALOGOS_TOKENS);

// (d) Shared UI kit — hand straight to <UiProvider theme={…}>
const uiTheme = toUiTheme(MY_TOKENS);
```

### `toUiTheme` 是LOSSLES 载体

`toUiTheme` 之所以存在,是因为应用程序的天真投影是手写的—— `value => ({ '100': v, '500': v, '700': v })` —— 缩放到一个值, 无声 放弃更深的品牌步骤和每个状态背景 一个供货商这样喂养 无法复制它创建的调色板, 也就是停止共享组件 (单位:千美元)`StatCard`, (中文(简体) ), `ThemedTextInput`, (中文(简体) ), `Field`从在消费的应用软件中渲染出品牌.

每个符牌都落在一个可地址的槽里, 所以一个应用程序可以将整个调色板放回 现场提供者,而不是保留静态平行副本:

| 脚本 | 槽 |
| --- | --- |
| `primary` 编号 : `secondary` 编号 : `accent` | `palette.primary` 编号 : `.secondary` 编号 : `.accent` 时间 `UI_MAIN_STEP` |
| `onBrand` | `palette.onBrand` |
| `light.surfaceMuted` (或 `dark.*`单位 `mode`(中文(简体) ) | `palette.surfaceMuted` |
| `semantic.success` . | `semantic.success` 时间 `UI_MAIN_STEP` |
| `semantic.successBg` . | `semantic.success` 时间 `UI_TINT_STEP` |

这个 `UiTheme` 形状被宣告 **结构** 软件包中( 如 `RnThemeConfig` 声明 `TenantThemeConfig`),所以零依赖性/零对等保证持有:符号源 从不依赖它提供的装备.

## 每个应用程序预设

每个预设都来自该应用当前真实的源头:

| 预设 | 种子从 | 页:1 |
| --- | --- | --- |
| `EREVNA_TOKENS` | `erevna-web/src/theme/presets/default.ts` + 键 `theme/utils/palette.ts` | 小学 `#005f73`中学 `#94d2bd`重音 `#008d5c`; 完整的光+暗模式 |
| `KATALOGOS_TOKENS` | `katalogos-web/src/theme/presets/default.ts` | 目前 **不变** 以列芙娜为首;彼此分离,以便彼此分歧 |
| `AML_TOKENS` | `PROOViD/AMLService/.../wwwroot/shared/ui.css` `:root` | 品牌 `#4f46e5`; 暗的app- shell + 轻工作空间 + 判决调色板 + radi/shadows/fonts |
| `INTERVIEWPREP_TOKENS` | `InterviewPrep/sites/portal/theme.css` (暗处) `:root` + 键 `[data-theme='light']`(中文(简体) ) | 发射 `toCssVars(INTERVIEWPREP_TOKENS, INTERVIEWPREP_CSS_VAR_NAMES, { lightSelector: ":root[data-theme='light']" })` (1.12.0);每个模式 `brandFill`编号 :`dangerFill`/... 携带站点颜色 |

RN 预设携带 **没有** `typography`编号 :`radii`编号 :`shadows`编号 :`extensions` ——RN主题没有 用于今天的集成代号,所以它们被省略(无出-零变化). 反洗钱 预设搭载了更丰富的超集(暗相的应用壳,墨水尺度,判决调色板,光线,阴影, 字体),输入其 `extensions` 组合.

## FINREG 模块颜色`FINREG_MODULE_COLORS`页:1

FINREG是一种多单元产品(支付/会计/客户关系管理)。 临时 **EDA 数据** 标志绑定 每个模块的颜色——三个轨道 _为:_ 三个模块——颜色读作模块 身份而不是一个应用的品牌 `primary`因此,这些标志坐 **旁边** 页:1 每个应用程序预设, 不在其中 :

| 模块 | `base` (填补) | 红色 | `onWhite` (A文本/icon) (中文(简体) ) | 红色 |
| --- | --- | --- | --- | --- |
| 付款(氰) | `#4FD8F0` | 1.69:1 | `#0C7D91` | 4.82:1 ✓ |
| 会计(货币) | `#E85FBF` | 3.08:1 ✗ | `#D11E9B` | 4.81:1 \* \* |
| CRM( 紫外线) | `#7B8FF7` | 2.95:1 ✗ | `#4763F4` | 4.82:1 ✓ |

这个 `base` 斧头是一个 **决定** 设计输入(标志),转写为逐字记录. 他们很轻 填充 – 没有清除 WCAG AA 4.5: 1 白文本层 – 所以任何画出模块颜色的东西 作为 **文字或白色上的图标** 用途 `onWhite`黑暗的同一个人 这个 `onWhite` 得出了数值(最浅的阴影仍然清晰出AA, 略微超过 两个半个都由 `finregModules.test.ts` 比率,因此 aA下面的漂移失败了 消费者读了信物 不复宣说正文`no-raw-color-literal`) (中文(简体) ).

## 运动符号( A)`DEFAULT_MOTION`页:1

每个传送门都统一运动,所以——与颜色不同——有一个发送的默认 每个预设一个以上. `DEFAULT_MOTION` 携带 `durations` (数量)和 `easings`数字 :

| 会期 | 分钟 | 缓解 | 控制点 | 密码 |
| --- | --- | --- | --- | --- |
| `instant` | 0 个 | `standard` | `[0.2,0,0,1]` | `cubic-bezier(0.2,0,0,1)` |
| `fast` | 140国 | `decelerate` | `[0,0,0,1]` | `cubic-bezier(0,0,0,1)` |
| `base` | 200个 | `accelerate` | `[0.3,0,1,1]` | `cubic-bezier(0.3,0,1,1)` |
| `slow` | 三百块 |  |  |  |

`instant` (0)是减动倒塌目标. 每一次放松都带 **两者** 网络 `css` `cubic-bezier(...)` 字符串和 `bezier` `[x1,y1,x2,y2]` 控制点,所以 `@dloizides/ui-motion` 能够构建匹配的 RN `Easing.bezier(...)` 和网络+同一曲线上的本地动画. `motion` 实值 选项字段 `DesignTokens` (一个预设的Maybe 覆盖它),所以现有的预设/emiters是 字节相同.

## 符号形状( 与 `TenantThemeConfig`(中文(简体) )

这个 **核心项目** 故意镜像字段 `@dloizides/tenant-theme-web`是因为 `TenantThemeConfig` (单位:千美元)`primary`, (中文(简体) ), `secondary`, (中文(简体) ), `accent`, (中文(简体) ), `semantic`, (中文(简体) ), `light`, (中文(简体) ), `dark`, (中文(简体) ), `typography`, (中文(简体) ), `branding`这样 租户主题在预设的顶端 —— 租户blob 和预设的演讲 相同的字段名称。 字段核心无法表达( 暗的应用软件壳、 墨水尺度、 制裁) 判决三合一) `extensions` 组并记录为 **堆叠 A 超级集**, (中文(简体) ), 不属于 `TenantThemeConfig` 合同.

3个加法(1.2.0)是核心而不是扩展,因为任何应用软件都需要它们 状态徽章或已填入的品牌按钮——不是一叠:

| 外地 | 为什么它需要自己的空档 |
| --- | --- |
| `light.surfaceMuted` 编号 : `dark.surfaceMuted` | 内置表面(表头行、芯片、井) _退缩_· ; `surface` 财务报告和审定财务报表 `surfaceElevated` 两个电梯。 也没有替代品. |
| `onBrand` | 展望一个 `primary` 填满 对比合伙人 `primary`所以它就坐在旁边 而不是模式区 默认为白色; a **苍白** 初等要设. |
| `semantic.successBg` 编号 : `warningBg` 编号 : `errorBg` 编号 : `infoBg` | 一种地位是人为对比而挑选的,不能从其基础中产生,因此不能计算,必须携带. |

所有可选的, 和每个发射器发射它们 **仅限** 当一个预设宣布它们的时候, 预设是 前 1.2.0 生产字节相同的输出.

## 横店命名合同(# 78b)

不同的堆栈使用不同的CSS可变名称来换取同一种符号. `toCssVars` 使用一个 **名称映射** (单位:千美元)`CssVarNames`表示哪个 CSS 可变每个符号字段为; 映射出字段 改为 `undefined` 被跳过。 两艘地图船:

-   **`DEFAULT_CSS_VAR_NAMES`** 克巴克(克巴克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克`--primary`, (中文(简体) ), `--background`, (中文(简体) ), `--radius`,(......), 有个暗地里的街区 为新鲜的消费者接受这些.
-   **`AML_CSS_VAR_NAMES`** ——AML控制台存在 `ui.css` 名字,所以没有什么变化.

### AML 名称映射表( 核心 ) `ui.css` 变量)

| 脚本字段 | AML CSS var (英语) | 说明 |
| --- | --- | --- |
| `primary` | `--brand` |  |
| `secondary`, (中文(简体) ), `accent` | _(晕倒)_ | AML为单品牌; `ui.css` 从来没有读过 |
| `semantic.success/warning/error` | _(通过) `--ok`编号 :`--warn`编号 :`--bad`(中文(简体) )_ | 排放量 `verdict` 扩展 |
| `semantic.info` | _(晕倒)_ | 无 AML 变量 |
| `light.background` | `--bg` |  |
| `light.surface` | `--surface` |  |
| `light.surfaceElevated` | _(通过) `--surface-2`(中文(简体) )_ | 从 `workspace.surfaceAlt` |
| `light.text` | _(通过) `--ink`(中文(简体) )_ | 从 `ink.base` |
| `light.textSecondary` | _(通过) `--ink-soft`(中文(简体) )_ | 从 `ink.soft` |
| `light.border` | `--line` |  |
| `light.divider` | _(晕倒)_ | AML 重用 `--line` |
| `dark.*` | _(晕倒)_ | AML 没有光/暗切换;它的暗壳是 `shell` 扩展 `:root` |
| `radii.{xs,sm,md,lg,pill}` | `--r-xs`, (中文(简体) ), `--r-sm`, (中文(简体) ), `--r`, (中文(简体) ), `--r-lg`, (中文(简体) ), `--r-pill` |  |
| `shadows.{sm,md,pop}` | `--sh-1`, (中文(简体) ), `--sh-2`, (中文(简体) ), `--sh-pop` |  |
| `typography.fontFamily` 编号 : `monoFamily` | `--font` 编号 : `--mono` |  |
| `extensions.shell.*` | `--shell`, (中文(简体) ), `--shell-2`, (中文(简体) ), `--shell-line`, (中文(简体) ), `--on-shell`, (中文(简体) ), `--on-shell-dim` |  |
| `extensions.brand.*` | `--brand-press`, (中文(简体) ), `--brand-soft`, (中文(简体) ), `--brand-ring` |  |
| `extensions.ink.*` | `--ink`, (中文(简体) ), `--ink-soft`, (中文(简体) ), `--ink-faint`, (中文(简体) ), `--ink-2` |  |
| `extensions.workspace.*` | `--surface-2`, (中文(简体) ), `--line-strong` |  |
| `extensions.verdict.*` | `--ok*`, (中文(简体) ), `--warn*`, (中文(简体) ), `--bad*` (基准/软/链接) |  |

### 公开的命名决定(在更广泛通过之前需要人类呼吁)

保守地解决了这些 以保证零变化, 但人类应该确认 拟长期语义:

1.  **反洗钱 `secondary`编号 :`accent`** ——AML拥有单一品牌. 预设的镜像 `--brand` 都这样 核心形状是完整的,但是 `ui.css` 两者皆无。 如果AML获得真正的二级 品牌,设置在这里.
2.  **反洗钱 `dark` =应用壳.** AML有一个暗壳 在一个光的工作空间, **没有** (单位:千美元) 轻/暗 _模式切换_预设种子 `dark` 从外壳中取出,使外形完整 aML 名称地图省略 `dark*` 故不发出阴道 `shell` 扩展 `:root`) (中文(简体) ). 如果引入了真实的AML 暗模式,则需要重新审视.
3.  **`semantic.info`** - AML没有 `info` 颜色; 镜像 `--brand`。在依赖之前确认 `info` 在 AML 中.
4.  **核 `radii`编号 :`shadows`。 。 。 .** RN应用程序今天没有集中半径/阴影符号,所以RN 预设省略。 如果RN稍后采用半径/阴影尺度,则决定是否应当共享 AML 的值或定义自己的值.

## 采用(单独的任务——本套装舰只价值)

这个软件包是 **没有** 修改任何消耗性应用。 收养情况另行跟踪:

-   AML: 替换手写 `:root` 内 `ui.css` 与 `toCssVars(AML_TOKENS, AML_CSS_VAR_NAMES)` 输出.
-   erevna/katalogos:进口 `toRnTheme(EREVNA_TOKENS)` 作为 `defaultThemeConfig` 倒计时.
-   主题Studio: 传播 `toTailwindPreset(...)` 输入 `tailwind.config`是因为 `presets`。 。 。 .

## 脚本

`npm run build` (tsup → CJS+ESM+d.ts), (中文(简体) ), `npm test` (比例,100%), `npm run lint`, (中文(简体) ), `npm run typecheck`。通过 `./publish.ps1 patch|minor|major`。 。 。 .

## 常见问题

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

Dloizides\.com 组合的框架-不可知性设计-Token SURCE\. 每个app\(aml / erevna / katalogos\),每个app的CurRENT值中以字节表示种子,以三种形式从一个来源释放出来: CSS自定义属性\(:root\)

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

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

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

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

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

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

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

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

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

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

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

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

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

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