@veltra/desktop 1.1.6 → 1.1.9

package/src/components/notification/style.scss

@@ -16,7 +16,7 @@ $positions: ('top-left', 'top-right', 'bottom-left', 'bottom-right');
     transform 0.4s,
     top 0.4s;
   border: fn.use-var(border);
-  background-color: #fff;
+  background-color: fn.use-var(bg-color, top);
   box-shadow: fn.use-var(shadow);
   margin: 4px;
   overflow: hidden;

package/src/components/paginator/style.scss

@@ -39,12 +39,21 @@ $root-name: paginator;
     @include m.flex($justify: center);
 
     &:hover {
-      background-color: fn.use-var(color, primary, 'light-9');
+      background-color: fn.component-var(
+        paginator,
+        btn-hover-bg,
+        fn.use-var(color, primary, 'light-9')
+      );
+      color: fn.component-var(paginator, btn-hover-color, fn.use-var(text, color, title));
     }
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary, 'light-9');
-      color: fn.use-var(color, primary);
+      background-color: fn.component-var(
+        paginator,
+        btn-active-bg,
+        fn.use-var(color, primary, 'light-9')
+      );
+      color: fn.component-var(paginator, btn-active-color, fn.use-var(color, primary));
     }
 
     @include m.is(disabled) {

package/src/components/tabs/style.scss

@@ -2,11 +2,11 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 
 /** shadcn 风格 TabsList：hover 背景底色容器 + 白底活动态；rounded=true 时水平为胶囊状。 */
-$list-bg: fn.use-var(bg-color, hover);
+$list-bg: fn.component-var(tabs, bar-bg, fn.use-var(bg-color, hover));
 $list-radius: fn.use-var(radius, default);
 $item-radius: calc(fn.use-var(radius, default) - 2px);
 $list-padding: 4px;
-$active-bg: fn.use-var(bg-color, top);
+$active-bg: fn.component-var(tabs, active-bg, fn.use-var(bg-color, top));
 $active-shadow:
   0 1px 2px rgba(15, 23, 42, 0.08),
   0 1px 3px rgba(15, 23, 42, 0.06);

package/src/components/tag/style.scss

@@ -52,13 +52,13 @@ $root-name: tag;
   // 颜色样式
   @each $type in vars.$color-types {
     @include m.m(color-#{$type}) {
-      color: fn.use-var(color, $type);
-      border-color: fn.use-var(color, $type);
-      background-color: fn.use-var(color, $type, light-9);
+      color: fn.component-var(tag, #{$type}-color, fn.use-var(color, $type));
+      border-color: fn.component-var(tag, #{$type}-border, fn.use-var(color, $type));
+      background-color: fn.component-var(tag, #{$type}-bg, fn.use-var(color, $type, light-9));
 
       @include m.is(dark) {
-        color: fn.use-var(text-color, white);
-        background-color: fn.use-var(color, $type);
+        color: fn.component-var(tag, #{$type}-dark-color, fn.use-var(text-color, white));
+        background-color: fn.component-var(tag, #{$type}-dark-bg, fn.use-var(color, $type));
       }
 
       @include m.bem($root-name, icon-close) {

package/src/components/textarea/style.scss

@@ -9,7 +9,9 @@ $root-name: textarea;
   width: 100%;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
   vertical-align: middle;
 

package/src/components/tree/style.scss

@@ -74,8 +74,12 @@ $indent-width: 20px;
 
     @include m.is(selected) {
       @include m.bem($root-name, node-content) {
-        background-color: fn.use-var(color, primary, light-9);
-        color: fn.use-var(color, primary);
+        background-color: fn.component-var(
+          tree,
+          node-selected-bg,
+          fn.use-var(color, primary, light-9)
+        );
+        color: fn.component-var(tree, node-selected-color, fn.use-var(color, primary));
         font-weight: 500;
 
         // 左侧 3px 色带，配合淡色背景共同构成选中态；