设计 Token
所有 Token 以 CSS 变量形式暴露在 :root,可以在任意层级覆盖。
配色
中性色阶
| Token | 色值 | 用途 |
|---|---|---|
--color-neutral-950 | #0D0D0D | 主标题、最深文本 |
--color-neutral-700 | #374151 | 正文文本 |
--color-neutral-500 | #6B7280 | 次要文本、占位符 |
--color-neutral-300 | #D1D5DB | 边框、分割线 |
--color-neutral-100 | #F3F4F6 | 悬浮背景、斑马纹 |
--color-neutral-50 | #F5F5F4 | 页面背景 |
强调色
| Token | 色值 | 用途 |
|---|---|---|
--color-accent | #9ebbde | 主按钮、焦点环、选中态 |
--color-accent-light | #7299a0 | 悬浮态 |
--color-accent-subtle | rgba(158,187,222,0.12) | 标签背景、focus ring |
动画
缓动曲线
| Token | 曲线 | 适用 |
|---|---|---|
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | 弹跳、缩放 |
--ease-smooth | cubic-bezier(0.25, 0.1, 0.25, 1) | 状态过渡 |
--ease-out | cubic-bezier(0.0, 0.0, 0.2, 1) | 弹层进入 |
时长
| Token | 时长 | 场景 |
|---|---|---|
--duration-fast | 160ms | 颜色、透明度 |
--duration-base | 220ms | 状态切换 |
--duration-enter | 320ms | 弹层、抽屉 |
间距(4px 基准)
| Token | 值 |
|---|---|
--space-1 | 4px |
--space-2 | 8px |
--space-3 | 12px |
--space-4 | 16px |
--space-6 | 24px |
--space-8 | 32px |
--space-12 | 48px |
密度
| Token | 默认值 | 说明 |
|---|---|---|
--density-factor | 1 | 间距缩放因子。桌面端推荐 0.75。覆盖此变量即可全局紧凑 |
圆角
| Token | 值 | 组件 |
|---|---|---|
--radius-sm | 6px | Tag, Badge |
--radius-md | 9px | Input, Button |
--radius-lg | 14px | Card, Modal |
--radius-full | 9999px | Radio, Avatar |
阴影
| Token | 用途 |
|---|---|
--shadow-sm | Card 默认态 |
--shadow-md | Card hover、下拉菜单 |
--shadow-lg | Modal、Drawer |
--shadow-xl | 全局 Toast |
暗色主题
在父容器（如 html 或 body）设置 data-theme="dark" 即可切换暗色模式。
html
<html data-theme="dark">暗色模式下自动切换的 Token：
| Token | 亮色 | 暗色 |
|---|---|---|
--color-neutral-950 | #0D0D0D | #F5F5F4 |
--color-neutral-700 | #374151 | #D1D5DB |
--color-neutral-500 | #6B7280 | #9CA3AF |
--color-neutral-300 | #D1D5DB | #4B5563 |
--color-neutral-100 | #F3F4F6 | #1F2937 |
--color-neutral-50 | #F5F5F4 | #111827 |
--color-accent-subtle | rgba(…,0.12) | rgba(…,0.2) |
| 所有阴影 | 亮背景阴影 | 暗背景阴影 |
其余 Token（强调色、动画、间距、圆角）在暗色模式下保持不变。
自动跟随系统
结合 CSS 的 prefers-color-scheme 可以实现自动切换：
css
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
html { background: #111827; }
}