Design Tokens

N-UI 使用 CSS 自定义属性作为 Design Token，分为 Element Plus 兼容层（--el-*）和 N-UI 别名层（--n-*）。

Token 架构

ThemeConfig
  ├── colors     → --el-color-* / --el-text-color-* / --el-border-color-* / --el-fill-color-* / --el-bg-color-*
  ├── typography → --el-font-size-* / --el-font-family
  ├── borderRadius → --el-border-radius-*
  ├── spacing    → --n-spacing-*
  ├── shadows    → --el-box-shadow-*
  └── transitions → --el-transition-duration-*

颜色 Token

主色与功能色

Token	说明	默认值
--el-color-primary	主色	#409eff
--el-color-success	成功	#67c23a
--el-color-warning	警告	#e6a23c
--el-color-danger	危险	#f56c6c
--el-color-info	信息	#909399

每个功能色还会自动生成 light-3/5/7/8/9 与 dark-2 变体。

文本色

Token	说明	亮色值
--el-text-color-primary	主文本	#303133
--el-text-color-regular	常规文本	#606266
--el-text-color-secondary	次要文本	#909399
--el-text-color-placeholder	占位文本	#a8abb2

背景、边框、填充

Token	说明	亮色值
--el-bg-color	背景色	#ffffff
--el-bg-color-page	页面背景	#f2f3f5
--el-border-color	边框	#dcdfe6
--el-fill-color	填充	#f0f2f5

N-UI 别名 Token

Token	说明	映射
--n-color-primary	主色别名	var(--el-color-primary)
--n-color-success	成功色别名	var(--el-color-success)
--n-color-warning	警告色别名	var(--el-color-warning)
--n-color-danger	危险色别名	var(--el-color-danger)
--n-color-info	信息色别名	var(--el-color-info)
--n-color-text	文本色别名	var(--el-text-color-primary)
--n-color-text-secondary	次要文本别名	var(--el-text-color-regular)
--n-color-bg	背景色别名	var(--el-bg-color)
--n-color-border	边框色别名	var(--el-border-color)
--n-radius	圆角别名	var(--el-border-radius-base)
--n-font-size	字号别名	var(--el-font-size-base)
--n-transition-duration	过渡时长别名	var(--el-transition-duration)

间距 Token

Token	值
--n-spacing-xs	4px
--n-spacing-sm	8px
--n-spacing-base	16px
--n-spacing-lg	24px
--n-spacing-xl	32px

圆角 Token

Token	值
--el-border-radius-base	4px
--el-border-radius-small	2px
--el-border-radius-round	20px
--el-border-radius-circle	100%

字号 Token

Token	值
--el-font-size-extra-large	20px
--el-font-size-large	18px
--el-font-size-medium	16px
--el-font-size-base	14px
--el-font-size-small	13px
--el-font-size-extra-small	12px

自定义 Token

业务可在 ThemeConfig 中扩展自定义字段，并通过 applyCustomTheme 应用到 :root：

import { useTheme } from '@n-ui/hooks'

const { applyTheme } = useTheme()

applyCustomTheme({
  name: 'custom',
  mode: 'light',
  // ... 标准字段
  // 自定义字段会自动生成对应的 CSS 变量
} as any)

标准 Token 建议使用 ThemeConfig 类型完整定义，确保颜色变体正确生成。