@upmo-ai /令牌

Upmo设计符号：颜色、字体、间距、 半径，阴影，大小，断点，z-index和运动。由 tokens.json 分成三个工件：

• dist/tokens.css 的CSS自定义属性 light， dark 和 hc （高对比度）主题，范围由 :root 和 [data-theme="..."],再加上 排版工具类(.body， .h1， .code等)。每种类型风格 也是一套吗 :root 变量: --text-<style>-size， -line， -weight 在样式设置字母间距的地方， -tracking (例如 --text-body-size: 15px， --text-overline-tracking: 0.06em）。
• dist/tokens.js + dist/tokens.d.ts -每个值的类型JS对象， 每个主题，当CSS变量不够时（图表，画布，JS逻辑）。
• dist/tokens.json -原始源代码，为模具复制。

没有React，没有运行时依赖。

使用

import '@upmo-ai/tokens/tokens.css';
import { color, spacing, motion } from '@upmo-ai/tokens';

color['emerald-deep'].light; // "#176b47"
motion['duration-sweep'];     // "1600ms"

在根元素上设置主题：

<html data-theme="dark"> ... </html>

设计方向

• True-neutral理由。 坡道式，业务和数据密集。边界带 结构;阴影只能提升浮动层。翡翠是一种文雅的口音， 从来没有一个表面填充。
• 状态/活跃音调。 中性/主动/积极/注意/ 至关重要的。活插入符号（工作，检查）在 duration-sweep 循环并折叠为一个静态绘制的插入符号 运动。
• 访问层。 正文在声明的基础上清除4.5:1；控制 边缘和大/图标颜色清晰3:1；在光明和黑暗中验证。这个 高对比度主题进一步提升了一切。

构建

pnpm --filter @upmo-ai/tokens build