@design-os/tokens

W3C DTCG 兼容 — 设计 Token 引擎，CSS/JS/JSON 四态输出

安装

npm install @design-os/tokens

使用

CSS 变量（推荐 — 零 JS 开销）

@import '@design-os/tokens/css';

.my-button {
  background: var(--color-primary-500);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

带 --ds- 前缀版本

@import '@design-os/tokens/prefixed';

.my-button {
  background: var(--ds-color-primary-500);
  border-radius: var(--ds-radius-md);
}

JavaScript

import tokens from '@design-os/tokens';

console.log(tokens.color.primary[500].value); // '#2563eb'
console.log(tokens.fontSize.base.value);       // '14px'

JSON

import tokens from '@design-os/tokens/json';
// → 完整的 W3C DTCG 格式 JSON 对象

Token 类别（64 个）

| 类别 | 数量 | 示例 | |------|:---:|------| | Color — Primary | 10 | --color-primary-50 … --color-primary-900 | | Color — Neutral | 10 | --color-neutral-50 … --color-neutral-900 | | Color — Semantic | 4 | --color-success, --color-warning, --color-error, --color-info | | Spacing | 7 | --spacing-xs … --spacing-3xl | | Radius | 5 | --radius-sm … --radius-full | | Typography | 16 | font family + size + weight + line-height | | Shadow | 3 | --shadow-sm / --shadow-md / --shadow-lg | | Motion | 7 | --duration-fast / --ease-in-out / … | | Breakpoint | 6 | --bp-sm … --bp-2xl |

CLI 生成

ds generate --tokens
# → outputs/tokens.css / tokens.prefixed.css / tokens.js / tokens.json

License

MIT