@ydesign/ui-tokens
v0.1.1
Published
跨框架共享的设计 tokens：CSS variables + Tailwind preset + TS 常量
Maintainers
andyjhlReadme
@ydesign/ui-tokens
跨框架共享的设计 tokens：CSS variables + Tailwind preset + TS 常量。
零运行时依赖，可被 React / Vue / Frameworkless bundle / 任意宿主页面消费。
安装
pnpm add @ydesign/ui-tokens使用
1. 引入 CSS variables（必需）
在应用入口（任意 CSS 文件、main.ts 或 React/Vue 根组件）：
import '@ydesign/ui-tokens/style.css';注入后，:root 下会出现 --ydl-color-* / --ydl-radius-* 等所有 token。
2. 在 CSS / inline style 中使用
.toolbar {
background-color: var(--ydl-color-bg-container);
color: var(--ydl-color-text);
border-bottom: 1px solid var(--ydl-color-border);
}3. 在 JS / TS 中使用
import { tokens } from '@ydesign/ui-tokens';
<div style={{ color: tokens.color.text.css, padding: tokens.spacing.md.css }} />
// tokens.color.text.css === 'var(--ydl-color-text)'
// tokens.color.text.varName === '--ydl-color-text'4. 配合 Tailwind v4
/* globals.css */
@import 'tailwindcss';
@import '@ydesign/ui-tokens/style.css';
@config '@ydesign/ui-tokens/tailwind-preset';之后即可：
<div className="bg-bg-container text-text border border-border" />5. 切换深色模式
在 <html> 或任意祖先元素上加 data-theme="dark"：
<html data-theme="dark">所有 token 自动切换为深色值。
Token 命名
- 前缀
--ydl-（避免和宿主页面冲突） - 语义化命名（
--ydl-color-primary而非--ydl-blue-500） - 当前 light/dark 默认值精确对齐 antd v6，迁移期视觉零变化