/**
 说明:
 1. 在页面中建议使用css变量,原因有2:
	1.1. 主题更换/暗黑主题,可以改变父(根)标签的css变量实现
	1.2. 自定义组件设置css变量改变组件式样,这点在微信小程序及virtualHost下注意
 2. $变量对应css变量:$w-z-index -> --w-z-index
 3. 颜色变量说明,$colors中有main的键,对应的变量有
	3.1. --w-main: 颜色值
	3.2. --w-main-light: 颜色值 亮度 + $w-step
	3.3. --w-main-light-1: 颜色值 亮度 + $w-step * 2
	3.4. --w-main-light-2: 颜色值 亮度 + $w-step * 3
	3.5. --w-main-dark: 颜色值 亮度 - $w-step
	3.6. --w-main-dark-1: 颜色值 亮度 - $w-step * 2
	3.7. --w-main-dark-2: 颜色值 亮度 - $w-step * 3
	3.8. --w-main-h: 颜色色相
	3.9. --w-main-s: 颜色饱和度
	3.10. --w-main-l: 颜色亮度
	3.11. $w-step对应--w-step,亮度变化基础值
  4.如果需要更多的颜色:
	4.1. 使用css的hsl函数构造颜色: hsl(var(--w-main-h),var(--w-main-s),calc(var(--w-main-l) + 50%))
	4.2. 使用css的hsla函数构造透明度颜色: hsl(var(--w-main-h),var(--w-main-s),var(--w-main-l),.5)
	4.3. 使用css函数构造颜色,比较scss函数构造颜色在写法上显得麻烦一些,尽量使用预定义的颜色
	4.4. 构造颜色时,色相\饱和度\亮度\透明度都可以自由设置,但建议只修改亮度和透明度
 */
//颜色亮度变化值
$w-step: 10;
// 普通z轴基础坐标
$w-z-index:100;
// 顶层z轴基础坐标
$w-z-index-top:500;

$colors: 
(
  "main":		#2781bf,
  "text":		#333,
  "bg":			#F8F8F8,
  "primary":	#3c9cff,
  "warn": 		#eaa339,
  "success":	#5ac725,
  "info":		#999,
  "error":		#f56c6c,
	"danger": #f56c6c
);



@mixin varColor($map,$step) {
	@each $name , $value in $map {
		--w-#{$name}:#{$value};
		--w-#{$name}-h:#{hue($value)};
		--w-#{$name}-s:#{saturation($value)};
		--w-#{$name}-l:#{lightness($value)};
		--w-#{$name}-light:#{hsl(hue($value),saturation($value),lightness($value) + $step)};
		--w-#{$name}-light-1:#{hsl(hue($value),saturation($value),lightness($value) + ($step * 2))};
		--w-#{$name}-light-2:#{hsl(hue($value),saturation($value),lightness($value) + ($step * 3))};
		--w-#{$name}-dark:#{hsl(hue($value),saturation($value),lightness($value) - $step)};
		--w-#{$name}-dark-1:#{hsl(hue($value),saturation($value),lightness($value) - ($step * 2))};
		--w-#{$name}-dark-2:#{hsl(hue($value),saturation($value),lightness($value) - ($step * 3))};
	}
}