用途:为设计系统提供视觉决策的单一数据源,统一排版、颜色与主题,并保证无障碍对比度合规。
主要能力:提供排版令牌(字体族、字号、字重、行高及 h1/h2/h3/body/caption 预设)、颜色令牌(primary、neutral、semantic 语义色、background、text、border),text 令牌标注了 WCAG 对比度等级(如 primary 15.8:1 AAA、muted 4.5:1 AA 最低)。通过 TypeScript 的 as const 与 keyof 类型导出,获得自动补全与类型安全。可导出为 CSS 变量,并集成 Tailwind 配置。
使用方式:在 tokens/typography.ts、tokens/colors.ts 中定义令牌;用 types/tokens.ts 导出类型;用 tokens/export.ts 的 generateCSSVariables() 生成 :root CSS 变量;在 tailwind.config.ts 中引入颜色令牌扩展主题;在 CSS-in-JS 或 React 组件中引用令牌与排版预设。
适用场景:构建一致的设计系统、需要 WCAG AA 颜色对比、希望类型安全访问令牌、需同时支持 Tailwind 与 CSS-in-JS 等多框架。
限制:资料未提供安装命令、包名、版本、许可证、收费与平台信息;示例中的具体色值与对比度数据仅为该资料给出的示例,实际项目需自行验证对比度。避免直接使用原始十六进制值、忽略对比度测试、缺少焦点状态等常见错误。