设计变量
组件库的全局 Token，可以在此查看组件库内置的设计变量以及默认值。
提示
所有设计变量支持亮色和暗色两种模式，可通过切换主题查看不同模式下的变量值。
主色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| primary-6 | rgb(var(--arcoblue-6)) | --primary-6 | 常规 |
| primary-5 | rgb(var(--arcoblue-5)) | --primary-5 | 悬浮（hover） |
| primary-7 | rgb(var(--arcoblue-7)) | --primary-7 | 点击（click） |
| primary-4 | rgb(var(--arcoblue-4)) | --primary-4 | 特殊场景 |
| primary-3 | rgb(var(--arcoblue-3)) | --primary-3 | 一般禁用 |
| primary-2 | rgb(var(--arcoblue-2)) | --primary-2 | 文字禁用 |
| primary-1 | rgb(var(--arcoblue-1)) | --primary-1 | 浅色/白底悬浮 |
成功色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| success-6 | rgb(var(--green-6)) | --success-6 | 常规 |
| success-5 | rgb(var(--green-5)) | --success-5 | 悬浮（hover） |
| success-7 | rgb(var(--green-7)) | --success-7 | 点击（click） |
| success-4 | rgb(var(--green-4)) | --success-4 | 特殊场景 |
| success-3 | rgb(var(--green-3)) | --success-3 | 一般禁用 |
| success-2 | rgb(var(--green-2)) | --success-2 | 文字禁用 |
| success-1 | rgb(var(--green-1)) | --success-1 | 浅色/白底悬浮 |
警示色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| warning-6 | rgb(var(--orange-6)) | --warning-6 | 常规 |
| warning-5 | rgb(var(--orange-5)) | --warning-5 | 悬浮（hover） |
| warning-7 | rgb(var(--orange-7)) | --warning-7 | 点击（click） |
| warning-4 | rgb(var(--orange-4)) | --warning-4 | 特殊场景 |
| warning-3 | rgb(var(--orange-3)) | --warning-3 | 一般禁用 |
| warning-2 | rgb(var(--orange-2)) | --warning-2 | 文字禁用 |
| warning-1 | rgb(var(--orange-1)) | --warning-1 | 浅色/白底悬浮 |
错误色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| danger-6 | rgb(var(--red-6)) | --danger-6 | 常规 |
| danger-5 | rgb(var(--red-5)) | --danger-5 | 悬浮（hover） |
| danger-7 | rgb(var(--red-7)) | --danger-7 | 点击（click） |
| danger-4 | rgb(var(--red-4)) | --danger-4 | 特殊场景 |
| danger-3 | rgb(var(--red-3)) | --danger-3 | 一般禁用 |
| danger-2 | rgb(var(--red-2)) | --danger-2 | 文字禁用 |
| danger-1 | rgb(var(--red-1)) | --danger-1 | 浅色/白底悬浮 |
链接色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| link-6 | rgb(var(--arcoblue-6)) | --link-6 | 常规 |
| link-5 | rgb(var(--arcoblue-5)) | --link-5 | 悬浮（hover） |
| link-7 | rgb(var(--arcoblue-7)) | --link-7 | 点击（click） |
| link-4 | rgb(var(--arcoblue-4)) | --link-4 | 特殊场景 |
| link-3 | rgb(var(--arcoblue-3)) | --link-3 | 一般禁用 |
| link-2 | rgb(var(--arcoblue-2)) | --link-2 | 文字禁用 |
| link-1 | rgb(var(--arcoblue-1)) | --link-1 | 浅色/白底悬浮 |
数据色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| data-1 | rgb(var(--data-1)) | --data-1 | - |
| data-2 | rgb(var(--data-2)) | --data-2 | - |
| data-3 | rgb(var(--data-3)) | --data-3 | - |
| data-4 | rgb(var(--data-4)) | --data-4 | - |
| data-5 | rgb(var(--data-5)) | --data-5 | - |
| data-6 | rgb(var(--data-6)) | --data-6 | - |
| data-7 | rgb(var(--data-7)) | --data-7 | - |
| data-8 | rgb(var(--data-8)) | --data-8 | - |
| data-9 | rgb(var(--data-9)) | --data-9 | - |
| data-10 | rgb(var(--data-10)) | --data-10 | - |
| data-11 | rgb(var(--data-11)) | --data-11 | - |
| data-12 | rgb(var(--data-12)) | --data-12 | - |
| data-13 | rgb(var(--data-13)) | --data-13 | - |
| data-14 | rgb(var(--data-14)) | --data-14 | - |
| data-15 | rgb(var(--data-15)) | --data-15 | - |
| data-16 | rgb(var(--data-16)) | --data-16 | - |
| data-17 | rgb(var(--data-17)) | --data-17 | - |
| data-18 | rgb(var(--data-18)) | --data-18 | - |
| data-19 | rgb(var(--data-19)) | --data-19 | - |
| data-20 | rgb(var(--data-20)) | --data-20 | - |
边框颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| color-border-1 | var(--color-neutral-2) | --color-border-1 | 浅色 |
| color-border-2 | var(--color-neutral-3) | --color-border-2 | 一般 |
| color-border-3 | var(--color-neutral-4) | --color-border-3 | 深/悬浮 |
| color-border-4 | var(--color-neutral-6) | --color-border-4 | 重/按钮描边 |
填充颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| color-fill-1 | var(--color-neutral-1) | --color-fill-1 | 浅/禁用 |
| color-fill-2 | var(--color-neutral-2) | --color-fill-2 | 常规/白底悬浮 |
| color-fill-3 | var(--color-neutral-3) | --color-fill-3 | 深/灰底悬浮 |
| color-fill-4 | var(--color-neutral-4) | --color-fill-4 | 重/特殊场景 |
文字颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| color-text-1 | var(--color-neutral-10) | --color-text-1 | 强调/正文标题 |
| color-text-2 | var(--color-neutral-8) | --color-text-2 | 次强调/正文标题 |
| color-text-3 | var(--color-neutral-6) | --color-text-3 | 次要信息 |
| color-text-4 | var(--color-neutral-4) | --color-text-4 | 置灰信息 |
背景颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| color-bg-1 | #FFF | --color-bg-1 | 整体背景色 |
| color-bg-2 | #FFF | --color-bg-2 | 一级容器背景 |
| color-bg-3 | #FFF | --color-bg-3 | 二级容器背景 |
| color-bg-4 | #FFF | --color-bg-4 | 三级容器背景 |
| color-bg-5 | #FFF | --color-bg-5 | 下拉弹出框、Tooltip 背景颜色 |
| color-bg-white | #FFF | --color-bg-white | 白色背景 |
字体大小
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| font-size-body-3 | 14px | - | 正文-常规 |
| font-size-body-2 | 13px | - | 正文-常规-小 |
| font-size-body-1 | 12px | - | 辅助文案/次要文案 |
| font-size-caption | 12px | - | 水印文本 |
| font-size-title-1 | 16px | - | 标题-小 |
| font-size-title-2 | 20px | - | 标题-中 |
| font-size-title-3 | 24px | - | 标题-大 |
| font-size-display-1 | 36px | - | 运营标题-小 |
| font-size-display-2 | 48px | - | 运营标题-中 |
| font-size-display-3 | 56px | - | 运营标题-大 |
字重
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| font-weight-400 | 400 | - | 常规 |
| font-weight-500 | 500 | - | 中等（加粗） |
| font-weight-600 | 600 | - | 半粗 |
| font-weight-700 | 700 | - | 粗体 |
| font-weight-800 | 800 | - | 中黑 |
| font-weight-900 | 900 | - | 黑体 |
| font-weight-300 | 300 | - | 细体 |
| font-weight-200 | 200 | - | 纤细 |
| font-weight-100 | 100 | - | 极细 |
尺寸
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| size-none | 0 | - | 0 |
| size-1 | 4px | - | 4px |
| size-2 | 8px | - | 8px |
| size-3 | 12px | - | 12px |
| size-4 | 16px | - | 迷你（24px） |
| size-5 | 20px | - | 20px |
| size-N | (4 * N)px | - | 变量对应的值为 (4 * N)px 大小 |
| size-50 | 200px | - | 200px |
组件尺寸
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| size-mini | @size-6 | - | 迷你（24px） |
| size-small | @size-7 | - | 较小（28px） |
| size-default | @size-8 | - | 中等（32px） |
| size-large | @size-9 | - | 较大（36px） |
边框宽度
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| border-none | 0 | - | 无边框 |
| border-1 | 1px | - | 常规 |
| border-2 | 2px | - | 较粗 |
| border-3 | 3px | - | 粗 |
边框圆角
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| border-radius-none | 0 | --border-radius-none | 直角 |
| border-radius-small | 2px | --border-radius-small | 圆角-常规 |
| border-radius-medium | 4px | --border-radius-medium | 圆角-中等 |
| border-radius-large | 8px | --border-radius-large | 圆角-较大 |
| border-radius-circle | 50% | --border-radius-circle | 圆角-全圆角 |
阴影
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
| shadow-special | 0 0 1px rgba(0, 0, 0, 0.3) | - | 特殊阴影 |
| shadow1-center | 0 -2px 5px rgba(0, 0, 0, 0.1) | - | 阴影样式1 |
| shadow2-center | 0 0 10px rgba(0, 0, 0, 0.1) | - | 阴影样式2 |
| shadow3-center | 0 0 20px rgba(0, 0, 0, 0.1) | - | 阴影样式3 |