Camp App 按钮 + 一级页签 + 标签 + 弹窗 Design Token 汇总（D2C / NPM 发布版）

本仓库输出了来自 Figma 的四层 token：

• 按钮页：A.按钮 Button（node-id: 84:100）
• 页签页：选项卡、页签 Tabs（node-id: 542:2015）
• 标签页：标签（node-id: 2436:23337）
• 基础页：Color（node-id: 1227:8087）

采用 DTCG 格式 + D2C 组件语义分层，并可直接发布到 NPM。

D2C 标准约定

• 分层结构：foundation → primitives → semantic → components → variant map
• 命名策略：
  • 语义 token 使用英文稳定 key（便于代码消费）
  • 保留 Figma 原始命名 figmaVariantName（保证设计对齐与追溯）
• 状态标准化：
  • 正常 → normal
  • 按下 → pressed
  • 不可点/不可点击 → disabled
  • 加载/加载中 → loading

基础 Token 覆盖范围（来自 Color）

• 颜色：C1-C13、Y2-Y4、B2-B4、P1-P2、蒙层 black60
• 描边：宽度 0px/0.5px/1px/2px，颜色 moduleBorder(C12)、accentBorder(C1)
• 圆角：2px/4px/8px/16px/50px
• 投影：
  • small: 0 2px 8px 0 rgba(0,0,0,0.06)
  • large: 0 2px 16px 0 rgba(0,0,0,0.08)

覆盖的组件分类（与设计稿一致）

• 按钮 Button（71 个）
  • H44 通栏按钮：16 个变体
  • H36 大按钮：20 个变体
  • H26 常用按钮：16 个变体
  • H22 小按钮：16 个变体
  • H18 超小按钮：3 个变体
• 一级页签 Tabs（16 个）
  • X/一级页签：8 个变体（选中/下拉/数据/未选/红点）
  • 一级页签（活动）：4 个变体（页签弱化 on/off）
  • X/一级页面tab：4 个变体（黑/白主题常态与选中）
• 标签 Tags（89 个）
  • 文本标签-深色：30 个变体（叶子/圆角 × 大中小 × 蓝紫绿黄红）
  • 文本标签-浅色：24 个变体（叶子/圆角 × 大中小超小 × 蓝黄灰）
  • 文本标签-描边：32 个变体（叶子/圆角 × 大中小超小 × 蓝黄灰白）
  • 文字红点 Badge：3 个变体（文本 / 新 / NEW）

合计：176 个变体，均可追溯到设计稿命名与节点。

目录结构

.
├── package.json
├── tokens
│   ├── foundation.tokens.json      # 基础 token（颜色/描边/圆角/投影）
│   ├── button.tokens.json          # 按钮 token（引用 foundation）
│   ├── button.variant-map.json     # 按钮变体映射
│   ├── tab.tokens.json             # 一级页签 token（引用 foundation）
│   ├── tab.variant-map.json        # 一级页签变体映射
│   ├── tag.tokens.json             # 标签 token（引用 foundation）
│   ├── tag.variant-map.json        # 标签变体映射（矩阵规则 + 特殊变体）
│   ├── modal.tokens.json           # 弹窗 token（引用 foundation）
│   └── modal.variant-map.json      # 弹窗变体映射（文字/图片弹窗组合）
├── scripts
│   └── build.mjs                   # 构建脚本：生成 dist 发布产物
└── dist                            # npm build 后产物
    ├── foundation.tokens.json
    ├── button.variants.tokens.json
    ├── variant-map.json
    ├── tab.variants.tokens.json
    ├── tab.variant-map.json
    ├── tag.variants.tokens.json
    ├── tag.variant-map.json
    ├── button.css
    ├── tab.css
    ├── tag.css
    ├── index.mjs
    ├── index.cjs
    └── index.d.ts

本地构建

npm run build

构建产物说明：

• dist/foundation.tokens.json：基础设计 token（可跨组件复用）
• dist/button.variants.tokens.json：按钮完整变体 token
• dist/tab.variants.tokens.json：一级页签完整变体 token
• dist/tag.variants.tokens.json：标签完整变体 token
• dist/button.css：按钮 CSS Variables（含 border-width / shadow）
• dist/tab.css：页签 CSS Variables（含文本/下划线/分组样式）
• dist/tag.css：标签 CSS Variables（含尺寸/圆角/边框/背景）
• dist/index.mjs / dist/index.cjs：JS 入口导出（按钮 + 页签 + 标签 + 基础）

使用示例

1) JS/TS 导入

import {
  buttonTokens,
  tabTokens,
  tagTokens,
  map,
  tabMap,
  tagMap,
  foundation
} from 'camp-app-button-design-tokens';

const h36BrandNormal = buttonTokens.componentSets.h36_large.variants.find(
  v => v.id === 'brand_normal_enabled'
);
const selectedTab = tabTokens.componentSets.primary_common.variants.find(
  v => v.id === 'common_selected_text'
);
const blueLeafTag = tagTokens.componentSets.text_tag_light.variants.find(
  v => v.id === 'light_leaf_large_blue'
);

console.log(h36BrandNormal.tokens.bg);
console.log(selectedTab.tokens.indicatorColor);
console.log(blueLeafTag.tokens.radius);
console.log(foundation.foundation.shadow.small.$value);

2) 直接引用 JSON

import buttonJson from 'camp-app-button-design-tokens/tokens' assert { type: 'json' };
import tabJson from 'camp-app-button-design-tokens/tabs' assert { type: 'json' };
import tagJson from 'camp-app-button-design-tokens/tags' assert { type: 'json' };
import foundationJson from 'camp-app-button-design-tokens/foundation' assert { type: 'json' };

3) 引入 CSS Variables

@import "camp-app-button-design-tokens/css";
@import "camp-app-button-design-tokens/tab-css";
@import "camp-app-button-design-tokens/tag-css";

.button {
  height: var(--d2c-button-h36_large-brand_normal_enabled-height);
  background: var(--d2c-button-h36_large-brand_normal_enabled-bg);
}

.tab {
  color: var(--d2c-tab-primary_common-common_selected_text-text);
}

.tag {
  border-radius: var(--d2c-tag-text_tag_outline-outline_leaf_large_blue-radius);
  border-color: var(--d2c-tag-text_tag_outline-outline_leaf_large_blue-border);
  color: var(--d2c-tag-text_tag_outline-outline_leaf_large_blue-text);
}

发布到 NPM

首次发布前，请按你的组织规范修改 package.json 中的 name（建议使用 scope，例如 @your-scope/camp-app-button-design-tokens）。

npm login
npm run build
npm publish --access public

设计对齐说明

• 组件分类与命名以 Figma 对应组件集与变体为准（Button / Tabs / 标签）。
• 样式基线（颜色/描边/圆角/投影）以 Figma Color 为准。
• 设计稿更新时：优先更新 tokens/foundation.tokens.json，再调整组件 token（button/tab/tag），最后执行 npm run build。