色彩控制

GovUI 采用了统一的色彩控制，为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

主色

GovUI 默认的主题色是政府机构指定的红色。

主题色 primary

#e74c3c

辅助色

除了主颜色外，不同的场景中使用不同的场景颜色 (例如，慎重的颜色表示这个操作应该慎重)。

成功 success

#27ae60

警告 warning

#f39c12

慎重 danger

#8e44ad

内容 info

#909399

其它

用于文本、背景和边框颜色。 通过运用不同的中性色，来表现层次结构。

文本颜色 text

#303133

边框色 border

#cdd0d6

填充色 fill

#e6e8eb

更改颜色

内部实现

GovUI的样式使用Scss编写而成，内部的颜色控制非常简洁，它生成了一些必要的CSS变量。

查看sass代码

@use "sass:math";
@use "sass:map";
@use "sass:color";

// 定义主题颜色
$theme-colors: (
	"primary": #e74c3c, // 主要颜色，常用于主要操作
	"success": #27ae60, // 成功颜色，用于表示成功状态
	"warning": #f39c12, // 警告颜色，用于警告提示
	"danger": #8e44ad,  // 危险颜色，用于表示错误或危险状态
	"info": #909399    // 信息颜色，用于一般信息提示
) !default;

// 定义常用其他颜色
$special-colors: (
	"text-color": #303133, // 主文本颜色
	"border-color": #cdd0d6, // 边框颜色
	"fill-color": #e6e8eb   // 填充颜色
) !default;

// 定义 colors
$colors: map.merge($theme-colors, $special-colors) !default;

:root {
	// 遍历 colors，为每个颜色生成不同等级的颜色变量
	@each $color-name, $color-value in $colors {
		// 生成暗色版本的颜色
		--gov-#{$color-name}-dark: #{color.mix(#000, $color-value, 25%)};
		// 原始颜色
		--gov-#{$color-name}: #{$color-value};
		// 生成从1到9的渐变色
		@for $i from 1 through 9 {
			$color-tint: color.mix(white, $color-value, $i * 10%); // 从10%到90%的白色混合
			--gov-#{$color-name}-#{$i}: #{$color-tint};
		}
	}

	// 定义常见的圆角大小，例如容器，元素，使 UI 更加平滑
	--gov-border-radius-base: 5px;

	// 定义表单控件的不同尺寸的常规高度
	// 这些尺寸用于input、select、Button等基础表单元素，利于控制其在 FormItem 当中的 UI表现
	--gov-large-height: 40px; // 大尺寸高度
	--gov-default-height: 36px; // 默认尺寸高度
	--gov-small-height: 32px; // 小尺寸高度

	// 定义表单控件不同尺寸的字体大小
	// 这些字体大小与上述高度相对应
	--gov-large-font-size: 14px; // 大尺寸字体大小
	--gov-default-font-size: 14px; // 默认尺寸字体大小
	--gov-small-font-size: 12px; // 小尺寸字体大小
}

CSS全局变量

你也可以使用CSS变量，也称为CSS自定义属性（Custom Properties），允许你在CSS中定义可复用的值。这些变量可以在不同的选择器中使用，提高样式的一致性和可维护性。

GovUI使用了这一点，Scss只是生成了这些CSS全局变量的初始值，以primary举例，如下：

/* Scss默认生成的css全局变量 */
:root {
  --gov-primary-dark: rgb(173.25, 57, 45);
  --gov-primary: #e74c3c;
  --gov-primary-1: rgb(233.4, 93.9, 79.5);
  --gov-primary-2: rgb(235.8, 111.8, 99);
  --gov-primary-3: rgb(238.2, 129.7, 118.5);
  --gov-primary-4: rgb(240.6, 147.6, 138);
  --gov-primary-5: rgb(243, 165.5, 157.5);
  --gov-primary-6: rgb(245.4, 183.4, 177);
  --gov-primary-7: rgb(247.8, 201.3, 196.5);
  --gov-primary-8: rgb(250.2, 219.2, 216);
  --gov-primary-9: rgb(252.6, 237.1, 235.5);
  ...
}

其它以此类推，更多可使用浏览器开发工具查看。

使用CSS覆盖

新建一个style.css文件，替换CSS变量：

:root {
  --gov-primary: red;
}

在组件样式下方引入：

...
import "GovUI/dist/index.css";
import "path/to/your/module/style.css"; // style.css 文件地址
...

使用js动态更改

普通项目推荐使用Scss控制主题色，而如果你需要js动态更改主题色，你只需要执行类似以下js代码即可：

// 设置新的 --gov-primary 值
document.documentElement.style.setProperty('--gov-primary', '#c0392b');