@skyroc/ui-tokens

概览

项	值
包名	`@skyroc/ui-tokens`
目录	`packages/shared/ui-tokens`
版本	0.1.1
运行时依赖	无（零依赖）
测试	❌

@skyroc/ui-tokens 是项目的设计令牌单一数据源——纯 TS 常量，零依赖，可被 Web 的 @skyroc/tailwind-plugin、Native 主题、小程序主题统一消费。

目录结构

src/
├── index.ts        # export * from 四个子模块
├── colors.ts       # 语义色 / 表面色 / 默认色
├── spacing.ts      # 间距 scale
├── radius.ts       # 圆角 scale
└── typography.ts   # 字号 / 字重 scale

完整导出

colors

import {
  defaultBrandColors,       // 品牌色 hex（primary 等）
  defaultLightColors,       // [deprecated]
  defaultDarkColors,        // [deprecated]
  defaultFeedbackColorsHsl, // 反馈色 HSL（success/warning/error/info）
  defaultSidebarColorsHsl   // Sidebar 专用色 HSL
} from '@skyroc/ui-tokens';

type SemanticColorName;     // 'primary' | 'destructive' | ...
type SurfaceColorName;      // 'background' | 'foreground' | 'border' | ...
type ColorTokenName;        // 上两个的并集

spacing

import { spacing } from '@skyroc/ui-tokens';
type SpacingToken;

radius

import { borderRadius } from '@skyroc/ui-tokens';
type RadiusToken;

typography

import { fontSize, fontWeight } from '@skyroc/ui-tokens';
type FontSizeToken;
type FontWeightToken;

子入口

子路径	用途
`.`	主入口（聚合全部）
`./colors`	仅颜色
`./radius`	仅圆角
`./spacing`	仅间距
`./typography`	仅字号

按需引入更利于 tree-shaking，特别是当只需要某一类 token 的轻量场景。

为什么用 HSL

defaultFeedbackColorsHsl = {
  success: '142 71% 45%',
  warning: '38 92% 50%',
  // ...
};

存的是 HSL 数字字符串而不是完整 hsl(...)，目的是在 CSS 变量里组装：

:root {
  --success: 142 71% 45%;
}
.bg-success { background-color: hsl(var(--success)); }
.bg-success-50 { background-color: hsl(var(--success) / 0.5); }

这种模式让透明度可以独立调整，是 Tailwind 4 推荐的 CSS 变量写法。

跨平台输出

@skyroc/tailwind-plugin 把 tokens 输出为：

Web：color: hsl(var(--primary))
Native：color: var(--primary)（适配 NativeWind）

同一份 tokens，两套 CSS 变量绑定方式。

与 @skyroc/color 的关系

包	职责
`@skyroc/ui-tokens`	默认 token 值（hex / HSL 常量）
`@skyroc/color`	颜色算法（OKLCH 调色板、混色、对比度计算）

tokens 是起点，color 是变换工具。运行时主题切换会用 color 的算法把用户选择的主色推导成 11 档色阶，但默认值来自 tokens。

sideEffects: false

package.json 显式声明无副作用，bundler 可以放心 tree-shaking 未使用的 token。

设计哲学

Tokens 是数据，不是代码。让它保持「能被任何端、任何工具读取」的状态，避免引入运行时依赖污染。

这正是把 tokens 单独成包、放在 shared/ 而不是 @core/color 内部的原因。

@skyroc/ui-tokens

On this page