# @economic/taco-tokens 中文文档

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

版本：4\.0\.0
npm 元数据更新时间：2026-11-10T13:23:40.471Z
中文译文更新时间：2026-11-13T06:01:54.314Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40economic/taco-tokens
原文对照：https://npmcn.com/package/%40economic/taco-tokens/?lang=original

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

- 包体积（解压后）：18.6 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-06-07T22:32:09.456Z
- 最新版本发布：2026-11-10T13:23:40.126Z
- 近 30 天下载量：3796（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：105（近 12 个月 87 个）

## 中文简介

这是Taco和其他经济品牌消费者的设计标志套件. Taco-tokens从Figma取出令牌并转换为CSS变量和TypeScript常数.

## 安装

```sh
npm install @economic/taco-tokens
```

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

## README

# @ economic/ taco - takes

这是Taco和其他经济品牌消费者的设计标志套件. Taco-tokens从Figma取出令牌并转换为CSS变量和TypeScript常数.

* * *

## 概览

此套件提供多种格式的设计符:

-   **CSS 变量** - 用于样式表
-   **类型脚本常数** - 用于 JavaScript/ TypeScript 和配置文件

**说明:** 这是一个独立的包 可以直接消费, 但大多数消费者可能会使用 `@economic/taco` 包括并再出口这些令牌.

* * *

## 安装和使用

### 对于不使用Taco的消费者来说

**建议:** 直接从 `@economic/taco-tokens`数字 :

```typescript
// CSS variables
import '@economic/taco-tokens/tokens.css';

// TypeScript constants
import { primaryColors, borderRadius, spacing } from '@economic/taco-tokens';
```

* * *

## 软件包结构

```
packages/taco-tokens/
├── scripts/
│   ├── fetch-tokens.ts    # Fetches tokens from Figma API (omitted)
│   └── build-tokens.ts    # Converts JSON to CSS/TS/JS (omitted)
├── tokens/
│   ├── tokens.json        # Source data (omitted)
│   ├── tokens.css         # CSS variables (generated & committed)
│   ├── tokens.ts          # TypeScript constants (generated & committed)
│   └── tokens.js          # Same constants as plain JS (generated & committed)
├── .env.example           # Required: FIGMA_API_TOKEN, FIGMA_FILE_ID
└── package.json
```

* * *

## 从 Figma 同步托肯

### 先决条件

1.  查看 Taco 信使 Figma 文件, 和从该账户创建的 Figma 个人访问信使( Figma – Sets – Security – 个人访问信使) `file_content:read` 范围。 图像返回 `404 Not Found` 您的账户看不到的文件.
    
2.  创建一个 `.env` 文件(参见 `.env.example`:
    
    ```bash
    FIGMA_API_TOKEN=your_token_here
    FIGMA_FILE_ID=your_file_id_here
    ```
    
    `FIGMA_FILE_ID` 只有文件 URL 的密钥,而不是完整的 URL 。 对于 `https://www.figma.com/design/<FILE_ID>/Taco-tokens?node-id=0-1`,使用时 `<FILE_ID>`。粘贴完整的 URL 也给出 `404`。 。 。 .
    
3.  从一页中读取脚趾 `Export` (对大小写敏感),以有TEXT节点或颜色填充的帧/组来组织. 如果获取失败 `Could not find Figma page "Export"`,检查页面名称或您正在使用正确的文件.
    

### 同步命令

从图中获取并构建所有输出 :

```bash
cd packages/taco-tokens
npm run sync-tokens
```

此运行 :

1.  `fetch-tokens` - 从菲格玛拉起 `tokens/tokens.json`
2.  `build-tokens` - 转换JSON ~ `tokens/tokens.css` + 键 `tokens/tokens.ts` + 键 `tokens/tokens.js`

### 单个脚本

**只获取 :**

```bash
npm run fetch-tokens
```

-   通过 API 读取 Figma 文件( 您需要访问一个令牌和文件)
-   从 TEXT 节点取出符号值或填充
-   按框名排列的组(例如"初级颜色","间隔")
-   按类别顺序排序(参见 `CATEGORY_ORDER` (脚本)
-   产出: `tokens/tokens.json`

**仅构建 :**

```bash
npm run build-tokens
```

-   读取: `tokens/tokens.json`
-   产出:
    -   `tokens/tokens.css` - CSS自定义属性
    -   `tokens/tokens.ts` - 有类型安全的脚本常数
    -   `tokens/tokens.js` - 与普通JS相同的常数,在运行时加载(节点不能剥离类型) `.ts` 下级 `node_modules`(中文(简体) )
-   字典大小符号将 Figma 源值保留在 `tokens.json` (单位:千美元)`px`不过 `text-*` 财务报告和审定财务报表 `heading-*` 转换为 `rem` 产出(基数) `16px`) (中文(简体) ).

* * *

## 语句分类

生成的令牌按类别分类:

-   **主颜色** - 说吧 `tacoBlue`, (中文(简体) ), `tacoGray`
-   **次要颜色** - 说吧 `tacoRed`, (中文(简体) ), `tacoYellow`, (中文(简体) ), `tacoGreen`
-   **第三层颜色** - 说吧 `tacoPink`, (中文(简体) ), `tacoPurple`
-   **品牌颜色** - 说吧 `tacoBrandMorning`, (中文(简体) ), `tacoBrandNoon`, (中文(简体) ), `tacoBrandSunset`, (中文(简体) ), `tacoBrandMidnight`
-   **间距** - 说吧 `tacoSpacing0` 结束 `tacoSpacing12`
-   **类型** - 说吧 `tacoWeightBold`, (中文(简体) ), `tacoTextSm`, (中文(简体) ), `tacoHeadingLg`等 (中文(简体) ).
-   **边框半径** - 说吧 `tacoRadius0` 结束 `tacoRadiusFull`
-   **边框宽度** - 说吧 `tacoBorderWidth0` 结束 `tacoBorderWidth2`

* * *

## 与Taco公司合并

### 塔克如何征服托肯斯

**单位 `packages/taco/src/index.tsx`数字 :**

```typescript
// Import CSS
import '@economic/taco-tokens/tokens.css';

// Re-export TypeScript constants
export * from '@economic/taco-tokens/tokens';
```

这意味着:

-   QQ CSS 变量自动包含在内 `taco.css`
-   QQ TypeScript 常数从 `@economic/taco`
-   消费者通过一个单一的包裹获得一切

### 尾风集成

Taco Tailwind 配置导入并直接使用 TypeScript 符号常数 :

```js
// packages/taco/tailwind.config.js
import { borderRadius } from '@economic/taco-tokens/tokens';

module.exports = {
    theme: {
        extend: {
            borderRadius: {
                DEFAULT: borderRadius.tacoRadius4,
                none: borderRadius.tacoRadius0,
                sm: borderRadius.tacoRadius2,
                lg: borderRadius.tacoRadius8,
                xl: borderRadius.tacoRadius12,
                full: borderRadius.tacoRadiusFull,
            },
        },
    },
};
```

此汇编实际值( 例如, ), `4px`, (中文(简体) ), `8px`)在建设时间直接进入CSS,以提高性能.

* * *

## 出版

此软件包与 `@economic/taco`数字 :

```bash
# From packages/taco-tokens
npm publish
```

**版本策略 :**

-   `@economic/taco-tokens` 有独立的版本
-   `@economic/taco` 指定要消耗的版本

**访问控制 :**

-   `"private": false` - 软件包可以发布
-   范围软件包 `@economic/...` - 默认仅限于组织

* * *

## 软件包导出

```json
{
    "main": "./tokens/tokens.js",
    "module": "./tokens/tokens.js",
    "types": "./tokens/tokens.ts",
    "exports": {
        ".": {
            "types": "./tokens/tokens.ts",
            "default": "./tokens/tokens.js"
        },
        "./tokens": {
            "types": "./tokens/tokens.ts",
            "default": "./tokens/tokens.js"
        },
        "./tokens.css": "./tokens/tokens.css"
    }
}
```

**可用进口:**

```typescript
// Main export (using default "." export)
import { tokens, primaryColors, spacing } from '@economic/taco-tokens';

// Explicit tokens path
import { tokens, primaryColors, spacing } from '@economic/taco-tokens/tokens';

// CSS
import '@economic/taco-tokens/tokens.css';
```

* * *

## 消费者实例

### 只有CSS系统

```css
/* In your stylesheet */
.my-component {
    color: var(--taco-blue-500);
    padding: var(--taco-spacing-4);
    border-radius: var(--taco-radius-8);
}
```

### 类型脚本/ Java 脚本

```typescript
import { primaryColors, spacing } from '@economic/taco';

const styles = {
    color: primaryColors.tacoBlue500,
    padding: spacing.tacoSpacing4,
};
```

### 尾风

```jsx
// Maps to tailwind utility classes via. the tailwind.config
<div className="rounded-lg text-blue-500">Content</div>
```

* * *

## 《托肯命名公约》

**模式 :** `taco[Category][Scale]`

-   **主颜色 :** `tacoBlue100`, (中文(简体) ), `tacoBlue500`, (中文(简体) ), `tacoBlue900`
-   **间距 :** `tacoSpacing0`, (中文(简体) ), `tacoSpacing1`. . . . . . . , `tacoSpacing12`
-   **类型 :** `tacoTextSm`, (中文(简体) ), `tacoTextMd`, (中文(简体) ), `tacoHeadingLg`
-   **边框半径 :** `tacoRadius0`, (中文(简体) ), `tacoRadius4`, (中文(简体) ), `tacoRadiusFull`

**CSS 变量 :** Kebab 文档 `--` 前缀

```css
--taco-blue-500
--taco-spacing-4
--taco-radius-8
```

**类型脚本 :** 骆驼 Case

```typescript
tacoBlue500;
tacoSpacing4;
tacoRadius8;
```

* * *

## 解决问题

**CSS 变量不起作用吗 ?**

-   保证 `@economic/taco/taco.css` 在使用前导入
-   检查浏览器 DevTools = 元素 = 计算 = 查找 CSS 变量

**类型脚本导入失败吗 ?**

-   运行 `npm install` 从 root 创建工作空间链接
-   检查 `node_modules/@economic/taco-tokens` 已存在

**图像获取失败 ?**

-   校验 `.env` 已经正确 `FIGMA_API_TOKEN` 财务报告和审定财务报表 `FIGMA_FILE_ID`
-   检查符号可访问 Figma 文件
-   确保 Figma 文件结构符合预期格式
-   保证你没有达到标准

* * *

## 常见问题

### @economic/taco-tokens 是什么？

这是Taco和其他经济品牌消费者的设计标志套件\. Taco-tokens从Figma取出令牌并转换为CSS变量和TypeScript常数\.

### 如何安装 @economic/taco-tokens？

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

### @economic/taco-tokens 支持 TypeScript 吗？

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

### @economic/taco-tokens 支持 ESM 还是 CommonJS？

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

### @economic/taco-tokens 可以商用吗？

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

### @economic/taco-tokens 的下载量有多少？

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

### @economic/taco-tokens 还在维护吗？

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