// 导入主题变量
@import './var.scss';

// 生成颜色阶梯的函数
@function generate-color-scale($color) {
  $scale: ();
  
  // 50-950 的颜色阶梯
  $steps: (
    50: 0.95,  // 95% 白色
    100: 0.9,  // 90% 白色
    200: 0.8,  // 80% 白色
    300: 0.7,  // 70% 白色
    400: 0.6,  // 60% 白色
    500: 0.5,  // 50% 白色
    600: 0.4,  // 40% 白色
    700: 0.3,  // 30% 白色
    800: 0.2,  // 20% 白色
    900: 0.1,  // 10% 白色
    950: 0.05  // 5% 白色
  );
  
  @each $step, $weight in $steps {
    $mixed-color: mix(white, $color, $weight * 100%);
    $scale: map-merge($scale, (
      $step: $mixed-color
    ));
  }
  
  @return $scale;
}

@each $name, $color in $themes {
  $color-scale: generate-color-scale($color);
  $light-color: map-get($theme-lights, $name);
  .theme-#{$name} {
    // 生成所有颜色阶梯的CSS变量
    @each $step, $value in $color-scale {
      --primary-color-#{$step}: #{$value};
    }
    
    // 保持原有的主色调
    --primary-color: #{$color};
    --primary-light-color: #{$light-color};
  }
  
  // 在同一个循环中导出JavaScript变量
  :export {
    #{$name}: $color;
    
    @each $step, $value in $color-scale {
      #{$name}-#{$step}: $value;
    }
  }
}

page, .theme-ie {
  --fore-title: #222;
  --fore-subtitle: #333;
  --fore-content: #555;
  --fore-tip: #777;
  --fore-light: #999;
  --fore-disabled: #b9bcc5;
  --fore-placeholder: #B3B3B3;
  //
  --back: #f2f3f7;
  --back-light: #f7f8fa;
  //
  --border: #dadbde;
  --border-light: #e5e6e9;
  //
  --secondary: #818CF8;
  --secondary-light: #F4F6FF;
  //
  --warning: #f9ae3d;
  --warning-dark: #f79824;
  --warning-disabled: #f9d39b;
  --warning-light: #fdf6ec;
  //
  --success: #5ac725;
  --success-dark: #53c21d;
  --success-disabled: #a9e08f;
  --success-light: #f5fff0;
  //
  --danger: #f72620;
  --danger-dark: #e45656;
  --danger-disabled: #f7b2b2;
  --danger-light: #fef0f0;
  //
  --info: #909399;
  --info-dark: #767a82;
  --info-disabled: #c4c6c9;
  --info-light: #f4f4f5;
}