@veltra/desktop 1.1.6 → 1.1.7

package/dist/components/tabs/style2.css

@@ -53,7 +53,7 @@
   max-width: 100%;
   min-width: 0;
   padding: 0 4px;
-  background-color: var(--u-bg-color-hover);
+  background-color: var(--u-tabs-bar-bg, var(--u-bg-color-hover));
   border-radius: var(--u-radius-default);
   gap: 2px;
 }
@@ -114,7 +114,7 @@
 }
 .u-tabs-bar__item.is-active {
   color: var(--u-color-primary);
-  background-color: var(--u-bg-color-top);
+  background-color: var(--u-tabs-active-bg, var(--u-bg-color-top));
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
 .u-tabs-bar__item-label {
@@ -181,7 +181,7 @@
 }
 .u-tabs-bar__nav:hover:not(:disabled) {
   color: var(--u-text-color-title);
-  background-color: var(--u-bg-color-top);
+  background-color: var(--u-tabs-active-bg, var(--u-bg-color-top));
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
 .u-tabs-bar__nav:disabled {

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -15,18 +15,18 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+  block: boolean;
   closable: boolean;
   rounded: boolean;
   position: "top" | "bottom";
-  block: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -14,13 +14,13 @@ type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tabs/tabs.vue.d.ts

@@ -10,18 +10,18 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+  block: boolean;
   closable: boolean;
   rounded: boolean;
   position: "left" | "right" | "top" | "bottom";
-  block: boolean;
   keepAlive: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/tag/style2.css

@@ -79,85 +79,85 @@
   border-color: var(--u-color-default);
 }
 .u-tag--color-primary {
-  color: var(--u-color-primary);
-  border-color: var(--u-color-primary);
-  background-color: var(--u-color-primary-light-9);
+  color: var(--u-tag-primary-color, var(--u-color-primary));
+  border-color: var(--u-tag-primary-border, var(--u-color-primary));
+  background-color: var(--u-tag-primary-bg, var(--u-color-primary-light-9));
 }
 .u-tag--color-primary.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-primary);
+  color: var(--u-tag-primary-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-primary-dark-bg, var(--u-color-primary));
 }
 .u-tag--color-primary .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-primary);
 }
 .u-tag--color-success {
-  color: var(--u-color-success);
-  border-color: var(--u-color-success);
-  background-color: var(--u-color-success-light-9);
+  color: var(--u-tag-success-color, var(--u-color-success));
+  border-color: var(--u-tag-success-border, var(--u-color-success));
+  background-color: var(--u-tag-success-bg, var(--u-color-success-light-9));
 }
 .u-tag--color-success.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-success);
+  color: var(--u-tag-success-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-success-dark-bg, var(--u-color-success));
 }
 .u-tag--color-success .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-success);
 }
 .u-tag--color-warning {
-  color: var(--u-color-warning);
-  border-color: var(--u-color-warning);
-  background-color: var(--u-color-warning-light-9);
+  color: var(--u-tag-warning-color, var(--u-color-warning));
+  border-color: var(--u-tag-warning-border, var(--u-color-warning));
+  background-color: var(--u-tag-warning-bg, var(--u-color-warning-light-9));
 }
 .u-tag--color-warning.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-warning);
+  color: var(--u-tag-warning-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-warning-dark-bg, var(--u-color-warning));
 }
 .u-tag--color-warning .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-warning);
 }
 .u-tag--color-danger {
-  color: var(--u-color-danger);
-  border-color: var(--u-color-danger);
-  background-color: var(--u-color-danger-light-9);
+  color: var(--u-tag-danger-color, var(--u-color-danger));
+  border-color: var(--u-tag-danger-border, var(--u-color-danger));
+  background-color: var(--u-tag-danger-bg, var(--u-color-danger-light-9));
 }
 .u-tag--color-danger.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-danger);
+  color: var(--u-tag-danger-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-danger-dark-bg, var(--u-color-danger));
 }
 .u-tag--color-danger .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-danger);
 }
 .u-tag--color-info {
-  color: var(--u-color-info);
-  border-color: var(--u-color-info);
-  background-color: var(--u-color-info-light-9);
+  color: var(--u-tag-info-color, var(--u-color-info));
+  border-color: var(--u-tag-info-border, var(--u-color-info));
+  background-color: var(--u-tag-info-bg, var(--u-color-info-light-9));
 }
 .u-tag--color-info.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-info);
+  color: var(--u-tag-info-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-info-dark-bg, var(--u-color-info));
 }
 .u-tag--color-info .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-info);
 }
 .u-tag--color-disabled {
-  color: var(--u-color-disabled);
-  border-color: var(--u-color-disabled);
-  background-color: var(--u-color-disabled-light-9);
+  color: var(--u-tag-disabled-color, var(--u-color-disabled));
+  border-color: var(--u-tag-disabled-border, var(--u-color-disabled));
+  background-color: var(--u-tag-disabled-bg, var(--u-color-disabled-light-9));
 }
 .u-tag--color-disabled.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-disabled);
+  color: var(--u-tag-disabled-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-disabled-dark-bg, var(--u-color-disabled));
 }
 .u-tag--color-disabled .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-disabled);
 }
 .u-tag--color-default {
-  color: var(--u-color-default);
-  border-color: var(--u-color-default);
-  background-color: var(--u-color-default-light-9);
+  color: var(--u-tag-default-color, var(--u-color-default));
+  border-color: var(--u-tag-default-border, var(--u-color-default));
+  background-color: var(--u-tag-default-bg, var(--u-color-default-light-9));
 }
 .u-tag--color-default.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-default);
+  color: var(--u-tag-default-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-default-dark-bg, var(--u-color-default));
 }
 .u-tag--color-default .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-default);

package/dist/components/textarea/textarea.vue.d.ts

@@ -11,15 +11,15 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  clear: () => any;
   change: (value: string) => any;
   focus: () => any;
+  clear: () => any;
   blur: () => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
   onFocus?: (() => any) | undefined;
+  onClear?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
   disabled: boolean;

package/dist/components/tip/tip.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_base: _$vue.DefineComponent<TipProps, {}, {}, {}, {}, _$vue.
   trigger: "hover" | "click";
   contentTag: string;
   visible: boolean;
-  direction: TipDirection;
   content: string;
+  direction: TipDirection;
   alignment: TipAlign;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/tree/style2.css

@@ -82,8 +82,8 @@
   flex-wrap: nowrap;
 }
 .u-tree__node.is-selected .u-tree__node-content {
-  background-color: var(--u-color-primary-light-9);
-  color: var(--u-color-primary);
+  background-color: var(--u-tree-node-selected-bg, var(--u-color-primary-light-9));
+  color: var(--u-tree-node-selected-color, var(--u-color-primary));
   font-weight: 500;
 }
 .u-tree__node.is-selected .u-tree__node-content::before {

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -15,24 +15,24 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | number | undefined) => any;
 } & {
-  clear: () => any;
   change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
+  clear: () => any;
   "update:text": (text?: string | undefined) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  minWidth: string;
+  disabled: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  disabled: boolean;
   readonly: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "files": [
     "dist",
     "src"
@@ -61,22 +61,22 @@
     "@lexical/rich-text": "^0.43.0",
     "@lexical/selection": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@veltra/compositions": "1.1.6",
-    "@veltra/directives": "1.1.6",
-    "@veltra/icons": "1.1.6",
-    "@veltra/styles": "1.1.6",
-    "@veltra/utils": "1.1.6",
+    "@veltra/compositions": "1.1.7",
+    "@veltra/directives": "1.1.7",
+    "@veltra/icons": "1.1.7",
+    "@veltra/styles": "1.1.7",
+    "@veltra/utils": "1.1.7",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.1.6",
-    "@veltra/directives": "1.1.6",
-    "@veltra/icons": "1.1.6",
-    "@veltra/styles": "1.1.6",
-    "@veltra/utils": "1.1.6",
+    "@veltra/compositions": "1.1.7",
+    "@veltra/directives": "1.1.7",
+    "@veltra/icons": "1.1.7",
+    "@veltra/styles": "1.1.7",
+    "@veltra/utils": "1.1.7",
     "vue": "^3.5.33"
   }
 }

package/src/components/auto-complete/style.scss

@@ -70,7 +70,9 @@ $root-name: auto-complete;
     line-height: 1;
     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;
     @include m.flex($display: inline-flex);
     &:hover {

package/src/components/button/style.scss

@@ -6,7 +6,8 @@
 $root-name: button;
 
 @include m.b($root-name) {
-  color: fn.use-var(text-color, main);
+  color: fn.component-var(button, default-color, fn.use-var(text-color, main));
+  box-sizing: border-box;
 
   line-height: 1;
   outline: none;
@@ -17,8 +18,8 @@ $root-name: button;
   cursor: pointer;
   padding: 0 0.8em;
   -webkit-appearance: none;
-  border: none;
-  background-color: fn.use-var(color, default);
+  border: 1px solid fn.component-var(button, default-border, transparent);
+  background-color: fn.component-var(button, default-bg, fn.use-var(color, default));
   box-shadow: fn.use-var(shadow, emboss);
   transition:
     background-color 0.25s,
@@ -29,6 +30,11 @@ $root-name: button;
 
   @include m.flex($display: inline-flex, $justify: center);
 
+  &:hover {
+    background-color: fn.component-var(button, default-hover-bg, fn.use-var(color, default, 'dark-1'));
+    border-color: fn.component-var(button, default-hover-border, transparent);
+  }
+
   &:active {
     box-shadow: none;
   }
@@ -80,10 +86,11 @@ $root-name: button;
 
     @include m.m(color-#{$type}) {
       background-color: fn.use-var(color, $type);
-      color: fn.use-var(text-color, white);
+      color: fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white));
 
       &:hover {
-        background-color: fn.use-var(color, $type, dark-1);
+        background-color: fn.component-var(button, #{$type}-hover-bg, fn.use-var(color, $type, dark-1));
+        color: fn.component-var(button, #{$type}-hover-color, fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white)));
       }
 
       // 禁用
@@ -105,7 +112,7 @@ $root-name: button;
         @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
-            background-color: fn.use-var(color, $type, 'light-9');
+            background-color: fn.component-var(button, #{$type}-plain-bg, fn.use-var(color, $type, 'light-9'));
           }
         }
 
@@ -115,9 +122,9 @@ $root-name: button;
       }
 
       @include m.is(plain) {
-        color: fn.use-var(color, $type);
-        background-color: fn.use-var(color, $type, light-9);
-        box-shadow: 0px 0px 2px 1px fn.use-var(color, $type, light-5);
+        color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
+        background-color: fn.component-var(button, #{$type}-plain-bg, fn.use-var(color, $type, light-9));
+        box-shadow: 0px 0px 2px 1px fn.component-var(button, #{$type}-plain-shadow, fn.use-var(color, $type, light-5));
 
         &:active {
           box-shadow: none;

package/src/components/cascade/style.scss

@@ -12,7 +12,9 @@ $menu-name: $root-name + '-panel-item';
   @include m.is(multiple) {
     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;
     cursor: pointer;
 
@@ -114,7 +116,8 @@ $menu-name: $root-name + '-panel-item';
     }
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary, light-9);
+      background-color: fn.component-var(cascade, node-active-bg, fn.use-var(color, primary, light-9));
+      color: fn.component-var(cascade, node-active-color, fn.use-var(color, primary));
       border-radius: fn.use-var(radius, default);
     }
 

package/src/components/checkbox/style.scss

@@ -53,7 +53,7 @@ $root-name: checkbox;
     border: fn.use-var(border, width) fn.use-var(border, style)
       #{fn.component-var(checkbox, border, #ccc)};
     border-radius: 6px;
-    color: #fff;
+    color: fn.component-var(checkbox, color, #fff);
     transition: background-color 0.15s ease;
     @include m.flex(inline-flex, center);
   }
@@ -63,7 +63,7 @@ $root-name: checkbox;
   }
 
   @include m.m(indeterminate) {
-    background-color: #fff;
+    background-color: fn.component-var(checkbox, color, #fff);
     width: 10px;
     height: 2px;
     vertical-align: middle;

package/src/components/code-editor/style.scss

@@ -24,7 +24,9 @@ $root-name: code-editor;
   border: 1px solid var(--u-code-editor-border);
   box-shadow: fn.use-var(shadow, emboss);
   overflow: hidden;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 
   &:hover,
   &:focus-within {
@@ -36,7 +38,8 @@ $root-name: code-editor;
     color: var(--u-code-editor-fg);
     font-size: var(--u-code-editor-font-size);
     line-height: var(--u-code-editor-line-height);
-    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas,
+    font-family:
+      ui-monospace, 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas,
       'Liberation Mono', monospace;
     outline: none;
 

package/src/components/date-range-picker/style.scss

@@ -11,7 +11,9 @@ $root-name: date-range-picker;
   line-height: 1;
   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;
 
   @include m.flex($display: inline-flex);

package/src/components/expression-editor/style.scss

@@ -84,8 +84,8 @@ $root-name: expression-editor;
     height: 22px;
     line-height: 1;
     font-size: 12px;
-    color: fn.use-var(color, primary);
-    background-color: fn.use-var(color, primary, light-9);
+    color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
+    background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-9));
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
@@ -94,8 +94,8 @@ $root-name: expression-editor;
       box-shadow 0.12s ease;
 
     &:hover {
-      color: fn.use-var(color, primary);
-      background-color: fn.use-var(color, primary, light-8);
+      color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
+      background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-8));
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
 
       .#{vars.$namespace}#{$root-name}__chip-close {

package/src/components/message-confirm/style.scss

@@ -19,7 +19,9 @@ $root-name: message-confirm;
 
   @include m.e(box) {
     width: 420px;
-    background-color: #fff;
+    background-color: fn.use-var(bg-color, top);
+    border: fn.use-var(border);
+    box-shadow: fn.use-var(shadow);
     transition:
       opacity 0.3s,
       transform 0.4s;

package/src/components/multi-select/style.scss

@@ -10,7 +10,9 @@ $root-name: multi-select;
   line-height: 1;
   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;
   cursor: pointer;
   @include m.flex($display: inline-flex);

package/src/components/multi-tree-select/style.scss

@@ -9,7 +9,9 @@ $root-name: multi-tree-select;
   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;
   cursor: pointer;
   line-height: 1;

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,13 @@ $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,8 @@ $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 色带，配合淡色背景共同构成选中态；