1.1.0 • Published 9 months ago
@devops-web/colors v1.1.0
所有颜色变量
使用方法
直接使用
import '@devops-web/colors';自定义
// custom.less
@import '@devops-web/colors/src/index.less';
@theme-tag: body; // 主题css变量定义的选择器
@vars-prefix: custom; // css变量的前缀
@brand-6: #9fdb1d; // 自定义主题颜色主色
| 变量名 | CSS变量 | 描述 |
|---|---|---|
| 7 | --primary-7 | 点击（active） |
| 6 | --primary-6 | 常规 |
| 5 | --primary-5 | 悬浮（hover）、边框 |
| 4 | --primary-4 | 边框（hover) |
| 3 | --primary-3 | 文字禁用、边框禁用、禁用背景色 |
| 2 | --primary-2 | 背景（hover） |
| 1 | --primary-1 | 背景 |
文字颜色
| 变量名 | CSS变量 | 描述 |
|---|---|---|
| --color-text-1 | --gray-10 | 标题/正文 |
| --color-text-2 | --gray-8 | 描述信息 |
| --color-text-3 | --gray-6 | 次要信息 |
| --color-text-4 | --gray-4 | 置灰信息/禁用/placeholder |
边框颜色
| 变量名 | 变量值 | 描述 |
|---|---|---|
| --color-border-1 | --gray-2 | 浅色 |
| --color-border-2 | --gray-3 | 一般 |
| --color-border-3 | --gray-4 | 深/悬浮 |
| --color-border-4 | --gray-6 | 重/按钮描边 |
链接色
| 变量名 | 变量值 | 描述 |
|---|---|---|
| --color-link-7 | --brand-7 | 点击（click） |
| --color-link-6 | --brand-6 | 常规 |
| --color-link-5 | --brand-5 | 悬浮（hover） |
| --color-link-4 | --brand-4 | 特殊场景 |
| --color-link-3 | --brand-3 | 一般禁用 |
| --color-link-2 | --brand-2 | 文字禁用 |
| --color-link-1 | --brand-1 | 浅色/白底悬浮 |
背景颜色
| 变量名 | 变量值 | 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 | 白色背景 |