modelgo-design-tokens

ModelGo 四端（控制台 / 国内官网 / 国外官网 / 文档站）统一设计 token 的单一真源。 纯 CSS 变量，框架无关——React / Astro / VitePress 都能用。

为什么是 token 而不是组件

四端技术栈不同（React·Vite / Astro / VitePress），跨框架共享「组件」几乎不可能； 能真正统一的是 CSS 变量层。各端组件自己实现，但都消费同一套 --mg-*，风格自然一致。

安装

pnpm add modelgo-design-tokens

使用

入口 CSS 顶部引入一次：

@import 'modelgo-design-tokens/tokens.css';

然后全站只用 --mg-* 变量，不再写硬编码值：

.btn {
  height: var(--mg-btn-height);
  padding-inline: var(--mg-btn-pad-x);
  border-radius: var(--mg-btn-radius);
  font-size: var(--mg-btn-text);
  background: var(--mg-brand-base);
}
h1 { font-size: var(--mg-text-h1); line-height: var(--mg-text-h1-line); }

Tailwind v4 的站点（国内官网）在 @theme 里映射即可：

@theme {
  --color-brand: var(--mg-brand-base);
  --font-size-h1: var(--mg-text-h1);
}

双市场 / 双主题

• 市场：根元素 data-market="global" → 品牌色切 emerald；缺省 = 国内 indigo。
• 主题：data-theme="dark" → 语义色切深色。

契约（变量名）始终不变，只是值被覆盖。

双品牌色阶（两套常驻）

两套品牌 ramp 都常驻、可分别引用，--mg-brand-* 永远指向当前市场：

--mg-brand-cn-*       国内 indigo（deep/base/mid/light/pale/purple）
--mg-brand-global-*   海外 emerald
--mg-brand-*          = 当前市场（随 data-market 切）—— 日常用这个

需要在某市场里固定显示另一市场色（极少见）才用 --mg-brand-cn-* / --mg-brand-global-*。

用法规范

值统一 ≠ 用法统一。怎么用见 USAGE.md（颜色/字阶/wordmark/按钮/层级的 do & don't）。

Token 分类

| 组 | 前缀 | 说明 | |---|---|---| | 品牌色阶 | --mg-brand-{deep,base,mid,light,pale} | 5 阶 ramp，按 market 切 | | 字体 | --mg-font-{sans,display,mono,brand-latin,brand-cjk} | 字体族名（字体文件各端自托管） | | 字阶 | --mg-text-{hero,h1,h2,h3,body,sm,xs} + -line / -tracking | | | 圆角 | --mg-radius-{xs,sm,md,lg,xl,pill} | | | 间距 | --mg-space-{1,2,3,4,6,8,12,section} | | | 按钮 | --mg-btn-{height,height-sm,pad-x,radius,text,weight} | | | 语义色 | --mg-bg, --mg-bg-alt, --mg-text-{0,1,2}, --mg-border | 按主题切 |

落地节奏（建议）

1. 发布本包到 npm（公共）。
2. 选一端先接（建议国内官网），把本地变量改成引用 --mg-*，跑通构建+部署。
3. 验证无误后，其余三端逐个接入，删掉各自重复的 token 定义。

tokens.css 里的具体数值是「对账两端现状后的起步建议」，可按设计意图调整； 价值在于统一命名 + 单一来源，改视觉只改这一个文件、四端同步。