# @lovince/tokens 中文文档

规范地址：https://npmcn.com/package/%40lovince/tokens/

版本：0\.3\.0
npm 元数据更新时间：2026-11-01T18:04:27.595Z
中文译文更新时间：2026-11-01T18:54:15.194Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：33 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- 首次发布：2026-10-15T18:45:29.181Z
- 最新版本发布：2026-11-01T18:04:27.450Z
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

为Lovince UI设计令牌-调色板，间距，类型，运动和分层尺度作为类型常量和CSS自定义属性。没有依赖关系。

## 安装

```sh
npm install @lovince/tokens
```

也可以使用：`pnpm add @lovince/tokens`、`yarn add @lovince/tokens`、`bun add @lovince/tokens`

## README

# @lovince /令牌

Lovince UI的原始设计值：颜色原语，空间，半径，类型， 运动，模糊和分层。它们在这里决定一次，然后在其他包中决定一次 消耗。没有依赖关系。

> **状态: `0.3.0`、实验。** 令牌名称以前可能会更改 `1.0`.

```bash
bun add @lovince/tokens
```

符号没有任何意义。 `--lovince-blue-600` 是一种颜色，不是“口音”。 意义来自于 [`@lovince/themes`](https://npmcn.com/package/%40lovince/themes)，它映射了这些原语 再来看语义角色。大多数应用程序两者都需要。

## 三层

| 层 | 包 | 例子 | 谁引用了它 |
| --- | --- | --- | --- |
| 原始的 | `@lovince/tokens` | `--lovince-blue-600`， `--lovince-space-4`， `--lovince-duration-enter` | 主题和非颜色比例的组件 |
| 语义 | `@lovince/themes` | `--lovince-color-surface`， `--lovince-color-accent` | 组件 |
| 组件 | 每个包 | `--journey-primary` | 消费者覆盖一个组件 |

重新命名编辑原语。暗模式编辑语义。两者都不触及组件。

## 使用它

```css
@import '@lovince/tokens/tokens.css';

.panel { padding: var(--lovince-space-4); border-radius: var(--lovince-radius-lg); }
```

```ts
import { duration, ease, space, contrastRatio } from '@lovince/tokens'

gsap.to(el, { duration: duration.enter, ease: ease.out.gsap })
```

每个选择器都被包裹在 `:where()`，所以很简单。 `:root { --lovince-… }` 无论导入顺序如何，Override总是获胜。

## 决定

-   **面板:** 板岩中性蓝600 (`#2563eb`)作为品牌重音； 红色，绿色和琥珀色代表地位，都在OKLCH中。
-   **空间** 是4px的比例。 **持续时间** 坐在40毫秒的台阶上： 按120·快160·微200·状态280·变形360·进入440· 覆盖560·行程720。每个ease都附带相应的GSAP，所以是CSS 和JS的动议从不反对。
-   **类型** 由角色(`title-md`， `body-sm`)，而不是按大小。字体 默认为系统堆栈；集 `--lovince-font-sans` 给产品打上品牌
-   **重楼:** 没有什么比五百磅更轻的了。

## 编辑

来源是 `src/`. `css/tokens.css` 生成：运行 `bun run generate` 从存储库根目录，不要手工编辑。如果提交，则测试失败 文件从源漂移。

## 许可证

麻省理工学院

## 常见问题

### @lovince/tokens 是什么？

为Lovince UI设计令牌-调色板，间距，类型，运动和分层尺度作为类型常量和CSS自定义属性。没有依赖关系。

### 如何安装 @lovince/tokens？

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

### @lovince/tokens 支持 TypeScript 吗？

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

### @lovince/tokens 支持 ESM 还是 CommonJS？

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

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

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

### @lovince/tokens 可以商用吗？

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

### @lovince/tokens 还在维护吗？

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