vue3-router-tab 1.1.5 → 1.1.7

package/lib/scss/index.scss

@@ -1,19 +1,19 @@
 @use "sass:math";
 @use "sass:string";
 
-// Fallback palette (overridden by CSS vars when present)
+// Fallback palette (overridden by Vuetify CSS vars)
 $primary-fallback: #635bff;
 $light-bg: #ffffff;
 $light-text: #1e293b;
 $light-border: rgba(15, 23, 42, 0.08);
 
 // Dark mode fallbacks
-$dark-bg: #0f172a;
+$dark-bg: #1e1e1e;
 $dark-text: #e2e8f0;
 $dark-border: rgba(226, 232, 240, 0.12);
 
 $font-size: 14px;
-$tab-trans: all 0.3s ease-in-out;
+$tab-trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 $hd-height: 40px;
 $tab-padding: 20px;
 $close-icon-margin: 4px;
@@ -39,14 +39,15 @@ $close-icon-size: 13px;
 }
 
 .router-tab {
-  $bg: css-var(--router-tab-background, css-var(--theme-background, $light-bg));
-  $fg: css-var(--router-tab-foreground, css-var(--theme-foreground, $light-text));
-  $border: css-var(--router-tab-border, css-var(--theme-border, $light-border));
-  $primary: css-var(--router-tab-primary, css-var(--theme-primary, $primary-fallback));
+  // Use Vuetify theme colors with fallbacks
+  $bg: css-var(--router-tab-background, css-var(--v-theme-surface, css-var(--theme-background, $light-bg)));
+  $fg: css-var(--router-tab-foreground, css-var(--v-theme-on-surface, css-var(--theme-foreground, $light-text)));
+  $border: css-var(--router-tab-border, css-var(--v-border-color, css-var(--theme-border, $light-border)));
+  $primary: css-var(--router-tab-primary, css-var(--v-theme-primary, css-var(--theme-primary, $primary-fallback)));
   $header-bg: css-var(--router-tab-header-bg, $bg);
-  $tooltip-bg: css-var(--router-tab-tooltip-background, rgba(15, 23, 42, 0.88));
-  $tooltip-fg: css-var(--router-tab-tooltip-foreground, #ffffff);
-  $tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
+  $tooltip-bg: css-var(--router-tab-tooltip-background, rgba(var(--v-theme-on-surface), 0.9));
+  $tooltip-fg: css-var(--router-tab-tooltip-foreground, css-var(--v-theme-surface, #ffffff));
+  $tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
 
   display: flex;
   flex-direction: column;
@@ -56,12 +57,7 @@ $close-icon-size: 13px;
 
   // Dark theme default values
   @include dark-theme {
-    --router-tab-background: #{$dark-bg};
-    --router-tab-foreground: #{$dark-text};
-    --router-tab-border: #{$dark-border};
-    --router-tab-tooltip-background: rgba(226, 232, 240, 0.95);
-    --router-tab-tooltip-foreground: #{$dark-bg};
-    --router-tab-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --router-tab-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
   }
 
   &__header {
@@ -73,7 +69,8 @@ $close-icon-size: 13px;
     height: $hd-height;
     border-bottom: 1px solid $border;
     background-color: $header-bg;
-    transition: all 0.2s ease-in-out;
+    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
     @include reduced-motion {
       transition: none;
@@ -107,10 +104,10 @@ $close-icon-size: 13px;
     bottom: 0;
     left: 0;
     height: $h;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.1);
     border-radius: $h;
     opacity: 0;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     @include reduced-motion {
       transition: none;
@@ -126,9 +123,9 @@ $close-icon-size: 13px;
       top: 0;
       left: 0;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.15);
       border-radius: $h;
-      transition: background-color 0.3s ease-in-out;
+      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       @include reduced-motion {
         transition: none;
@@ -136,21 +133,7 @@ $close-icon-size: 13px;
 
       &:hover,
       .router-tab__scrollbar.is-dragging & {
-        background-color: rgba(0, 0, 0, 0.2);
-      }
-    }
-
-    // Dark theme scrollbar
-    @include dark-theme {
-      background-color: rgba(255, 255, 255, 0.15);
-
-      .router-tab__scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.2);
-
-        &:hover,
-        &.is-dragging {
-          background-color: rgba(255, 255, 255, 0.35);
-        }
+        background-color: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.25);
       }
     }
   }
@@ -189,7 +172,7 @@ $close-icon-size: 13px;
       border-left: 1px solid $border;
     }
 
-    // Keyboard focus styles
+    // Keyboard focus styles using Vuetify primary color
     &:focus-visible {
       outline: 2px solid $primary;
       outline-offset: -2px;
@@ -201,12 +184,8 @@ $close-icon-size: 13px;
     }
 
     &.is-drag-over {
-      background: rgba(0, 0, 0, 0.05);
-      transition: background 0.15s ease;
-
-      @include dark-theme {
-        background: rgba(255, 255, 255, 0.08);
-      }
+      background: rgba(var(--v-theme-on-surface, 0, 0, 0), 0.05);
+      transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     &-title {
@@ -223,7 +202,7 @@ $close-icon-size: 13px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      transition: max-width 0.3s ease-in-out;
+      transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       @include reduced-motion {
         transition: none;
@@ -263,12 +242,15 @@ $close-icon-size: 13px;
 
     &.is-active {
       border-bottom-color: $bg;
-      // Fallback for browsers without color-mix support
-      background: rgba(99, 91, 255, 0.12);
-      background: color-mix(in srgb, $primary 12%, $bg 88%);
-      box-shadow: inset 0 -2px 0 rgba(99, 91, 255, 0.65);
-      box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 65%, transparent);
-      color: color-mix(in srgb, $primary 80%, $fg 20%);
+      // Use rgba with Vuetify primary color variable
+      background: rgba(var(--v-theme-primary, 99, 91, 255), 0.08);
+      box-shadow: inset 0 -2px 0 rgba(var(--v-theme-primary, 99, 91, 255), 0.5);
+      
+      // Fallback for browsers with color-mix support
+      @supports (background: color-mix(in srgb, red 50%, blue)) {
+        background: color-mix(in srgb, $primary 8%, $bg 92%);
+        box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 50%, transparent);
+      }
 
       &::after {
         content: '';
@@ -279,7 +261,7 @@ $close-icon-size: 13px;
         height: 2px;
         border-radius: 999px;
         background: $primary;
-        opacity: 0.6;
+        opacity: 0.7;
         pointer-events: none;
       }
     }
@@ -292,12 +274,12 @@ $close-icon-size: 13px;
         bottom: calc(100% + 8px);
         display: inline-block;
         max-width: 320px;
-        padding: 4px 10px;
+        padding: 6px 12px;
         border-radius: 6px;
         background: $tooltip-bg;
         color: $tooltip-fg;
         font-size: 12px;
-        line-height: 1.3;
+        line-height: 1.4;
         text-align: center;
         white-space: normal;
         word-break: break-word;
@@ -305,11 +287,12 @@ $close-icon-size: 13px;
         box-shadow: $tooltip-shadow;
         opacity: 0;
         pointer-events: none;
-        transition: opacity 0.2s ease, transform 0.2s ease;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 10;
 
         @include reduced-motion {
-          transition: opacity 0.2s ease;
+          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           transform: translate(-50%, 0);
         }
       }
@@ -325,11 +308,12 @@ $close-icon-size: 13px;
         transform: translate(-50%, 6px) rotate(45deg);
         opacity: 0;
         pointer-events: none;
-        transition: opacity 0.2s ease, transform 0.2s ease;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 9;
 
         @include reduced-motion {
-          transition: opacity 0.2s ease;
+          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           transform: translate(-50%, 0) rotate(45deg);
         }
       }
@@ -381,7 +365,7 @@ $close-icon-size: 13px;
         height: 1px;
         margin-left: math.div(-$inner, 2);
         background-color: currentColor;
-        transition: background-color 0.2s ease-in-out;
+        transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         content: '';
 
         @include reduced-motion {
@@ -398,21 +382,17 @@ $close-icon-size: 13px;
       }
 
       &:hover {
-        // Fallback for browsers without color-mix
-        background-color: rgba(99, 91, 255, 0.4);
-        background-color: color-mix(in srgb, $primary 40%, #ffffff 60%);
+        // Use Vuetify primary color with rgba
+        background-color: rgba(var(--v-theme-primary, 99, 91, 255), 0.15);
 
-        &::before,
-        &::after {
-          background-color: #fff;
+        // Fallback for browsers with color-mix support
+        @supports (background: color-mix(in srgb, red 50%, blue)) {
+          background-color: color-mix(in srgb, $primary 15%, transparent);
         }
-      }
 
-      // Dark theme close button
-      @include dark-theme {
-        &:hover {
-          background-color: rgba(99, 91, 255, 0.6);
-          background-color: color-mix(in srgb, $primary 60%, transparent 40%);
+        &::before,
+        &::after {
+          background-color: $primary;
         }
       }
     }
@@ -426,27 +406,25 @@ $close-icon-size: 13px;
     font-size: $font-size;
     background: $bg;
     border: 1px solid $border;
-    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
+    box-shadow: 0 5px 15px -3px rgba(var(--v-shadow-key-umbra-opacity, 0, 0, 0), 0.2),
+                0 8px 20px 1px rgba(var(--v-shadow-key-penumbra-opacity, 0, 0, 0), 0.14),
+                0 3px 24px 2px rgba(var(--v-shadow-key-ambient-opacity, 0, 0, 0), 0.12);
     border-radius: 8px;
 
-    // Dark theme context menu
-    @include dark-theme {
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    }
-
     a,
     button {
       display: block;
       width: 100%;
       padding: 0 16px;
-      line-height: 30px;
+      line-height: 32px;
       text-align: left;
       background: transparent;
       border: none;
       color: inherit;
       cursor: pointer;
       font: inherit;
-      transition: background-color 0.2s ease-in-out;
+      transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                  color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
       @include reduced-motion {
         transition: none;
@@ -459,24 +437,18 @@ $close-icon-size: 13px;
       }
 
       &[aria-disabled='true'] {
-        color: rgba(148, 163, 184, 0.6);
+        color: rgba(var(--v-theme-on-surface, 148, 163, 184), 0.4);
         pointer-events: none;
         cursor: not-allowed;
-
-        @include dark-theme {
-          color: rgba(226, 232, 240, 0.3);
-        }
       }
 
       &:hover:not([aria-disabled='true']),
       &:focus-visible:not([aria-disabled='true']) {
-        // Fallback for browsers without color-mix
-        background: rgba(99, 91, 255, 0.2);
-        background: color-mix(in srgb, $primary 20%, #ffffff 80%);
+        background: rgba(var(--v-theme-primary, 99, 91, 255), 0.08);
         color: $primary;
 
-        @include dark-theme {
-          background: color-mix(in srgb, $primary 25%, transparent 75%);
+        @supports (background: color-mix(in srgb, red 50%, blue)) {
+          background: color-mix(in srgb, $primary 8%, transparent);
         }
       }
     }
@@ -491,7 +463,7 @@ $close-icon-size: 13px;
 }
 
 .router-tab__item.is-active + .router-tab__item {
-  border-left-color: css-var(--router-tab-border, css-var(--theme-border, $light-border));
+  border-left-color: css-var(--router-tab-border, css-var(--v-border-color, css-var(--theme-border, $light-border)));
 }
 
 // Container query support (progressive enhancement)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "files": [
     "dist",