# @archetypeai/ds-lib-tokens 中文文档

规范地址：https://npmcn.com/package/%40archetypeai/ds-lib-tokens/

版本：0\.21\.0
npm 元数据更新时间：2026-10-30T15:14:58.331Z
中文译文更新时间：2026-11-06T14:24:57.427Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：50.3 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：tailwindcss ^4\.0\.0
- 首次发布：2026-03-10T07:21:41.810Z
- 最新版本发布：2026-10-30T15:14:58.156Z
- 近 30 天下载量：6928（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：64（近 12 个月 64 个）

## 中文简介

原型 AI 设计系统

## 安装

```sh
npm install @archetypeai/ds-lib-tokens
```

也可以使用：`pnpm add @archetypeai/ds-lib-tokens`、`yarn add @archetypeai/ds-lib-tokens`、`bun add @archetypeai/ds-lib-tokens`

## README

## @ archetypeai/ ds- lib- tokens (英语)

**尾风 v4 主题** 用于Archetype AI设计系统. 提供有设计系统组件口味的语义设计符号,彩色调色板和基底样式.

* * *

## 安装

```bash
npm install @archetypeai/ds-lib-tokens tailwindcss
```

* * *

## 使用量

在您的全球 CSS 中导入 Tailwind 之前的主题 :

```css
@import '@archetypeai/ds-lib-tokens/fonts.css'; /* optional → PP Neue Montreal (requires font files in static/fonts/) */
@import '@archetypeai/ds-lib-tokens/theme.css';
@import 'tailwindcss';
```

```svelte
<div class="bg-background text-foreground p-md border-border rounded-lg">
  Hello world
</div>
```

* * *

## 包含什么

| 特性 | 细节 |
| --- | --- |
| **语义符号** | OKLCH CSS 变量( 阴影样式) : `background`, (中文(简体) ), `foreground`, (中文(简体) ), `card`, (中文(简体) ), `popover`, (中文(简体) ), `primary`, (中文(简体) ), `secondary`, (中文(简体) ), `muted`, (中文(简体) ), `accent`, (中文(简体) ), `destructive`, (中文(简体) ), `border`, (中文(简体) ), `separator`, (中文(简体) ), `scrollbar`, (中文(简体) ), `scrollbar-track`, (中文(简体) ), `input`, (中文(简体) ), `ring`, (中文(简体) ), `chart-1`– 说吧 –`5`, (中文(简体) ), `sidebar`, (中文(简体) ), `table`, (中文(简体) ), `table-header`, (中文(简体) ), `table-section`, (中文(简体) ), `atai-neutral`, (中文(简体) ), `atai-good`, (中文(简体) ), `atai-warning`, (中文(简体) ), `atai-critical`, (中文(简体) ), `atai-always-black`, (中文(简体) ), `atai-always-white` |
| **品牌颜色** | 4平方 OKLCH 值, 无缩放 : `brand-babyblue`, (中文(简体) ), `brand-yellow`, (中文(简体) ), `brand-black`, (中文(简体) ), `brand-white` |
| **调色板** | 26个OKLCH坡道:Tailwind的22个股道平面(`red`.`rose`, (中文(简体) ), `slate`, (中文(简体) ), `gray`, (中文(简体) ), `zinc`, (中文(简体) ), `neutral`, (中文(简体) ), `stone`外加4个设计-系统中性(`mauve`, (中文(简体) ), `olive`, (中文(简体) ), `mist`, (中文(简体) ), `taupe`每一个运行50-950次 **加一个 `850` 步骤** - 见下文 |
| **间距** | `--spacing-xs` (0.25雷姆) • `--spacing-xl` (1.5雷姆),用作 `p-md`, (中文(简体) ), `gap-lg`,, , , , , , , , |
| **半径比例** | `--radius-xs` → `--radius-xl`, (中文(简体) ), `--radius-full`附加时 `--atai-radius-interactive` (交互式内容的无线电, `rounded-interactive`(中文(简体) ) |
| **图标中风宽度** | `--stroke-width-icon-{default,interactive,status,emphasis}` (1/1.25/1.5/2) Lucide 图标 |
| **宽度级警卫** | `--max-width-*`编号 :`--min-width-*` 尾风别名 `--container-*` 缩放,所以 `max-w-md` 确定容器大小,而不是t恤间隔标志 |
| **黑暗模式** | `.dark` 类通过 `@custom-variant dark (&:where(.dark, .dark *))` |
| **类型** | 字体家族堆栈,并有相匹配的倒置,成对的类型缩放(`--text-*--line-height` 编号 : `--letter-spacing` 每一步,加 `--text-2xs`),和一个语义HTML基层 |
| **滚动栏** | `--scrollbar`编号 :`--scrollbar-track` (hum+音轨颜色, `bg-scrollbar`和 `--scrollbar-width`。全球应用在底层,所以每个滚动器都遵循主题,没有应用代码 |

品牌颜色和调色板定义于 `colors.css` 自动装入 `theme.css`。 。 。 .

### 这个 `850` 步骤

每个坡道都有一个 `850` 尾风没有树荫 尾风的尺度很粗糙 `zinc-800` → `zinc-900` 在 OKLCH 光度中降出 0.064 个- 它留下了 暗模式, 只有一个表面站 `--card` 财务报告和审定财务报表 `--popover` 两人必须分享,所以 `Card` 内置 a `Dialog` 只能用它的戒指来区分.

每个 `850` 为其每个构成部分的中点 `800` 财务报告和审定财务报表 `900` 在OKLCH的邻居们, 被装入了SRGB, 在那里,一个正中点落在它之外(`emerald`, (中文(简体) ), `sky`, (中文(简体) ), `rose` 染色体减少、轻度和湿度. `--card` 用途 `zinc-850` 在暗模式下,给予表面四个步骤而不是三个步骤:

| L | 符号 | 表面 |
| --- | --- | --- |
| 0.141 (中文(简体) ) | `--background` | 页 次 |
| 0.210 (韩语) | `--popover` 编号 : `--sidebar` 编号 : `--secondary` 编号 : `--table-header` | 对话框、 下拉菜单、 选择、 侧面板、 侧边栏、 表格页眉 |
| 0.242 (中文(简体) ) | `--card` 编号 : `--table` | 纸牌、提醒、项目、图表、表格 |
| 0.274 (简体中文) | `--input` 编号 : `--muted` 编号 : `--border` | 田地、水井、边缘 |

光线模式不受影响 : `--card` 留下来 `zinc-50` 对白 `--popover`。 。 。 .

该表有它自己的表面: `--table` 等于 `--card` 今天,一个桌子读作一个面板, 并且是它自己的象征,所以两者可以不触摸卡. `--table-header` 在两个主题方面都落后一步(`zinc-100` 光线, `zinc-900` 黑了,所以头从身体上退去,而 `--border` 线条下保持可见. `--table-section` 填充体内的分区分隔符( n)`zinc-200` 光线, `zinc-950` 黑暗),是两个主题中比标题更深的一步. 横行徘徊和选择 `--muted`。 。 。 .

### 类型比例

每个股票 `text-*` 步骤带有自己的行高和光学字母间隔,所以 `text-sm` 独自一人在品牌上—— **从不对 `text-*` 工具为 `leading-*` 或者说 `tracking-*`**斜道已经供应了两者 随着体积的增大,跟踪会收紧;而体积缩小会拉松.

| 步骤 | 大小 | 线高 | 字母间距 |
| --- | --- | --- | --- |
| `text-2xs` | 10px (英语) | 14px 时速 | 0.02毫米口径 |
| `text-xs` | 12px 时速 | 16px 时 | 0.01m (简体中文) |
| `text-sm` | 14px 时速 | 20px (英语) | 0 个 |
| `text-base` | 16px 时 | 24px (英语) | 0 个 |
| `text-lg` | 18px (简体中文) | 26px (韩语) | \- 0.005毫米口径 |
| `text-xl` | 20px (英语) | 28px (英语) | \- 0.01毫米口径 |
| `text-2xl` | 24px (英语) | 30px 时速 | \- 0.015 纳米 |
| `text-3xl` | 30px 时速 | 36个px | \- 0.02毫米(千分位数) |
| `text-4xl` | 36个px | 40px (英语) | \- 0.025毫米口径 |
| `text-5xl` | 48px 坐标 | 52px (英语) | \- 0.03m (中文(简体) ) |
| `text-6xl`– 说吧 –`text-9xl` | 60-128px (中文(简体) ) | 1个 | \-0.035 / -0.04em (单位:千美元) |

线-高音为根大小的整像素,所以相邻行和细胞共用像素网格.

`text-2xs` (10px)是密集元数据的下限——使用它而不是任意 `text-[10px]`编号 :`text-[11px]`字母间隔是按大小而不是按家庭键的 `font-mono` 时间 `lg` 及以上继承负跟踪;在尺寸上单子被使用在设计系统中(`xs`编号 :`sm`0或正数.

原始人遵循同样的规则: 不 `leading-*` 或者说 `tracking-*` 坐在旁边 `text-*` 在任何地方 `ds-ui-svelte`一种有意识的超规模建筑是: `Counter`数字滚筒`text-[1em]` + 键 `leading-(--counter-row)` 内 `counter.svelte`),它需要相适应的格子和固定行高来激活一个滚动的数字;这是唯一被接受的任意缩放地. 时 `size="inherit"` 这行是 `1lh`,所以一个赤裸的计数器在运行的文本卷 在它继承的行高上而不是在药丸的固定行上.

### 语义 HTML 基层

`theme.css` 样式一小组 **作者内容** 如此平庸的标出元素在品牌上没有工具类. `code` 财务报告和审定财务报表 `pre` 不需要规则: 尾风预飞已经给他们了 `--font-mono`,而PP Neue Montreal Sans和Mono共享相同的x高和盖高,所以内置代码与周围的文本大小相同.

| 元素 | 样式 |
| --- | --- |
| `body` | `bg-background text-foreground font-sans text-sm` ——基数在此设定一次并继承 |
| `h1` 编号 : `h2` 编号 : `h3` | `text-primary`, (中文(简体) ), `text-3xl` 编号 : `text-2xl` 编号 : `text-xl`, (中文(简体) ), `font-normal`, (中文(简体) ), `text-balance`· ; `h1` (单位:千美元) `capitalize` |
| `h4` 编号 : `h5` 编号 : `h6` | `text-muted-foreground`, (中文(简体) ), `text-lg` 编号 : `text-base` 编号 : `text-sm`, (中文(简体) ), `font-normal` |
| `p` | `text-primary text-pretty` (继承大小) |
| `small` | `text-primary text-xs` |
| `strong` | `font-medium` (继承大小) |
| `blockquote` | `border-s-2 ps-6 italic` |
| `a` | `cursor-pointer` ——只付得起,没有颜色和大小 |

仅 `h1`– 说吧 –`h6` 财务报告和审定财务报表 `small` 携带字体大小;其他所有东西都继承,所以在父母身上的大小总是会取胜.

**故意无名: `span`, (中文(简体) ), `label`, (中文(简体) ), `em`, (中文(简体) ), `code`, (中文(简体) ), `pre`。 。 。 .** 它们是结构性的——它们出现在第三方部件内部,组成库并突出代码,关于它们的元素规则会比每个消费者的母体大小强,这迫使应用程序重复 `text-*` 每个内线的孩子。 他们从父母那里继承遗产. `a` 在同一个家庭 和携带 **无打字** 出于同样的原因,但它确实得到 `cursor-pointer`: UA 工作表只给指针 `a[href]`,因此锚被接通到点击处理器上,或者通过一个 `child` 片断在 `href` 土地——否则将读作纯文本。 后果:赤裸的链接仍然视平 (Tailwind preflight gives) `a` `color: inherit; text-decoration: inherit`直到应用程序的样式, 一个纯装饰性的锚现在显示一个它没有获得的指针; `<label>` 打印为 `Label` 原始的。 原始的. `h1` 标题为(`capitalize`,以 `normal-case`);没有其他标题带有文本转换形式——大写通过 `Label` 变体和 `typography="mono"` 轴。 所有元素默认为 `border-border` 财务报告和审定财务报表 `outline-ring/50`。 。 。 .

**滚动条也由底板层管理**:普遍性 `*` 规则集 `scrollbar-color` 编号 : `scrollbar-width` 从 `--scrollbar` 编号 : `--scrollbar-track` 编号 : `--scrollbar-width`因此,每个 `overflow` 框中,包括您自己的应用程序中的内容 **无类**. 宣布为 `*` 而不是说 `:root` 两种财产都是继承的,但 `var()` 宣言所在的替代品,因此 `*` 是什么让一个 `.dark` 打开 _任意_ 树下翻转树下卷轴.

只有 **标准** 使用滚动条属性 。 在Chrimium 121+ / WebKit 18.2+ 一个非-`auto` `scrollbar-color` 或者说 `scrollbar-width` 选择遗留的元素 `::-webkit-scrollbar` 伪元素,所以两者是相互排斥的而不是分层的——标准配对是唯一一个Chromium,WebKit和Gecko都执行. 后果:拇指半径和明显的徘徊颜色是无法表示的(发动机从拇指颜色得到徘徊), `--scrollbar-width` 仅使用 `auto | thin | none`,而macOS则使 **覆盖** 滚动条,不占用布局空间而忽略厚度。 通过重新定义符号来重取主题; 用 `[scrollbar-width:none]`。 。 。 .

* * *

## 字体

`fonts.css` 本包中包含两种类型: `@font-face` 声明: **13个WOFF2脸** pP Neue Montreal Sans + 摩诺`font-display: swap`指出 `/fonts/*.woff2`附加时 **20个相匹配的倒地相** (每OS基地×每重量). 字体二进制本身是 **没有** npm 包的一部分 - CLI(`ds create` 编号 : `ds init` 编号 : `ds add --fonts <path>`复制到您的项目中 `static/fonts/`. 13个文件共计~820 KB(铸币局的TTF/OTF为2.1 MB);如果品牌字体得到更新,则用字体Tools从原作中再生:

```sh
python3 -c "from fontTools.ttLib import TTFont; from pathlib import Path
for src in sorted(Path('.').glob('PPNeueMontreal*.[to]tf')): f = TTFont(src); f.flavor = 'woff2'; f.save(src.with_suffix('.woff2'))"
```

**当二进制缺席时**,倒背面取而代之: _当地_ 系统字体,取自PP Neue Montreal本身的度量标准——x高,平均字符宽度,和行框——通过 `size-adjust` + 键 `ascent`编号 :`descent`编号 :`line-gap-override`,所以一个没有规定的项目仍然按照品牌字体的比例制作,并且布局相同. **当二进制出现时**,同样的面相使倒回 brand-font互换无倒移(没有布局变换/CLS).

选择倒计时基地 **每个操作系统** (叠入) `theme.css` 命令它们,这样每个平台都会解决其最接近的本地字体,全部确认 `local()`\- 可达到:

|  | 苹果公司 | 窗口 | 机器人 |
| --- | --- | --- | --- |
| **圣诞** | 诺伊河脊 | 参数 | 机器人 |
| **单曲** | 门罗 | 康索拉斯/卡斯卡迪亚莫诺 | 单人机器人 |

SF Mono被故意不使用——它无法通过 `local()`数字 `@capsizecss` 由正则权重(如果品牌字体的度量衡改变,则重新生成).

### 预装

`font-display: swap` 加上量度相配的倒置可以实现互换无倒置,但第一个涂料仍然发生在倒置相上,除非浏览器被告知在发现"倒置"之前取出品牌字体 `@font-face` 规则。 因此,CLI在上面插入了3个预装值 `%sveltekit.head%` 内 `src/app.html` 当它安装字体时 - 面部涂料使用: **书** (400个桑, `body`, (中文(简体) ), **中型** (500桑语, `strong` 和强调) **单行本** (400个单数,标签,徽章,计数). 当翻译的文本最需要时.

```html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontreal-Book.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontreal-Medium.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontrealMono-Book.woff2" />
```

`crossorigin` 即使对同源字体来说也是强制性的 - 字体请求总是CORS- mode,没有它的预加载不匹配,所以浏览器下载了文件两次. 如果你的主人没有 `src/app.html` CLI 打印这些标签供您粘贴到 `<head>`。 。 。 .

体重已经申报 **每个实例**数字 : `local('Helvetica Neue')` 总是决定 _经常_ 切除无论 `font-weight` 因此,一张脸会默默地使Medium成为常态 _大胆_ 700. 因此,每个重量都表示其实际削减(`local('HelveticaNeue-Medium')` 编号 : `-Bold`(见A/C.5/49/70,附件)。 没有真中子(Arial, Menlo, Cascadia)的基数省略了500个,所以它和正中子匹配.

## 常见问题

### @archetypeai/ds-lib-tokens 是什么？

原型 AI 设计系统

### 如何安装 @archetypeai/ds-lib-tokens？

在项目目录运行 npm install @archetypeai/ds-lib-tokens，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @archetypeai/ds-lib-tokens 支持 TypeScript 吗？

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

### @archetypeai/ds-lib-tokens 支持 ESM 还是 CommonJS？

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

### @archetypeai/ds-lib-tokens 可以商用吗？

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

### @archetypeai/ds-lib-tokens 的下载量有多少？

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

### @archetypeai/ds-lib-tokens 还在维护吗？

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