设计系统packages/design/tokens

tokens 能力包

运行时 CSS 变量 + ThemeProvider — 所有 app 颜色 / 间距 / radius 的单一数据源;在 globals.css 中 @import。

打开文档

稳定性: 稳定
作用域: 全局
边界: packages/design/tokens
归属: @nebutra/design

设计 tokens

运行时 CSS 变量，单一事实来源

中性色阶

12 steps

--neutral-1

--neutral-2

--neutral-3

--neutral-4

--neutral-5

--neutral-6

--neutral-7

--neutral-8

--neutral-9

--neutral-10

--neutral-11

--neutral-12

品牌与状态

--brand-primary

--brand-accent

--brand-gradient

--status-danger

--status-success

--status-warning

字号梯度

Aa 展示

展示

Aa 标题

标题

正文以舒适的阅读节奏呈现。

正文

标注位于最小的字号层级。

标注

圆角

--radius-sm

--radius-md

--radius-lg

--radius-panel

使用方式tokens.css

typescript

tokens.css

1@import "@nebutra/tokens/styles.css";
2
3:root {
4  --brand-primary: oklch(0.55 0.24 256);
5  --brand-accent: oklch(0.85 0.18 175);
6  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
7}
8
9.cta {
10  background: var(--brand-gradient);
11  color: var(--neutral-1);
12  border-radius: var(--radius-md);
13}