设计变量
和 Arco Design 同名的设计变量，可以在这里查看主题内置的变量和当前的值。色阶变量写成 rgb(var(--primary-6))，其余写成 var(--color-text-1)；单击变量名即可复制。
主色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| primary-6 | rgb(var(--arcoblue-6)) | 常规 | ||
| primary-5 | rgb(var(--arcoblue-5)) | 悬浮（hover） | ||
| primary-7 | rgb(var(--arcoblue-7)) | 点击（click） | ||
| primary-4 | rgb(var(--arcoblue-4)) | 特殊场景 | ||
| primary-3 | rgb(var(--arcoblue-3)) | 一般禁用 | ||
| primary-2 | rgb(var(--arcoblue-2)) | 文字禁用 | ||
| primary-1 | rgb(var(--arcoblue-1)) | 浅色/白底悬浮 |
成功色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| success-6 | rgb(var(--green-6)) | 常规 | ||
| success-5 | rgb(var(--green-5)) | 悬浮（hover） | ||
| success-7 | rgb(var(--green-7)) | 点击（click） | ||
| success-4 | rgb(var(--green-4)) | 特殊场景 | ||
| success-3 | rgb(var(--green-3)) | 一般禁用 | ||
| success-2 | rgb(var(--green-2)) | 文字禁用 | ||
| success-1 | rgb(var(--green-1)) | 浅色/白底悬浮 |
警示色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| warning-6 | rgb(var(--orange-6)) | 常规 | ||
| warning-5 | rgb(var(--orange-5)) | 悬浮（hover） | ||
| warning-7 | rgb(var(--orange-7)) | 点击（click） | ||
| warning-4 | rgb(var(--orange-4)) | 特殊场景 | ||
| warning-3 | rgb(var(--orange-3)) | 一般禁用 | ||
| warning-2 | rgb(var(--orange-2)) | 文字禁用 | ||
| warning-1 | rgb(var(--orange-1)) | 浅色/白底悬浮 |
错误色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| danger-6 | rgb(var(--red-6)) | 常规 | ||
| danger-5 | rgb(var(--red-5)) | 悬浮（hover） | ||
| danger-7 | rgb(var(--red-7)) | 点击（click） | ||
| danger-4 | rgb(var(--red-4)) | 特殊场景 | ||
| danger-3 | rgb(var(--red-3)) | 一般禁用 | ||
| danger-2 | rgb(var(--red-2)) | 文字禁用 | ||
| danger-1 | rgb(var(--red-1)) | 浅色/白底悬浮 |
链接色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| link-6 | rgb(var(--arcoblue-6)) | - | 常规 | |
| link-5 | rgb(var(--arcoblue-5)) | - | 悬浮（hover） | |
| link-7 | rgb(var(--arcoblue-7)) | - | 点击（click） | |
| link-4 | rgb(var(--arcoblue-4)) | - | 特殊场景 | |
| link-3 | rgb(var(--arcoblue-3)) | - | 一般禁用 | |
| link-2 | rgb(var(--arcoblue-2)) | - | 文字禁用 | |
| link-1 | rgb(var(--arcoblue-1)) | - | 浅色/白底悬浮 |
边框颜色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| color-border-1 | var(--color-neutral-2) | 浅色 | ||
| color-border-2 | var(--color-neutral-3) | 一般 | ||
| color-border-3 | var(--color-neutral-4) | 深/悬浮 | ||
| color-border-4 | var(--color-neutral-6) | 重/按钮描边 |
填充颜色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| color-fill-1 | var(--color-neutral-1) | 浅/禁用 | ||
| color-fill-2 | var(--color-neutral-2) | 常规/白底悬浮 | ||
| color-fill-3 | var(--color-neutral-3) | 深/灰底悬浮 | ||
| color-fill-4 | var(--color-neutral-4) | 重/特殊场景 |
文字颜色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| color-text-1 | var(--color-neutral-10) | 强调/正文标题 | ||
| color-text-2 | var(--color-neutral-8) | 次强调/正文标题 | ||
| color-text-3 | var(--color-neutral-6) | 次要信息 | ||
| color-text-4 | var(--color-neutral-4) | 置灰信息 |
背景颜色
| 变量名 | 变量值 | CSS 变量 | 对应变量 | 描述 |
|---|---|---|---|---|
| color-bg-1 | #FFF | - | 整体背景色 | |
| color-bg-2 | #FFF | 一级容器背景 | ||
| color-bg-3 | #FFF | - | 二级容器背景 | |
| color-bg-4 | #FFF | - | 三级容器背景 | |
| color-bg-5 | #FFF | 下拉弹出框、Tooltip 背景颜色 | ||
| color-bg-white | #FFF | 白色背景 |
字体大小
| 变量名 | 变量值 | 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-small | 2px | 圆角-常规 | ||
| border-radius-medium | 4px | - | 圆角-中等 | |
| border-radius-large | 8px | - | 圆角-较大 | |
| border-radius-circle | 50% | - | 圆角-全圆角 |
阴影
| 变量名 | 变量值 | 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 |