可以在此查看组件库内置的设计变量以及默认值
主题色
iui Design 的四种状态色：primary、success、warning、danger，分别对应四种状态：正常、成功、警告、危险。
如果你想要自定义状态色，请阅读 主题定制。
主色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
primary-6 | #165DFF | --iui-primary-6 | 常规 |
primary-7 | #1454E6 | --iui-primary-7 | 点击态 |
primary-3 | #8BAEFF | --iui-primary-4 | 禁用态 |
primary-1 | #E8EFFF | --iui-primary-1 | 浅色背景 |
成功色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
success-6 | #00B42A | --iui-success-6 | 常规 |
success-7 | #00A226 | --iui-success-7 | 点击态 |
success-3 | #80DA95 | --iui-success-4 | 禁用态 |
success-1 | #E6F8EA | --iui-success-1 | 浅色背景 |
警示色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
warning-6 | #FF7D00 | --iui-warning-6 | 常规 |
warning-7 | #E67100 | --iui-warning-7 | 点击态 |
warning-3 | #FFBE80 | --iui-warning-4 | 禁用态 |
warning-1 | #FFF2E6 | --iui-warning-1 | 浅色背景 |
错误色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
danger-6 | #F53F3F | --iui-danger-6 | 常规 |
danger-7 | #DD3939 | --iui-danger-7 | 点击态 |
danger-3 | #FA9F9F | --iui-danger-4 | 禁用态 |
danger-1 | #FEECEC | --iui-danger-1 | 浅色背景 |
背景色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
color-bg | #FFFFFF | --iui-bg | 整体 |
color-bg-secondary | #F2F3F5 | --iui-bg-secondary | 次要 |
color-bg-active | #DFDFDF | --iui-bg-active | 激活态 |
color-bg-light | #F2F3F5 | --iui-bg-light | 浅色背景 |
color-bg-opacity | rgba(255, 255, 255, 0.8) | --iui-bg-opacity | 浮层透明 |
color-bg-white | #FFFFFF | --iui-white | 白色背景 |
文字色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
color-text | #272E3B | --iui-gray-8 | 正文 |
color-text-dark | #1D2129 | --iui-gray-9 | 标题 |
color-text-light | #4E5969 | --iui-gray-7 | 次要信息 |
color-text-lighten | #A9AEB8 | --iui-gray-5 | 置灰信息 |
边框颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
color-border | #E5E6EB | --iui-gray-3 | 常规 |
color-border-dark | #C9CDD4 | --iui-gray-4 | 深色 |
color-border-light | #DFDFDF | --iui-gray-2 | 浅色 |
color-border-lighten | #F2F3F5 | --iui-gray-1 | 更浅 |
字体大小
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| font-size-body | 14px | - | 正文 |
| font-size-title | 24px | - | 标题 |
| font-size-display | 54px | - | 运营标题 |
| font-size-huge | 16px | - | 正文-加大 |
| font-size-large | 15px | - | 正文-大 |
| font-size-medium | 14px | - | 正文 |
| font-size-small | 13px | - | 正文-小 |
| font-size-mini | 12px | - | 正文-极小 |
边框圆角
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| border-radius-none | 0 | - | 直角 |
| border-radius-small | 2px | - | 圆角-小 |
| border-radius-medium | 4px | - | 圆角-中 |
| border-radius-large | 8px | - | 圆角-大 |
| border-radius-huge | 36px | - | 圆角-极大 |
| border-radius-round | 50% | - | 圆形 |
尺寸
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| size-none | 0 | - | 0 |
| size-mini | 24px | - | 24px |
| size-small | 28px | - | 28px |
| size-medium | 32px | - | 32px |
| size-large | 36px | - | 36px |
| size-huge | 40px | - | 40px |
| size-N | (N * 4)px | - | N * 4px, N 最大取值 50 |