设计令牌
所有组件样式只消费 var(--lx-*) 令牌。你的业务代码也应当直接用它们——换主题时自动跟随。
引入：@luxeanor/ui/styles/tokens.css。分两类：静态令牌（全主题共享）与语义令牌（随 data-theme × data-mode 变化）。
静态令牌（全主题共享）
排版
| 令牌 | 值 | 用途 |
|---|---|---|
--lx-font-family | "Inter", ui-sans-serif, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif | 正文字体栈 |
--lx-font-display | "Inter", ui-sans-serif, -apple-system, "PingFang SC", sans-serif | 展示字体栈 |
--lx-text-xs | 12px | 辅助文字 |
--lx-text-sm | 13px | 次要文字 |
--lx-text-md | 14px | 正文默认 |
--lx-text-lg | 16px | 强调正文 |
--lx-text-xl | 18px | 小标题 |
--lx-text-2xl | 24px | 标题 |
间距 / 圆角 / 层级
| 令牌 | 值 | 用途 |
|---|---|---|
--lx-space-1 ~ --lx-space-8 | 4 / 8 / 12 / 16 / 20 / 24 / 32px | 间距阶梯（1,2,3,4,5,6,8 档） |
--lx-radius-sm | 8px | 小圆角（输入框等） |
--lx-radius-md | 12px | 中圆角（按钮/卡片） |
--lx-radius-lg | 16px | 大圆角（面板） |
--lx-radius-xl | 24px | 特大圆角（大卡） |
--lx-radius-full | 999px | 胶囊 |
--lx-z-dropdown / modal / toast / popover / confirm | 1000 / 1100 / 1200 / 1300 / 1400 | 浮层 z-index 阶梯 |
动效
| 令牌 | 值 | 用途 |
|---|---|---|
--lx-dur | 180ms | 常规过渡 |
--lx-dur-slow | 400ms | 慢过渡 |
--lx-dur-entrance | 800ms | 入场动画 |
--lx-ease | cubic-bezier(.16,1,.3,1) | 标准缓动 |
--lx-ease-spring | cubic-bezier(.34,1.56,.64,1) | 弹性缓动 |
语义令牌（随主题变化）
下表值为默认主题（
amethyst × light）示例；其余 7 个组合的完整取值见包内styles/tokens.css。
主色系（随 data-theme 家族）
| 令牌 | 默认值 | 用途 |
|---|---|---|
--lx-primary | #6200EE | 主色 |
--lx-primary-hover / -active | #7A2BFF / #4A00B1 | 交互态 |
--lx-primary-soft | rgba(98,0,238,.08) | 主色浅底 |
--lx-primary-container / --lx-on-primary-container | #E8DDFF / #22005D | 容器底 / 容器上文字（M3） |
--lx-grad-gold | 主色渐变 | 品牌渐变（历史名，四家族都提供） |
--lx-grad-metal | 金属渐变 | 金属字效果 |
--lx-glow-gold / -strong | 主色光晕 | 发光投影 |
--lx-ring | 0 0 0 3px rgba(...,.18) | 聚焦环 |
中性阶梯（随 data-mode 明暗）
| 令牌 | 默认值 | 用途 |
|---|---|---|
--lx-bg | #FEF7FF | 页面底 |
--lx-bg-low / -muted / -hover / -high | #F8F2F9 / #F2ECF3 / #ECE6ED / #E6E1E8 | 表面阶梯（低→高） |
--lx-bg-raised | #FFFFFF | 浮起表面（卡片/浮层） |
--lx-surface / --lx-surface-muted | 同 raised / muted | 语义别名 |
--lx-glass-bg / --lx-glass-border | rgba(255,255,255,.72) / rgba(31,30,27,.10) | 玻璃层 |
--lx-text / -secondary / -muted / -invert | #1D1B20 / #494456 / #6E6880 / #FFFFFF | 文字阶梯 |
--lx-border / --lx-border-strong | #CBC3D9 / #7A7488 | 边框 |
--lx-hairline / --lx-hairline-lit | rgba(31,30,27,.08 / .14) | 发丝线（受光/非受光） |
--lx-shadow-sm / -md / -lg | 三档投影 | 层级投影 |
--lx-light-top | inset 0 1px 0 rgba(255,255,255,.6) | 顶部受光 |
--lx-overlay | rgba(29,26,19,.32) | 遮罩 |
状态色
| 令牌 | 默认值（light） | 用途 |
|---|---|---|
--lx-success / --lx-success-soft | #2E7D46 / #DEEDD5 | 成功 |
--lx-warning / --lx-warning-soft | #A96A00 / #FFE3BB | 警告 |
--lx-danger / --lx-danger-soft | #BA1A1A / #F9DEDC | 危险 |
--lx-info / --lx-info-soft | #2563EB / #DFE8F6 | 信息 |
--lx-accent / --lx-accent-soft | #6553E0 / rgba(101,83,224,.10) | 强调辅色 |
TS 侧访问
ts
import { tokens, staticTokens, modeTokens, familyTokens, THEME_FAMILIES } from '@luxeanor/ui'令牌对象与 CSS 逐字同步（库内有测试强制校验），适合画布/图表等无法用 CSS 变量的场景。