@vuetify/nightly 3.7.3-next.2024-11-01 → 3.7.4-dev.2024-11-06

package/lib/components/VBtn/VBtn.sass

@@ -88,8 +88,9 @@
           opacity: $button-disabled-opacity
       @else
         opacity: 1
-        @include tools.layer('trumps')
-          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
+        &.v-btn
+          // specificity has to be higher to override theme !important
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
 
       &.v-btn--variant-elevated,
       &.v-btn--variant-flat
@@ -100,8 +101,7 @@
           color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
           background: rgb(var(--v-theme-surface))
         @else
-          @include tools.layer('trumps')
-            background: rgb(var(--v-theme-surface))
+          background: rgb(var(--v-theme-surface)) !important
 
         .v-btn__overlay
           // __overlay uses currentColor, so we need to divide
@@ -232,16 +232,15 @@
     @include tools.absolute()
 
   // VPagination
-  .v-btn
-    .v-pagination &
+  .v-pagination
+    .v-btn
       @include tools.rounded($button-pagination-border-radius)
 
-    &--rounded
-      .v-pagination &
+      &--rounded
         @include tools.rounded($button-pagination-rounded-border-radius)
 
-    &__overlay
-      transition: none
+      &__overlay
+        transition: none
 
-      .v-pagination__item--is-active &
-        opacity: $button-pagination-active-overlay-opacity
+    .v-pagination__item--is-active .v-btn__overlay
+      opacity: $button-pagination-active-overlay-opacity

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -1,64 +1,65 @@
-@layer vuetify.components {
-  .v-btn-group {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    vertical-align: middle;
-  }
-  .v-btn-group {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    border-style: solid;
-    border-width: 0;
-  }
-  .v-btn-group--border {
-    border-width: thin;
-    box-shadow: none;
-  }
-  .v-btn-group {
-    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-btn-group {
-    border-radius: 4px;
-  }
-  .v-btn-group {
-    background: transparent;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-btn-group--density-default.v-btn-group {
-    height: 48px;
-  }
-  .v-btn-group--density-comfortable.v-btn-group {
-    height: 40px;
-  }
-  .v-btn-group--density-compact.v-btn-group {
-    height: 36px;
-  }
-  .v-btn-group .v-btn {
-    border-radius: 0;
-    border-color: inherit;
-  }
-  .v-btn-group .v-btn:not(:last-child) {
-    border-inline-end: none;
-  }
-  .v-btn-group .v-btn:not(:first-child) {
-    border-inline-start: none;
-  }
-  .v-btn-group .v-btn:first-child {
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
-  }
-  .v-btn-group .v-btn:last-child {
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-  .v-btn-group--divided .v-btn:not(:last-child) {
-    border-inline-end-width: thin;
-    border-inline-end-style: solid;
-    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-btn-group--tile {
-    border-radius: 0;
-  }
+.v-btn-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.v-btn-group {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+}
+.v-btn-group--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-btn-group {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-btn-group {
+  border-radius: 4px;
+}
+.v-btn-group {
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-btn-group--density-default.v-btn-group {
+  height: 48px;
+}
+
+.v-btn-group--density-comfortable.v-btn-group {
+  height: 40px;
+}
+
+.v-btn-group--density-compact.v-btn-group {
+  height: 36px;
+}
+
+.v-btn-group .v-btn {
+  border-radius: 0;
+  border-color: inherit;
+}
+.v-btn-group .v-btn:not(:last-child) {
+  border-inline-end: none;
+}
+.v-btn-group .v-btn:not(:first-child) {
+  border-inline-start: none;
+}
+.v-btn-group .v-btn:first-child {
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+.v-btn-group .v-btn:last-child {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+.v-btn-group--divided .v-btn:not(:last-child) {
+  border-inline-end-width: thin;
+  border-inline-end-style: solid;
+  border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-btn-group--tile {
+  border-radius: 0;
 }

package/lib/components/VBtnToggle/VBtnToggle.css

@@ -1,16 +1,17 @@
-@layer vuetify.components {
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
-    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
-  }
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
-    opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
+  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
+  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
     opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
-  @supports not selector(:focus-visible) {
-    .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
-      opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-    }
-  }
+}
+.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
+  opacity: 1;
 }

package/lib/components/VBtnToggle/VBtnToggle.sass

@@ -5,3 +5,6 @@
   .v-btn-toggle
     > .v-btn.v-btn--active:not(.v-btn--disabled)
       @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)
+
+      &.v-btn--variant-plain
+        opacity: 1