Skip to content

主题

主题 是用于统一界面风格和视觉效果的配置集合。 其中 Design Token 是设计系统中用来存储视觉样式的最小单位,包括颜色、字体大小、边距、动画等。

Design Token

我们将 Design Token 抽象成三层结构,分别是 Seed Token、Map Token 和 Alias Token。

TIP

在大部分情况下,使用 Seed Token 就可以满足定制主题的需要。

基础变量(Seed Token)

Token 名称描述类型默认值
borderRadius基础组件的圆角大小,如按钮、输入框等number6
colorBgBase用于背景色梯度的基础变量,生成背景色梯度变量string#fff
colorError表示操作失败的颜色,如错误状态提示string#ff4d4f
colorInfo表示操作信息的颜色,如 Alert、Tag 等string#1677ff
colorLink控制超链接的颜色string#1677ff
colorPrimary品牌色string#1677ff
colorSuccess表示操作成功的颜色,如 Result、Progress 等组件string#52c41a
colorTextBase用于文本色梯度的基础变量,生成文本色梯度变量string#000
colorWarning表示操作警告的颜色,如 Notification 等string#faad14
controlHeight基础控件的高度,如按钮和输入框number32
fontFamily使用系统默认界面字体,提供屏显友好的备用字体string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontFamilyCode代码字体,用于 code、pre、kbd 元素string'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fontSize常用的字体大小number14
lineType控制边框和分割线样式stringsolid
lineWidth控制边框和分割线宽度number1
motion配置动画效果,false 时关闭动画booleantrue
sizePopupArrow组件箭头的尺寸number16
sizeStep控制组件尺寸的基础步长number4
sizeUnit控制尺寸变化单位number4
zIndexBase组件基础 Z 轴值number0
zIndexPopupBase浮层类组件的基础 Z 轴值number1000

梯度变量(Map Token)

继承所有 SeedToken 的属性

Map Token 是基于 Seed 派生的梯度变量。定制 Map Token 推荐通过 theme.algorithm 来实现。

别名变量(Alias Token)

继承所有 MapToken 的属性

Alias Token 是 Map Token 的语意化别名,用于组件内使用。

模式算法(algorithm)

用于将 Seed Token 展开为 Map Token。提供了 3 种算法:

  • default: 默认算法
  • compact: 紧凑算法
  • loose: 宽松算法(适用于“长辈模式”等场景)