// 生成颜色阶梯的函数
@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($base, $name + '-light');

  .theme-#{$name} {

    // 生成所有颜色阶梯的CSS变量
    @each $step, $value in $color-scale {
      --primary-color-#{$step}: #{$value};
    }

    // 保持原有的主色调
    --primary-color: #{$color};
    --primary-light-color: #{$light-color};

    @each $name_base, $color_base in $base {
      --#{$name_base}: #{$color_base};
    }
  }

  // 在同一个循环中导出JavaScript变量
  :export {
    #{$name}: $color;

    @each $step, $value in $color-scale {
      #{$name}-#{$step}: $value;
    }
  }
}

// 导出所有基础颜色
@each $name, $color in $base {
  :export {
    #{$name}: $color;
  }
}