@veltra/desktop 1.2.33 → 1.3.0

package/src/components/button/style.scss

@@ -8,7 +8,6 @@ $root-name: button;
 @include m.b($root-name) {
   color: fn.component-var(button, default-color, fn.use-var(text-color, main));
   box-sizing: border-box;
-  border-radius: 9999px;
   line-height: 1;
   outline: none;
   text-decoration: none;
@@ -21,9 +20,10 @@ $root-name: button;
   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,
-    box-shadow 0.2s;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   gap: fn.use-var(gap-small);
 
@@ -42,6 +42,10 @@ $root-name: button;
     box-shadow: none;
   }
 
+  &:focus-visible {
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.is(disabled, loading) {
     box-shadow: none !important;
   }
@@ -65,6 +69,7 @@ $root-name: button;
     height: fn.use-var(form-component-height, $size);
     line-height: fn.use-var(form-component-height, $size);
     font-size: fn.use-var(font-size-main, $size);
+    border-radius: fn.use-var(radius, $size);
 
     @include m.is(circle) {
       width: fn.use-var(form-component-height, $size);
@@ -197,11 +202,13 @@ $root-name: button;
   @include m.b($root-name) {
     border-radius: 0;
 
-    &:first-child {
-      border-radius: 9999px 0 0 9999px;
-    }
-    &:last-child {
-      border-radius: 0 9999px 9999px 0;
+    @include m.size using ($size) {
+      &:first-child {
+        border-radius: fn.use-var(radius, $size) 0 0 fn.use-var(radius, $size);
+      }
+      &:last-child {
+        border-radius: 0 fn.use-var(radius, $size) fn.use-var(radius, $size) 0;
+      }
     }
   }
 }

package/src/components/calendar/style.scss

@@ -27,6 +27,10 @@ $root-name: calendar;
     position: relative;
     @include m.flex($justify: center, $align: center);
 
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
     @include m.m(pre, next) {
       color: fn.use-var(text-color, disabled);
     }

package/src/components/card/style.scss

@@ -7,12 +7,14 @@ $root-name: card;
 @include m.b($root-name) {
   border-radius: fn.use-var(radius, default);
   background-color: fn.use-var(bg-color, top);
-  box-shadow: fn.use-var(shadow);
+  border: fn.use-var(border-muted);
+  box-shadow: fn.use-var(shadow, sm);
   backdrop-filter: fn.use-var(bg-filter);
   -webkit-backdrop-filter: fn.use-var(bg-filter);
   overflow: hidden;
 
   @include m.is(integrate) {
+    border: none;
     box-shadow: none;
     --u-card-header-bg: transparent;
     --u-card-action-bg: transparent;
@@ -27,7 +29,7 @@ $root-name: card;
     font-size: fn.use-var(font-size-main, $size);
 
     @include m.b(card__header, card__content, card__action) {
-      padding: fn.use-var(gap, $size);
+      padding: fn.component-var(card, padding-#{$size}, fn.use-var(gap, $size));
     }
 
     @include m.bem($root-name, header) {

package/src/components/check-tag/style.scss

@@ -10,7 +10,7 @@
   vertical-align: middle;
   height: 24px;
   padding: 0 9px;
-  color: #333;
+  color: fn.use-var(text-color, main);
   border: 1px solid fn.use-var(color-primary);
   border-radius: fn.use-var(radius-default);
   background: fn.use-var(color-primary-light-9);
@@ -24,4 +24,10 @@
     border: 1px solid fn.use-var(color-primary-dark-3);
     background-color: fn.use-var(color-primary-dark-3);
   }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, disabled);
+    background-color: fn.use-var(color, disabled);
+  }
 }

package/src/components/checkbox/checkbox.vue

@@ -1,5 +1,13 @@
 <template>
   <label :class="className">
+    <input
+      type="checkbox"
+      :class="cls.e('native')"
+      :checked="checked"
+      :disabled="disabled"
+      @click="handleInput"
+    />
+
     <span :class="cls.e('wrap')">
       <transition name="zoom-in" mode="out-in">
         <svg viewBox="0 0 64 64" v-if="checked" fill="currentColor">
@@ -11,8 +19,6 @@
       </transition>
     </span>
 
-    <input type="checkbox" :checked="checked" :disabled="disabled" hidden @click="handleInput" />
-
     <span :class="cls.e('label')" v-if="$slots.default"><slot /> </span>
   </label>
 </template>

package/src/components/checkbox/style.scss

@@ -49,15 +49,40 @@ $root-name: checkbox;
     }
   }
 
+  @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
   @include m.e(wrap) {
     border: fn.use-var(border, width) fn.use-var(border, style)
-      #{fn.component-var(checkbox, border, #ccc)};
-    border-radius: 6px;
+      #{fn.component-var(checkbox, border, fn.use-var(text-color, assist))};
+    border-radius: fn.use-var(radius, small);
     color: fn.component-var(checkbox, color, #fff);
-    transition: background-color 0.15s ease;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
     @include m.flex(inline-flex, center);
   }
 
+  @include m.is-not(disabled, readonly) {
+    &:hover {
+      @include m.bem($root-name, wrap) {
+        border-color: fn.use-var(color, primary);
+      }
+    }
+
+    // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动
+    #{fn.bem($root-name, native)}:focus-visible + #{fn.bem($root-name, wrap)} {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
   @include m.e(label) {
     line-height: 1em;
   }
@@ -80,6 +105,10 @@ $button-name: checkbox-button;
   user-select: none;
   padding: 0 0.8em;
 
+  &:focus-visible {
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.size using ($size) {
     height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);

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

@@ -12,8 +12,8 @@ $root-name: code-editor;
   --u-code-editor-fg: #{fn.use-var(text-color, main)};
   --u-code-editor-border: #{fn.use-var(border, muted-color)};
   --u-code-editor-gutter-fg: #{fn.use-var(text-color, placeholder)};
-  --u-code-editor-active-bg: rgba(30, 136, 229, 0.06);
-  --u-code-editor-selection-bg: rgba(30, 136, 229, 0.18);
+  --u-code-editor-active-bg: #{fn.color-a(color, 6, primary)};
+  --u-code-editor-selection-bg: #{fn.color-a(color, 16, primary)};
 
   position: relative;
   width: 100%;

package/src/components/contextmenu/style.scss

@@ -16,9 +16,7 @@ $arrow-size: 12px;
   background-color: fn.use-var(bg-color, top);
   border: 1px solid fn.use-var(border, color);
   border-radius: calc(fn.use-var(radius, default) + 2px);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.05),
-    0 8px 20px rgba(15, 23, 42, 0.08);
+  box-shadow: fn.use-var(shadow, lg);
   backdrop-filter: fn.use-var(bg-filter);
   -webkit-backdrop-filter: fn.use-var(bg-filter);
 }

package/src/components/dialog/style.scss

@@ -39,7 +39,7 @@ $root-name: dialog;
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  box-shadow: fn.use-var(shadow-x) fn.use-var(shadow-y) 10px 2px fn.use-var(shadow-color);
+  box-shadow: fn.use-var(shadow, lg);
   flex-wrap: nowrap;
   overflow: hidden;
   @include m.size using ($size) {
@@ -60,7 +60,7 @@ $root-name: dialog;
   @include m.e(header) {
     height: 49px;
     border-bottom: fn.use-var(border);
-    border-radius: fn.use-var(gap, default) fn.use-var(gap, default) 0 0;
+    border-radius: fn.use-var(radius, large) fn.use-var(radius, large) 0 0;
     @include m.flex($justify: space-between);
 
     &:active {
@@ -86,7 +86,7 @@ $root-name: dialog;
     border-top: fn.use-var(border);
     padding: 8px;
     text-align: right;
-    border-radius: 0 0 fn.use-var(gap, default) fn.use-var(gap, default);
+    border-radius: 0 0 fn.use-var(radius, large) fn.use-var(radius, large);
 
     #{fn.bem(button)} + #{fn.bem(button)} {
       margin-left: fn.use-var(gap, default);

package/src/components/drawer/style.scss

@@ -26,7 +26,7 @@ $direction-map: (
   background-color: fn.use-var(bg-color, top);
   backdrop-filter: fn.use-var(bg-filter);
   -webkit-backdrop-filter: fn.use-var(bg-filter);
-  box-shadow: 0 0 10px 2px fn.use-var(shadow, color);
+  box-shadow: fn.use-var(shadow, lg);
 
   @include m.e(close) {
     position: absolute;

package/src/components/dropdown/style.scss

@@ -11,7 +11,7 @@ $root-name: dropdown;
     background-color: fn.use-var(bg-color, top);
     border: fn.use-var(border);
     border-radius: fn.use-var(radius, default);
-    box-shadow: fn.use-var(shadow);
+    box-shadow: fn.use-var(shadow, lg);
     backdrop-filter: fn.use-var(bg-filter);
     -webkit-backdrop-filter: fn.use-var(bg-filter);
     top: 0;

package/src/components/float-button/style.scss

@@ -14,7 +14,7 @@ $root-name: 'float-button';
   flex-wrap: nowrap;
 
   @include m.e(item) {
-    box-shadow: 0 0 5px 1px #{fn.use-var(color, primary, light-3)};
+    box-shadow: fn.use-var(shadow, lg);
     transition-property: transform, opacity;
     transition-duration: 0.2s;
     transform: scale(0.4);

package/src/components/group-nav/style.scss

@@ -15,9 +15,7 @@
   background-repeat: no-repeat;
   border: 1px solid fn.use-var(border, color);
   border-radius: calc(fn.use-var(radius, large) + 6px);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.05),
-    0 12px 28px rgba(15, 23, 42, 0.08);
+  box-shadow: fn.use-var(shadow, lg);
 
   @include m.e(container) {
     padding: 8px;

package/src/components/input/style.scss

@@ -11,8 +11,8 @@ $root-name: input;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
   transition:
-    border-color 0.25s ease,
-    box-shadow 0.25s ease;
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
   overflow: hidden;
   width: 100%;
 
@@ -27,7 +27,7 @@ $root-name: input;
   @include m.size using ($size) {
     height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);
-    padding: 0 calc(fn.use-var(gap, $size) / 2);
+    padding: 0 fn.use-var(gap, $size);
     font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, native) {
@@ -38,6 +38,7 @@ $root-name: input;
 
   @include m.is(focus) {
     border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
   }
 
   @include m.e(native) {

package/src/components/message/style.scss

@@ -55,13 +55,13 @@ $root-name: message;
       @include m.m(color-#{$type}) {
         background-color: fn.use-var(color, $type);
         color: fn.use-var(text-color, main);
-        box-shadow: 0 0 4px 0px fn.use-var(color, $type);
+        box-shadow: fn.use-var(shadow, lg);
       }
     } @else {
       @include m.m(color-#{$type}) {
         background-color: fn.use-var(color, $type, 'light-9');
         color: fn.use-var(color, $type);
-        box-shadow: 0 0 4px 0px fn.use-var(color, $type, 'light-5');
+        box-shadow: fn.use-var(shadow, lg);
       }
     }
   }

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

@@ -21,7 +21,7 @@ $root-name: message-confirm;
     width: 420px;
     background-color: fn.use-var(bg-color, top);
     border: fn.use-var(border);
-    box-shadow: fn.use-var(shadow);
+    box-shadow: fn.use-var(shadow, lg);
     transition:
       opacity 0.3s,
       transform 0.4s;

package/src/components/nav/style.scss

@@ -114,9 +114,7 @@ $collapsed-nav: collapsed-nav;
   background-repeat: no-repeat;
   border: 1px solid fn.use-var(border, color);
   border-radius: calc(fn.use-var(radius, large) + 6px);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.05),
-    0 12px 28px rgba(15, 23, 42, 0.08);
+  box-shadow: fn.use-var(shadow, lg);
 
   @include m.e(container) {
     padding: 8px;
@@ -217,9 +215,7 @@ $collapsed-nav: collapsed-nav;
     -webkit-backdrop-filter: fn.use-var(bg-filter);
     border: 1px solid fn.use-var(border, color);
     border-radius: calc(fn.use-var(radius, large) + 4px);
-    box-shadow:
-      0 16px 40px rgba(15, 23, 42, 0.14),
-      0 2px 8px rgba(15, 23, 42, 0.08);
+    box-shadow: fn.use-var(shadow, lg);
 
     .u-tip__arrow {
       display: none;

package/src/components/notification/style.scss

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

package/src/components/radio/radio.vue

@@ -1,16 +1,15 @@
 <template>
   <label :class="classList">
+    <input
+      type="radio"
+      :class="cls.e('native')"
+      :value="value"
+      v-model="model"
+      :disabled="disabled"
+    />
+
     <!-- radio框 -->
     <section :class="cls.e('button')">
-      <input
-        type="radio"
-        :class="cls.e('native')"
-        :value="value"
-        v-model="model"
-        :disabled="disabled"
-        hidden
-      />
-
       <transition name="zoom-in">
         <span :class="cls.e('inner')" v-if="radioChecked"></span>
       </transition>

package/src/components/radio/style.scss

@@ -36,6 +36,9 @@ $root-name: radio;
     border: fn.use-var(border, width) fn.use-var(border, style)
       #{fn.component-var(radio, border, #ccc)};
     overflow: hidden;
+    transition:
+      border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
   }
 
   @include m.is(checked) {
@@ -45,7 +48,12 @@ $root-name: radio;
   }
 
   @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
     opacity: 0;
+    margin: 0;
+    pointer-events: none;
   }
 
   @include m.e(label) {
@@ -59,6 +67,19 @@ $root-name: radio;
     height: 100%;
   }
 
+  @include m.is-not(disabled) {
+    &:hover {
+      @include m.bem($root-name, button) {
+        border-color: fn.use-var(color, primary);
+      }
+    }
+
+    // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动
+    #{fn.bem($root-name, native)}:focus-visible + #{fn.bem($root-name, button)} {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
   @include m.is(disabled) {
     color: fn.use-var(text-color, disabled);
     cursor: not-allowed;

package/src/components/rich-text-editor/style.scss

@@ -20,7 +20,7 @@ $root-name: rich-text-editor;
 
   &:focus-within {
     border-color: fn.use-var(color, primary);
-    box-shadow: 0 0 0 2px rgba(fn.use-var(color, primary), 0.1);
+    box-shadow: 0 0 0 2px fn.color-a(color, 22, primary);
   }
 
   @include m.size using ($size) {

package/src/components/scroll/style.scss

@@ -44,7 +44,7 @@ $root-name: scroll;
   }
 
   // 滚动条背景色
-  $bar-color: #999;
+  $bar-color: fn.use-var(text-color, assist);
 
   // 滚动条默认尺寸(宽度)
   $bar-size: 6px;
@@ -57,7 +57,7 @@ $root-name: scroll;
     cursor: default;
     position: absolute;
     border-radius: $bar-size;
-    background-color: rgba($color: $bar-color, $alpha: 0.4);
+    background-color: fn.color-a(text-color, 40, assist);
     will-change: transform;
     transition:
       opacity 0.3s ease-in,
@@ -68,7 +68,7 @@ $root-name: scroll;
     z-index: 1;
 
     &:hover {
-      background-color: rgba($color: $bar-color, $alpha: 0.6);
+      background-color: fn.color-a(text-color, 60, assist);
       border-radius: $bar-active-size;
     }
 

package/src/components/slider/slider-thumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="thumb" :class="cls.e('thumb')" :style></div>
+  <div ref="thumb" :class="cls.e('thumb')" :style :tabindex="disabled ? -1 : 0"></div>
 </template>
 <script lang="ts" setup>
 import { useDrag, useUserAction } from '@veltra/compositions'

package/src/components/slider/style.scss

@@ -136,9 +136,19 @@ $track-size: (
     cursor: grab;
     z-index: 1;
     border: 4px solid fn.use-var(color, primary);
+    transition: box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    // 位置由行内 transform 控制，hover 用浅色 ring 而非缩放
+    &:hover {
+      box-shadow: 0 0 0 3px fn.color-a(color, 8, primary);
+    }
 
     &:active {
       cursor: grabbing;
     }
+
+    &:focus-visible {
+      box-shadow: fn.use-var(focus-ring);
+    }
   }
 }

package/src/components/switch/style.scss

@@ -34,6 +34,26 @@ $root-name: switch;
     cursor: default;
   }
 
+  @include m.is-not(disabled, readonly) {
+    &:hover {
+      @include m.bem($root-name, button) {
+        background-color: fn.use-var(color, primary, light-7);
+        border-color: fn.use-var(color, primary, light-5);
+      }
+
+      @include m.is(checked) {
+        @include m.bem($root-name, button) {
+          background-color: fn.use-var(color, primary, dark-1);
+        }
+      }
+    }
+
+    // label 不可聚焦，ring 由视觉隐藏的原生 input 驱动
+    #{fn.bem($root-name, native)}:focus-visible ~ #{fn.bem($root-name, button)} {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
   // 尺寸样式
   @include m.size using ($size) {
     @include m.bem($root-name, button) {
@@ -48,8 +68,12 @@ $root-name: switch;
   }
 
   @include m.e(native) {
+    position: absolute;
+    width: 0;
+    height: 0;
     opacity: 0;
-    visibility: hidden;
+    margin: 0;
+    pointer-events: none;
   }
 
   @include m.e(button) {

package/src/components/switch/switch.vue

@@ -3,7 +3,6 @@
     <input
       type="checkbox"
       :class="cls.e('native')"
-      hidden
       :checked="model"
       :disabled="disabled"
       @input="handleInput"

package/src/components/tabs/style.scss

@@ -7,9 +7,7 @@ $list-radius: fn.use-var(radius, default);
 $item-radius: calc(fn.use-var(radius, default) - 2px);
 $list-padding: 4px;
 $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);
+$active-shadow: fn.use-var(shadow, sm);
 
 /* ===== 复合标签页：bar + content 布局容器 ===== */
 @include m.b(tabs) {
@@ -136,6 +134,10 @@ $active-shadow:
       background-color: $active-bg;
       box-shadow: $active-shadow;
     }
+
+    &:focus-visible {
+      box-shadow: fn.use-var(focus-ring);
+    }
   }
 
   @include m.e(item-label) {
@@ -172,11 +174,11 @@ $active-shadow:
 
     &:hover {
       color: fn.use-var(text-color, title);
-      background-color: rgba(15, 23, 42, 0.08);
+      background-color: fn.color-a(text-color, 8, title);
     }
 
     &:active {
-      background-color: rgba(15, 23, 42, 0.14);
+      background-color: fn.color-a(text-color, 11, title);
     }
   }
 

package/src/components/text/style.scss

@@ -6,27 +6,27 @@ $role-size: (
   main-title: (
     font-size: 18px,
     font-weight: 600,
-    color: #333
+    color: fn.use-var(text-color, title)
   ),
   title: (
     font-size: 16px,
     font-weight: 600,
-    color: #333
+    color: fn.use-var(text-color, main)
   ),
   sub-title: (
     font-size: 16px,
     font-weight: 500,
-    color: #999
+    color: fn.use-var(text-color, placeholder)
   ),
   content: (
     font-size: 14px,
     font-weight: 300,
-    color: #666
+    color: fn.use-var(text-color, second)
   ),
   additional: (
     font-size: 12px,
     font-weight: 300,
-    color: #999
+    color: fn.use-var(text-color, assist)
   )
 );
 

package/src/components/tip/style.scss

@@ -11,7 +11,7 @@ $root-name: tip;
     position: absolute;
     left: 0;
     top: 0;
-    box-shadow: fn.use-var(shadow);
+    box-shadow: fn.use-var(shadow, lg);
     border-radius: fn.use-var(radius, default);
     color: fn.use-var(text-color, main);
 
@@ -31,7 +31,7 @@ $root-name: tip;
   @include m.e(arrow) {
     position: absolute;
     z-index: -1;
-    box-shadow: fn.use-var(shadow);
+    box-shadow: fn.use-var(shadow, lg);
     background-color: fn.use-var(bg-color, top);
     transform: rotate(45deg);
   }