@use "sass:color";
@use "sass:map";
/*
全局定义变量
*/
$w-size: .85vw;

/**
 说明:
 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: 5;
// 普通z轴基础坐标
$w-z-index: 100;
// 顶层z轴基础坐标
$w-z-index-top: 1000;

$colors: (
  "main": hsl(185, 80%, 50%),
  "text": hsl(185, 80%, 5%),
  "bg": #F8F8F8,
  "primary": #3c9cff,
  "warn": #eaa339,
  "success": #5ac725,
  "info": #999,
  "error": #f56c6c,
  "danger": #f56c6c
);


$dark-colors: (
  "main": map.get($colors, "main"),
  "text": map.get($colors, "bg"),
  "bg": map.get($colors, "text"),
  "primary": map.get($colors, "primary"),
  "warn": map.get($colors, "warn"),
  "success": map.get($colors, "success"),
  "info": map.get($colors, "info"),
  "error": map.get($colors, "error"),
  "danger": map.get($colors, "danger")
);

$el-colors: (
  "primary":"main",
  "warn": "warn",
  "success": "success",
  "info": "info",
  "error": "error",
  "danger": "danger"
);




@mixin varColor($map, $step) {
  @each $name , $value in $map {
    $s: color.channel($value, "saturation", $space: hsl);
    $h: color.channel($value, "hue", $space: hsl);
    $l: color.channel($value, "lightness", $space: hsl);
    --w-#{$name}-h: #{$h};
    --w-#{$name}-s: #{$s};
    --w-#{$name}-l: #{$l};
    --w-#{$name}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), var(--w-#{$name}-l));
    // 生成浅色系列颜色变量
    @for $n from 1 through 6 {
      @if $n == 1 {
        --w-#{$name}-light: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) + #{$n} * var(--w-step) * 1%));
        --w-#{$name}-dark: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) - #{$n} * var(--w-step) * 1%));
      } @else {
        --w-#{$name}-light-#{$n - 1}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) + #{$n} * var(--w-step) * 1%));
        --w-#{$name}-dark-#{$n - 1}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) - #{$n} * var(--w-step) * 1%));
      }
    }

  }
}


@mixin varELColor($map, $step) {
  @each $name , $value in $map {

    --el-color-#{$name}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), var(--w-#{$value}-l));

    @for $n from 1 through 9 {
      --el-color-#{$name}-light-#{$n}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), calc(var(--w-#{$value}-l) + #{$n} * var(--w-step) * 1%));
      --el-color-#{$name}-dark-#{$n}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), calc(var(--w-#{$value}-l) - #{$n} * var(--w-step) * 1%));
    }
  }
}