@ economic/ taco - takes

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

概览

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

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

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

安装和使用

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

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

// 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:

   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",检查页面名称或您正在使用正确的文件.

同步命令

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

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

单个脚本

只获取 :

npm run fetch-tokens

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

仅构建 :

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数字 :

// 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 符号常数 :

// 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数字 :

# From packages/taco-tokens
npm publish

版本策略 :

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

访问控制 :

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

软件包导出

{
    "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"
    }
}

可用进口:

// 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系统

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

类型脚本/ Java 脚本

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

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

尾风

// 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 文档 -- 前缀

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

类型脚本 : 骆驼 Case

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 文件结构符合预期格式
• 保证你没有达到标准