@use 'sass:math';
@use 'sass:map';
@use 'sass:color';
@use 'sass:meta';

// 本文件用于存储颜色变量，并进行颜色生成
// $colors默认为空，配合@forward和with可以替换$colors的值

// 初始数据格式：
// $colors: ('primary': ('base': #00d2ff), 'test': #FF0000, ...)
$colors: () !default;
// $text-color: ('primary': #303133)
$text-color: () !default;
// $border-color: ('light': #e4e7ed)
$border-color: () !default;

// 存储格式化后用于生成var变量的颜色，包含primary默认主题颜色和生成的mix和rgba颜色
// $colors-vars: ('test': #FF0000, 'primary': '#FF0000', 'primary-alpha-1': rgba(0,0,0,0), 'primary-light-1': #FF0000 ...)
$colors-vars: ();
// 存储格式化后用于添加到bor-color中的非mix和rgba颜色，包含primary默认主题颜色
// $colors: ('test': #FF0000, 'primary': #FF0000)
$colors-base: ();

// 创建mix和rgba的两种mixin，用于生成更多的颜色
@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: #FFFFF) {
  // 使用deep-merge向$colors.$type中添加新的属性
  $colors-vars: map.deep-merge(
      (
        '#{$type}-#{$mode}-#{$number}':
        color.mix(
            $mix-color,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
        ),
      ),
      $colors-vars
  ) !global;
}

@mixin set-color-rgba-level($type, $number) {
  // 使用deep-merge向$colors.$type中添加新的属性
  $colors-vars: map.deep-merge(
      (
        '#{$type}-alpha-#{$number}':
        rgba(
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
        )
      ),
      $colors-vars
  ) !global;
}

$percentage: (1, 3, 5, 7, 8, 9);

@each $type, $val in $colors {
  // $colors: ('primary': ('base': #00d2ff), 'test': #FF0000)
  // 如果数据是map,向该类型中添加alpha、light和dark颜色
  // 添加后$colors: ('primary': ('base': #00d2ff, 'alpha-1': rgba(0,0,0,0), 'light-1': #FF0000, ...), 'test': #FF0000)
  @if meta.type-of($val) == 'map' {
    $color: map.get($colors, $type, 'base');
    $colors-vars: map.deep-merge((#{$type}: $color), $colors-vars) !global;
    $colors-base: map.deep-merge((#{$type}: $color), $colors-base) !global;

    @each $i in $percentage {
      @include set-color-mix-level($type, $i, 'light', #FFFFFF);
    }
    @each $i in $percentage {
      @include set-color-rgba-level($type, $i);
    }
    @include set-color-mix-level($type, 2, 'dark', #000000);
  } @else {
    // 如果不是一个map类型的设备，直接存储完事
    $colors-vars: map.deep-merge((#{$type}: $val), $colors-vars) !global;
    $colors-base: map.deep-merge((#{$type}: $val), $colors-base) !global;
  }
}