@veltra/desktop 1.0.7 → 1.0.8

package/src/components/breadcrumb/style.scss

@@ -3,12 +3,6 @@
 
 $root-name: breadcrumb;
 
-:root {
-  --u-breadcrumb-small: 20px;
-  --u-breadcrumb-default: 22px;
-  --u-breadcrumb-large: 24px;
-}
-
 @include m.b($root-name) {
   color: fn.use-var(text-color, second);
   line-height: 1.4;

package/src/components/checkbox/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: checkbox;
 @include m.b($root-name) {
-  @include m.dark() {
-    --u-checkbox-border: #595959;
-  }
-
   user-select: none;
   vertical-align: middle;
   cursor: pointer;

package/src/components/drawer/style.scss

@@ -39,12 +39,6 @@ $direction-map: (
     justify-content: center;
   }
 
-  @each $direction in $directions {
-    @include m.is($direction) {
-      --transform: #{map.get($direction-map, $direction)};
-    }
-  }
-
   @include m.is(right, left) {
     top: $edge-offset;
     bottom: $edge-offset;
@@ -137,9 +131,22 @@ $direction-map: (
   transition: transform 0.3s ease-in-out;
 }
 
-@each $direction in $directions {
-  .drawer-slide-#{$direction}-enter-from,
-  .drawer-slide-#{$direction}-leave-to {
-    transform: var(--transform);
-  }
+.drawer-slide-right-enter-from,
+.drawer-slide-right-leave-to {
+  transform: #{map.get($direction-map, right)};
+}
+
+.drawer-slide-left-enter-from,
+.drawer-slide-left-leave-to {
+  transform: #{map.get($direction-map, left)};
+}
+
+.drawer-slide-top-enter-from,
+.drawer-slide-top-leave-to {
+  transform: #{map.get($direction-map, top)};
+}
+
+.drawer-slide-bottom-enter-from,
+.drawer-slide-bottom-leave-to {
+  transform: #{map.get($direction-map, bottom)};
 }

package/src/components/form-item/style.scss

@@ -75,9 +75,8 @@ $root-name: form-item;
 
   @include m.e(error) {
     width: 100%;
-    --height: #{fn.use-var(font-size-main, default)};
-    height: calc(var(--height) + 4px);
-    line-height: calc(var(--height) + 2px);
+    height: calc(#{fn.use-var(font-size-main, default)} + 4px);
+    line-height: calc(#{fn.use-var(font-size-main, default)} + 2px);
     overflow: hidden;
     color: fn.use-var(text-color, main);
     font-size: fn.use-var(font-size-assist, default);

package/src/components/loading/style.scss

@@ -20,6 +20,7 @@ $root-name: loading;
   // line
   @include m.e(line) {
     @include m.bem($root-name, loader) {
+      $c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
       width: 40px;
       aspect-ratio: 1;
       display: grid;
@@ -28,12 +29,11 @@ $root-name: loading;
       &::after {
         content: '';
         grid-area: 1/1;
-        --c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
         background:
-          var(--c) 0 0,
-          var(--c) 100% 0,
-          var(--c) 100% 100%,
-          var(--c) 0 100%;
+          #{$c} 0 0,
+          #{$c} 100% 0,
+          #{$c} 100% 100%,
+          #{$c} 0 100%;
         animation:
           line-1 2s infinite linear,
           line-2 2s infinite linear;
@@ -48,6 +48,7 @@ $root-name: loading;
   // spinner
   @include m.e(spinner) {
     @include m.bem($root-name, loader) {
+      $c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 92%, #0000);
       width: 50px;
       aspect-ratio: 1;
       display: grid;
@@ -57,12 +58,11 @@ $root-name: loading;
         content: '';
         grid-area: 1/1;
 
-        --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 92%, #0000);
         background:
-          var(--c) 50% 0,
-          var(--c) 50% 100%,
-          var(--c) 100% 50%,
-          var(--c) 0 50%;
+          #{$c} 50% 0,
+          #{$c} 50% 100%,
+          #{$c} 100% 50%,
+          #{$c} 0 50%;
         background-size: 12px 12px;
         animation: spinner 1s infinite;
       }
@@ -78,12 +78,12 @@ $root-name: loading;
   // dot
   @include m.e(dot) {
     @include m.bem($root-name, loader) {
+      $c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 93%, #0000);
       width: 40px;
       height: 20px;
-      --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 93%, #0000);
       background:
-        var(--c) 0 0,
-        var(--c) 50% 0;
+        #{$c} 0 0,
+        #{$c} 50% 0;
       background-size: 8px 8px;
       position: relative;
       clip-path: inset(-200% -100% 0 0);
@@ -117,25 +117,24 @@ $root-name: loading;
   // classic
   @include m.e(classic) {
     @include m.bem($root-name, loader) {
-      --w: 6ch;
       font-size: fn.use-var(font-size, title, default);
       line-height: 1.4em;
-      letter-spacing: var(--w);
-      width: var(--w);
+      letter-spacing: 6ch;
+      width: 6ch;
       overflow: hidden;
       white-space: nowrap;
       color: #0000;
       text-shadow:
-        calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-        calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-      // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+        calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+        calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+        calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+        calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+        calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+        calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+      // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+      // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+      // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+      // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
       animation: classic 2s infinite linear;
 
       &::before {
@@ -243,133 +242,133 @@ $root-name: loading;
 @keyframes classic {
   9.09% {
     text-shadow:
-      calc(0 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) -10px #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   18.18% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) -10px #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   27.27% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) -10px #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   36.36% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) -10px #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   45.45% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) -10px #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) -10px #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   54.54% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) -10px #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) -10px #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   63.63% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) -10px #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   72.72% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) -10px #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   81.81% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) -10px #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) -10px #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) 0 #{fn.use-var(text-color, main)};
   }
   90.90% {
     text-shadow:
-      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
-      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
-    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
-    // calc(-9 * var(--w)) -10px #{fn.use-var(text-color, main)};
+      calc(0 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * 6ch) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * 6ch) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * 6ch) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * 6ch) -10px #{fn.use-var(text-color, main)};
   }
 }
 

package/src/components/menu/style.scss

@@ -7,28 +7,6 @@ $root-name: menu;
 $collapsed-menu: collapsed-menu;
 
 @include m.b($root-name, $collapsed-menu) {
-  --u-menu-color: #0f172a;
-  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
-  --u-menu-hover-color: #{fn.use-var(text-color, title)};
-  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
-  --u-menu-active-color: var(--u-color-primary-dark-1);
-  --u-menu-height-small: 32px;
-  --u-menu-height-default: 36px;
-  --u-menu-height-large: 40px;
-  --u-menu-bg-color: #{fn.use-var(bg-color, top)};
-  --u-menu-bg-blur: none;
-  --u-menu-bg-saturate: none;
-  --u-menu-bg-image: none;
-
-  @include m.dark() {
-    --u-menu-color: #{fn.use-var(text-color, main)};
-    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
-    --u-menu-hover-color: #{fn.use-var(text-color, title)};
-    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
-    --u-menu-active-color: #{fn.use-var(text-color, white)};
-    --u-menu-bg-color: #{fn.use-var(bg-color, middle)};
-  }
-
   user-select: none;
   color: var(--u-menu-color);
 
@@ -124,15 +102,6 @@ $collapsed-menu: collapsed-menu;
 }
 
 @include m.b($root-name) {
-  --u-menu-bg-color: #{fn.use-var(bg-color, top)};
-  --u-menu-bg-blur: none;
-  --u-menu-bg-saturate: none;
-  --u-menu-bg-image: none;
-
-  @include m.dark() {
-    --u-menu-bg-color: #{fn.use-var(bg-color, middle)};
-  }
-
   margin: 0;
   padding: 0;
   background-color: var(--u-menu-bg-color);

package/src/components/progress-nodes/style.scss

@@ -5,13 +5,8 @@
 $root-name: progress-nodes;
 
 @include m.b($root-name) {
-  // CSS 变量定义
-  --checked-color: #{fn.use-var(color, primary)};
-  --node-color: #{fn.use-var(text-color, placeholder)};
-  --dot-size: 14px;
-
   position: relative;
-  color: var(--node-color);
+  color: #{fn.use-var(text-color, placeholder)};
   overflow: auto;
   cursor: default;
 
@@ -28,13 +23,6 @@ $root-name: progress-nodes;
     cursor: grabbing;
   }
 
-  // 颜色类型变体
-  @each $type in vars.$color-types {
-    @include m.m($type) {
-      --checked-color: #{fn.use-var(color, $type)};
-    }
-  }
-
   // 列表容器
   @include m.e(list) {
     position: relative;
@@ -82,8 +70,8 @@ $root-name: progress-nodes;
   // 节点圆点
   @include m.e(dot) {
     position: relative;
-    width: var(--dot-size);
-    height: var(--dot-size);
+    width: 14px;
+    height: 14px;
     border: 2px solid currentColor;
     border-radius: 50%;
     background-color: fn.use-var(bg-color, top);
@@ -107,18 +95,36 @@ $root-name: progress-nodes;
     @include m.ellipsis;
   }
 
-  // checked 状态 - 圆点填充 colorType 颜色
   @include m.bem($root-name, item) {
     @include m.is(checked) {
-      color: var(--checked-color);
+      color: #{fn.use-var(color, primary)};
 
       @include m.bem($root-name, dot) {
-        background-color: var(--checked-color);
-        border-color: var(--checked-color);
+        background-color: #{fn.use-var(color, primary)};
+        border-color: #{fn.use-var(color, primary)};
       }
 
       @include m.bem($root-name, label) {
-        color: var(--checked-color);
+        color: #{fn.use-var(color, primary)};
+      }
+    }
+  }
+
+  @each $type in vars.$color-types {
+    @include m.m($type) {
+      @include m.bem($root-name, item) {
+        @include m.is(checked) {
+          color: #{fn.use-var(color, $type)};
+
+          @include m.bem($root-name, dot) {
+            background-color: #{fn.use-var(color, $type)};
+            border-color: #{fn.use-var(color, $type)};
+          }
+
+          @include m.bem($root-name, label) {
+            color: #{fn.use-var(color, $type)};
+          }
+        }
       }
     }
   }
@@ -164,10 +170,10 @@ $root-name: progress-nodes;
 
   @include m.e(link) {
     // 宽度需要跨越当前 item 的右 padding + 下一个 item 的左 padding
-    width: calc(100% - var(--dot-size) + 24px);
+    width: calc(100% - 14px + 24px);
     height: 0;
     border-width: 1px 0 0 0;
-    left: calc(50% + var(--dot-size) / 2);
+    left: calc(50% + 14px / 2);
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/radio/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: radio;
 @include m.b($root-name) {
-  @include m.dark() {
-    --u-radio-border: #595959;
-  }
-
   cursor: pointer;
   vertical-align: middle;
   user-select: none;

package/src/components/select/style.scss

@@ -3,18 +3,6 @@
 
 $root-name: select;
 @include m.b($root-name) {
-  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
-  --u-menu-hover-color: #{fn.use-var(text-color, title)};
-  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
-  --u-menu-active-color: var(--u-color-primary-dark-1);
-
-  @include m.dark() {
-    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
-    --u-menu-hover-color: #{fn.use-var(text-color, title)};
-    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
-    --u-menu-active-color: #{fn.use-var(text-color, white)};
-  }
-
   width: 100%;
 
   @include m.e(content-filter) {

package/src/components/steps/style.scss

@@ -10,13 +10,20 @@ $root-name: steps;
   padding: 0;
   margin: 0;
 
-  /** 颜色变量 */
   @each $type in vars.$color-types {
     @include m.em(finished, $type) {
-      --finished-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(finished) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
     @include m.em(current, $type) {
-      --current-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(current) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
   }
 
@@ -24,13 +31,6 @@ $root-name: steps;
   @include m.e(item) {
     font-weight: 600;
     color: fn.use-var(text-color, placeholder);
-
-    @include m.is(finished) {
-      color: var(--finished-color);
-    }
-    @include m.is(current) {
-      color: var(--current-color);
-    }
   }
 
   @include m.e(node) {

package/src/components/switch/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: switch;
 @include m.b($root-name) {
-  --u-switch-height-small: 18px;
-  --u-switch-height-default: 20px;
-  --u-switch-height-large: 24px;
-
   display: inline-flex;
   align-items: center;
   cursor: pointer;