# @code-sherpas/pharos-tokens 中文文档

规范地址：https://npmcn.com/package/%40code-sherpas/pharos-tokens/

版本：1\.1\.1
npm 元数据更新时间：2026-11-08T17:03:00.617Z
中文译文更新时间：2026-11-10T08:00:27.853Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：113 kB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- 首次发布：2026-04-19T23:42:29.083Z
- 最新版本发布：2026-11-08T17:03:00.294Z
- 近 30 天下载量：2170（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

(原始内容存档于2018-09-26) (英语). Design de Code Sherpas – agnóstico de 框架. DTCG + 样式词典 + OKLCH.

## 安装

```sh
npm install @code-sherpas/pharos-tokens
```

也可以使用：`pnpm add @code-sherpas/pharos-tokens`、`yarn add @code-sherpas/pharos-tokens`、`bun add @code-sherpas/pharos-tokens`

## README

# @ code- sherpas/ pharos- tokens (英语)

代号"Sherpas"的设计标志. 框架-不可知论. DTCG + 样式词典 v4 + OKLCH.

部分 **法罗**,代码Sherpas的设计系统:它的视觉方向和 每个符号的值在 [Pharos 设计系统文物](https://claude.ai/artifact/AzsXQ2SHXhPJ9BhRSoGTbV), (中文(简体) ), 在此作为符号和组件发布 [`pharos-react`](https://github.com/code-sherpas/pharos-react),以及程序的文件(决定、路线图、, [质量标准](https://app.notion.com/p/3fa1751eee1081debcc6db3ac657e3ac)(中文(简体) ) 生活环境 [方案a Pharos](https://app.notion.com/p/38c1751eee1081a3834ff68c3485c03c)。 。 。 .

## 这个包裹里有什么

此软件包定义 **原子值** 在代码Shelpas的视觉系统:颜色,间隔,半径,打字,阴影,z-index,持续时间,放松,以及布局宽度和断点. 它们来自任何前端(React, Vue, Svelte, React Introduct)和后端(交易邮件,PDF,报告).

它没有组件。 反应组件存在 [`@code-sherpas/pharos-react`](https://github.com/code-sherpas/pharos-react) 并将此软件包作为同伴依赖.

## 安装

```bash
pnpm add @code-sherpas/pharos-tokens
# or npm / yarn
```

## 使用量

### 备选案文A——CSS自定义属性(建议)

在您的应用程序入口处导入 CSS 令牌 :

```css
@import '@code-sherpas/pharos-tokens/styles.css';
```

或,从JS/TS进入点:

```ts
import '@code-sherpas/pharos-tokens/styles.css';
```

两种入境点的船舶类型申报,因此附带效应的进口类型检查与 `noUncheckedSideEffectImports` (默认自 TypeScript 6 起) `declare module`。 。 。 . `@code-sherpas/pharos-tokens/css` 是原名下相同的样式表,并继续工作.

这暴露了 `--pharos-*` 打开 `:root`。直接或通过 Tailwind 任意值使用它们:

```css
.button-primary {
  background: var(--pharos-color-primary-600);
  color: white;
}
```

```html
<div class="bg-[var(--pharos-color-neutral-900)] text-white p-[var(--pharos-spacing-4)]">…</div>
```

### 备选案文B——打出的对象(JS/TS)

```ts
import { tokens } from '@code-sherpas/pharos-tokens';

const darkSurface = tokens.color.neutral['900'];
const cardRadius = tokens.radius['2xl'];
```

每个符号路径都被输入,所以一个被重新命名或被移除的符号会失败您的编译. 声明不需要 `resolveJsonModule` 也没有 `skipLibCheck`,并编译为 `moduleResolution` `bundler`, (中文(简体) ), `node16` 财务报告和审定财务报表 `nodenext`。 。 。 .

### 备选案文C——平稳常数(选择性进口)

```ts
import { PharosColorPrimary600, PharosRadius2xl } from '@code-sherpas/pharos-tokens/tokens.js';
```

### 备选办法D-DTCG来源(海关管道)

对于你自己的变换(iOS,Android,Figma等):

```ts
import colorDtcg from '@code-sherpas/pharos-tokens/dtcg/color';
// DTCG object with $value, $type, $description
```

## 消费者规则

见 [消费者的规则](https://app.notion.com/p/4071751eee1081b2b000e212c80761b4) 在编号(Programa Pharos)中,Pharos保存其文件(决定D27).

## 托肯结构

| 家属 | 示例路径 | 说明 |
| --- | --- | --- |
| 基础 | `color.base.{white,black}` | 纯白而黑. |
| 中立者 | `color.neutral.{50..950}` | 灰度,在更暗的阶梯上略为被海军所触动. |
| 小学 | `color.primary.{50..900}` | 海蓝色,比例为50-900. 600是基地Hue. |
| 语义 | `color.semantic.{success,error,warning,info}.{fg,bg,on}` | 成功/错误/警告/信息. `fg + on` 双人通过WCAG AA. |
| 间距 | `spacing.{0..24}` | 尾风相容的缩放 `rem`。 。 。 . |
| 半径 | `radius.{none,sm,md,lg,xl,2xl,3xl,full}` | 转角圆相. |
| 类型 | `font.{family,weight,size,lineHeight,letterSpacing}.*` | 特写. 机构默认 = `size.sm` (14px) (英语). |
| 阴影 | `shadow.{sm,md,lg,xl}` | 高处. |
| Z指数 | `z.{0,header,above-header,modal-overlay,modal,drawer-overlay,drawer,dropdown,tooltip}` | 语义相通而非文义相通. |
| 会期 | `duration.{fast,normal,slow}` | 过渡. |
| 缓解 | `easing.{in,out,in-out}` | 立方体-贝氏曲线. |
| 宽度 | `width.panel` | 按角色排列的宽度. `panel`: 工作表和侧面小组(24rem). |
| 断点 | `breakpoint.panel` | 视港断点按角色分列(D32);在JS中读取. |

## 捐款

1.  `pnpm install`
2.  修改或添加符号在 `src/*.tokens.json` (DTCG格式).
3.  `pnpm build` ——验证"样式词典"编译.
4.  `pnpm test` ——WCAG + DTCG 验证必须通过.
5.  `pnpm changeset` ——申报变更类型(patch / minual/major).
6.  打开公关.

CI验证了WCAG 2.1 AA在每种颜色/上色对上的对比. 如果 PR 打破了对比, 则无法合并 .

## 许可证

麻省理工学院. 见 [自由主义](https://npmcn.com/package/%40code-sherpas/pharos-tokens/LICENSE)。 。 。 .

## 常见问题

### @code-sherpas/pharos-tokens 是什么？

\(原始内容存档于2018-09-26\) \(英语\)\. Design de Code Sherpas – agnóstico de 框架\. DTCG \+ 样式词典 \+ OKLCH\.

### 如何安装 @code-sherpas/pharos-tokens？

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

### @code-sherpas/pharos-tokens 支持 TypeScript 吗？

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

### @code-sherpas/pharos-tokens 支持 ESM 还是 CommonJS？

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

### @code-sherpas/pharos-tokens 需要什么版本的 Node\.js？

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

### @code-sherpas/pharos-tokens 可以商用吗？

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

### @code-sherpas/pharos-tokens 的下载量有多少？

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

### @code-sherpas/pharos-tokens 还在维护吗？

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