fix(style): ensure dark style variables can be override (vexip-ui#537)

* wip: adjust vars

* feat: update

* chore: docs

docs/en-US/guide/style-config.md

@@ -120,7 +120,7 @@ If you also want to independently modify the preset variables for the dark mode,
 
 ```scss
 // style/dark-variables.scss
-@forward 'vexip-ui/style/dark/variables.scss' with (
+@forward 'vexip-ui/style/dark/variables' with (
   $color-map: (
     primary: (
       base: #654ea7

docs/zh-CN/guide/style-config.md

@@ -119,7 +119,7 @@ createApp(App).use(install).mount('#app')
 
 ```scss
 // style/dark-variables.scss
-@forward 'vexip-ui/style/dark/variables.scss' with (
+@forward 'vexip-ui/style/dark/variables' with (
   $color-map: (
     primary: (
       base: #654ea7

gulpfile.mjs

@@ -11,7 +11,7 @@ import cleanCSS from 'gulp-clean-css'
 const rootDir = resolve(fileURLToPath(import.meta.url), '..')
 
 const { dest, parallel, series, src } = gulp
-const { existsSync, emptyDir, mkdirSync } = fs
+const { existsSync, emptyDirSync, mkdirSync } = fs
 
 const cssDir = resolve(rootDir, 'css')
 const themesDir = resolve(rootDir, 'themes')
@@ -59,5 +59,5 @@ export default parallel(series(buildStyle, buildDark), buildThemes)
  * @param {string} dir
  */
 function ensureEmptyDir(dir) {
-  existsSync(dir) ? emptyDir(dir) : mkdirSync(dir)
+  existsSync(dir) ? emptyDirSync(dir) : mkdirSync(dir)
 }

style/dark/preset.scss

@@ -9,11 +9,30 @@
 
   @include define-theme-styles(
     (
+      'color-black': $color-black,
+      'color-white': $color-white,
+      'color-map': $color-map,
       'content-color-map': $content-color-map,
       'bg-color-map': $bg-color-map,
+      'border-width': $border-width,
+      'border-style': $border-style,
       'border-color-map': $border-color-map,
       'fill-color-map': $fill-color-map,
-      'shadow-color-map': $shadow-color-map
+      'font-family-map': $font-family-map,
+      'font-size-map': $font-size-map,
+      'line-height-map': $line-height-map,
+      'radius-map': $radius-map,
+      'shadow-x': $shadow-x,
+      'shadow-y': $shadow-y,
+      'shadow-blur': $shadow-blur,
+      'shadow-color-map': $shadow-color-map,
+      'shadow-border': $shadow-border,
+      'shadow-focus': $shadow-focus,
+      'transition-duration': $transition-duration,
+      'transition-timing': $transition-timing,
+      'transition-map': $transition-map,
+      'z-index-map': $z-index-map,
+      'break-point-map': $break-point-map
     )
   );
 

style/dark/variables.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
-@forward '../design/variables.scss';
+@forward '../design/variables.scss' hide $content-color-map, $bg-color-map, $border-color-map,
+  $fill-color-map, $shadow-color-map;
 
 $content-color-map: () !default;
 $content-color-map: map.merge(

style/design/variables.scss

@@ -41,13 +41,12 @@ $color-map: map.deep-merge(
     $color-map: map.deep-merge(
       (
         $type: (
-          '#{$mode}-#{$i}':
-            color.mix(
-              $mixed-color,
-              map.get($color-map, $type, 'base'),
-              math.percentage(math.div($i, 10))
-            )
-        )
+            '#{$mode}-#{$i}': color.mix(
+                $mixed-color,
+                map.get($color-map, $type, 'base'),
+                math.percentage(math.div($i, 10))
+              )
+          )
       ),
       $color-map
     ) !global;
@@ -59,9 +58,11 @@ $color-map: map.deep-merge(
     $color-map: map.deep-merge(
       (
         $type: (
-          'opacity-#{$i}':
-            rgba(map.get($color-map, $type, 'base'), math.percentage(math.div(10 - $i, 10)))
-        )
+            'opacity-#{$i}': rgba(
+                map.get($color-map, $type, 'base'),
+                math.percentage(math.div(10 - $i, 10))
+              )
+          )
       ),
       $color-map
     ) !global;
@@ -77,8 +78,10 @@ $color-map: map.deep-merge(
 @mixin define-type-color($type, $map: $color-map) {
   $colors: map.get($map, $type);
 
-  @each $name in map.keys($colors) {
-    @include define-css-var(('color', $type, $name), map.get($colors, $name));
+  @if $colors {
+    @each $name in map.keys($colors) {
+      @include define-css-var(('color', $type, $name), map.get($colors, $name));
+    }
   }
 }
 
@@ -312,10 +315,7 @@ $break-point-map: map.merge(
   );
 
   @each $name in map.keys(get-or-default($theme-config, $border-color-map, 'border-color-map')) {
-    @include define-css-var(
-      ('border', $name),
-      value('border-shape') value('border-color' $name)
-    );
+    @include define-css-var(('border', $name), value('border-shape') value('border-color' $name));
   }
 
   @include define-preset-values(
@@ -357,10 +357,7 @@ $break-point-map: map.merge(
   );
 
   @each $name in map.keys(get-or-default($theme-config, $shadow-color-map, 'shadow-color-map')) {
-    @include define-css-var(
-      ('shadow', $name),
-      value('shadow-shape') value('shadow-color' $name)
-    );
+    @include define-css-var(('shadow', $name), value('shadow-shape') value('shadow-color' $name));
   }
 
   @include define-css-var(
@@ -395,7 +392,7 @@ $break-point-map: map.merge(
   );
   @include define-preset-values(
     'break-point',
-    get-or-default($theme-config, $break-point-map, 'break-point-map, true'),
+    get-or-default($theme-config, $break-point-map, 'break-point-map'),
     true
   );
 }