feat: 补全深蓝模式下，primary 颜色各种状态 (#81)

src/styles/theme/dark-blue/element-plus.css

@@ -7,6 +7,12 @@
 html.dark-blue {
   /** color */
   --el-color-primary: #01efb7bb;
+  --el-color-primary-light-3: rgba(1, 147, 127, 0.8133333333);
+  --el-color-primary-light-5: rgba(2, 102, 99, 0.8666666667);
+  --el-color-primary-light-7: rgba(2, 65, 77, 0.92);
+  --el-color-primary-light-8: rgba(2, 49, 68, 0.9466666667);
+  --el-color-primary-light-9: rgba(2, 35, 59, 0.9733333333);
+  --el-color-primary-dark-2: rgba(1, 167, 128, 0.7866666667);
   --el-color-success: #01efb7bb;
   /** text-color */
   --el-text-color-primary: rgba(255, 255, 255, 0.8);
@@ -28,3 +34,8 @@ html.dark-blue {
   /** mask */
   --el-mask-color: rgba(0, 0, 0, 0.5);
 }
+
+/** button */
+html.dark-blue .el-button {
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
+}

src/styles/theme/dark-blue/element-plus.scss

@@ -4,10 +4,24 @@
  */
 
 @use "sass:map";
+@use "sass:math";
 @use "element-plus/theme-chalk/src/mixins/function.scss" as *;
 @use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
+@use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
 @use "./variables.scss" as *;
 
+// 生成指定颜色的明亮/黑暗颜色
+@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        "#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+}
+
 $types: primary, success, warning, danger, error, info;
 
 $color: $theme-color;
@@ -16,6 +30,7 @@ $success: #01efb7bb;
 $colors: () !default;
 $colors: map.deep-merge(
   (
+    "white": #ffffff,
     "primary": (
       "base": $color
     ),
@@ -40,6 +55,15 @@ $text-color: map.merge(
   $text-color
 );
 
+// 生成 --el-color-${type}-light-i
+@each $type in (primary) {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, "light", #021633);
+  }
+  // --el-color-${type}-dark-2
+  @include set-color-mix-level($type, 2, "dark", #000);
+}
+
 // border
 $border: () !default;
 $border: map.merge(
@@ -81,11 +105,23 @@ $mask-color: map.merge(
   $mask-color
 );
 
+// button
+$button: () !default;
+$button: map.merge(
+  (
+    "disabled-text-color": rgba(255, 255, 255, 0.5)
+  ),
+  $button
+);
+
 html.dark-blue {
-  @include set-css-var-value(("color", "primary"), $color);
+  @include set-css-color-type($colors, "primary");
   @include set-component-css-var("text-color", $text-color);
   @include set-component-css-var("border-color", $border);
   @include set-component-css-var("fill-color", $fill-color);
   @include set-component-css-var("bg-color", $bg-color);
   @include set-component-css-var("mask-color", $mask-color);
+  @include b(button) {
+    @include set-component-css-var("button", $button);
+  }
 }