@devops-web/colors

所有颜色变量

使用方法

直接使用

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	白色背景