# @flipdish/ui-tokens 中文文档

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

版本：0\.6\.0
npm 元数据更新时间：2026-10-20T16:21:53.838Z
中文译文更新时间：2026-11-15T08:56:28.016Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40flipdish/ui-tokens
原文对照：https://npmcn.com/package/%40flipdish/ui-tokens/?lang=original
源码仓库：https://github.com/flipdishbytes/flipdish-design-system

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

- 包体积（解压后）：56 kB，3 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-06-22T11:32:16.838Z
- 最新版本发布：2026-10-20T16:21:53.549Z
- 近 30 天下载量：2061（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

Flipdish Design System sorms — 一个单一的Tailwind CSS v4 @主题样式表被web(Tailwind)和React Introduct(NativeWind)所消耗.

## 安装

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

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

## README

# `@flipdish/ui-tokens`

Flipdish设计系统——品牌颜色,类型尺度,间距和阴影——的设计代号被作为单一的Tailwind CSS v4被运出 `@theme` 样式表,两者 **网络** (台风)和 **原生反应** (单位:千美元)[原生窗口](https://www.nativewind.dev/) v5)消耗.

> **内部设计体系,公开发布.** 这些符号编码了Flipdish的品牌. 它们在公共npm注册,这样它们就可以通过Flipdish微前端和app共享,而不是作为通用的代号集.

**Flipdish设计系统的一部分:**

| 软件包 | 目的 |
| --- | --- |
| **`@flipdish/ui-tokens`** | 设计符 (本套件) |
| [`@flipdish/ui-icons`](https://www.npmjs.com/package/@flipdish/ui-icons) | 图标集 |
| [`@flipdish/ui-library`](https://www.npmjs.com/package/@flipdish/ui-library) | 构成部分 |
| [`@flipdish/ui-connected`](https://www.npmjs.com/package/@flipdish/ui-connected) | API 连接组件 |

## 安装

```bash
pnpm add @flipdish/ui-tokens
```

没有运行时间的依赖性,也没有同行的依赖性——包船一个CSS文件.

## 使用量

Web and React Industrial 导入相同的文件 。 这个 `@theme` block 充斥 Tailwind 设计系统 带有符号词汇,所以语义学的功能如 `bg-primary`, (中文(简体) ), `text-secondary`,以及 `border-primary` 通过 CSS 自定义属性解决.

### 网络 (Tailwind v4)

`@import` 您 Tailwind 条目样式表中的 CSS :

```css
@import "@flipdish/ui-tokens/css" layer(theme); /* tokens + [data-theme="dark"] */
```

### 原生反应( NativeWind v5)

添加相同的导入到 `global.css` 原生Wind编译. 本地窗口 v5's `react-native-css` 读取 Tailwind v4 `@theme` 块直接,所以没有JS主题对象或 `tailwind.config.js` 需要预设。 见 [反应原生安装指南](https://github.com/flipdishbytes/flipdish-design-system/blob/main/packages/ui-library/src/stories/GettingStarted/InstallationNative.mdx) 全文 `global.css` 形状和 `lightningcss` 针它需要.

```css
/* global.css, alongside the other imports from the installation guide */
@import "@flipdish/ui-tokens/css" layer(theme);
```

Flipdish品牌坡道的作者在 **六进制** 因此,无论是尾风和 `react-native-css` 完全一样.

## 语义符号

托肯分层:主题变量 **原始人** (raw 彩色坡道,天平)和 a **语义** 制图(`--color-bg-*`, (中文(简体) ), `--color-fg-*`, (中文(简体) ), `--color-text-*`, (中文(简体) ), `--color-border-*`, (中文(简体) ), `--color-focus-ring`之后的 [无标题 UI](https://www.untitledui.com/) v8 词汇表, 因此无标题的 UI 组件会从框中渲染出 .

总是消耗 **语义** 层 —— 保持主题意识的是:

```tsx
// ✓ Correct — semantic token, theme-aware
<div className="bg-primary text-secondary border-primary" />

// ✗ Wrong — primitive token, breaks theme switching
<div className="bg-neutral-50 text-neutral-900" />

// ✗ Wrong — raw CSS variable reference
<div style={{ background: "var(--color-bg-primary)" }} />
```

同样的后缀意味着每个财产的不同事物: `bg-primary` 是页面背景,而 `text-primary` 是近黑体文字.

## 主题切换

光是默认值. 在网络上,暗模式通过一个 `[data-theme="dark"]` 在挂载节点(或任何祖先)上的属性——不需要 JavaScript 运行时间主题切换代码 :

```html
<!-- Light (default) -->
<div id="app">…</div>

<!-- Dark -->
<div id="app" data-theme="dark">…</div>
```

在原生反应上,没有级联的DOM属性,所以 `[data-theme="dark"]` block 不应用,语义符号在两个设备方案中都保留其光值。 本地风云 `dark:` 变体仍然遵循设备颜色方案.

## 更改日志

见 [变动情况](https://github.com/flipdishbytes/flipdish-design-system/blob/main/packages/ui-tokens/CHANGELOG.md) 为释放历史.

## 捐款

这个包裹住在 [`flipdish-design-system`](https://github.com/flipdishbytes/flipdish-design-system) 单相机 贡献者文件——如何改变一种象征、原始/语义结构,以及建筑时间的检查——与那里的来源共存.

## 常见问题

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

Flipdish Design System sorms — 一个单一的Tailwind CSS v4 @主题样式表被web\(Tailwind\)和React Introduct\(NativeWind\)所消耗\.

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

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

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

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

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

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

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

@flipdish/ui-tokens 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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