diff --git a/package.json b/package.json index f273c3ecefc..dfb2022b7ae 100755 --- a/package.json +++ b/package.json @@ -94,7 +94,8 @@ "overrides": { "@testing-library/dom": "npm:@vuetify/testing-library-dom@1.0.2", "@types/node": "22.5.4", - "tough-cookie": "5.0.0-rc.4" + "tough-cookie": "5.0.0-rc.4", + "rrweb-cssom": "0.8.0" } } } diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json index 9d0a526bde2..f1ac71a7636 100644 --- a/packages/docs/src/data/nav.json +++ b/packages/docs/src/data/nav.json @@ -54,6 +54,7 @@ "activeIcon": "mdi-palette", "items": [ "css-reset", + "layers", "transitions", "colors", { "divider": true }, diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md index 142644313f0..b318513c828 100644 --- a/packages/docs/src/pages/en/features/sass-variables.md +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -247,30 +247,6 @@ Color packs are handy for quickly applying a color to a component but mostly unu ); ``` -## Enabling CSS cascade layers - -::: success -This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) -::: - -[Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a modern CSS feature that makes it easier to write custom styles without having to deal with specificity issues and `!important`. This will be included by default in Vuetify 4 but can optionally be used now: - -```scss { resource="src/styles/settings.scss" } -@forward 'vuetify/settings' with ( - $layers: true, -); -``` - -Import order of stylesheets becomes much more important with layers enabled, `import 'vuetify/styles'` or a file containing `@use 'vuetify'` **must** be loaded *before* any components or the CSS reset will take precedence over component styles and break everything. If you have separate plugin files make sure to import vuetify's before `App.vue`. - -Your own styles will always* override vuetify's if you don't use `@layer` yourself, or you can specify an order for custom layers in a stylesheet loaded before vuetify. - -```css { resource="src/styles/layers.css" } -@layer base, vuetify, overrides; -``` - -\* Layers invert `!important`, so anything trying to override an important vuetify style must also be in a layer. { class="text-caption" } - ## Caveats When using sass variables, there are a few considerations to be aware of. diff --git a/packages/docs/src/pages/en/styles/layers.md b/packages/docs/src/pages/en/styles/layers.md new file mode 100644 index 00000000000..24705b662e6 --- /dev/null +++ b/packages/docs/src/pages/en/styles/layers.md @@ -0,0 +1,28 @@ +--- +meta: + title: CSS Layers + description: Vuetify 4 uses cascade layers to avoid specificity problems + keywords: cascade layers, vuetify !important +related: + - /features/sass-variables/ +--- + +::: success +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) +::: + +# CSS Layers + +[Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a modern CSS feature that makes it easier to write custom styles without having to deal with specificity issues and `!important`. + +Import order of stylesheets becomes much more important with layers, therefore `import 'vuetify/styles'` or a file containing `@use 'vuetify'` **must** be loaded *before* any components or the CSS reset will take precedence over component styles and break everything. If you have separate plugin files make sure to import the vuetify plugin before `App.vue` or any other components. + +Your own styles will always* override vuetify's if you don't use `@layer` yourself, or you can specify an order for custom layers in a stylesheet loaded before vuetify. + +```css { resource="src/styles/layers.css" } +@layer base, vuetify, overrides; +``` + +Vuetify also defines an empty `vuetify.custom` layer that you can put your overrides in, this does not need declaring in advance and can be used immediately. + +\* Layers invert `!important`, so anything trying to override an !important vuetify style must also be in a layer. We try to avoid !important for this reason but a few still exist { class="text-caption" } diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass index 680b2e3336d..93bb122a123 100644 --- a/packages/vuetify/src/components/VBtn/VBtn.sass +++ b/packages/vuetify/src/components/VBtn/VBtn.sass @@ -88,9 +88,8 @@ opacity: $button-disabled-opacity @else opacity: 1 - &.v-btn - // specificity has to be higher to override theme !important - color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important + @include tools.layer('trumps') + color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) &.v-btn--variant-elevated, &.v-btn--variant-flat @@ -101,7 +100,8 @@ color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) background: rgb(var(--v-theme-surface)) @else - background: rgb(var(--v-theme-surface)) !important + @include tools.layer('trumps') + background: rgb(var(--v-theme-surface)) .v-btn__overlay // __overlay uses currentColor, so we need to divide diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.sass b/packages/vuetify/src/components/VCarousel/VCarousel.sass index 66f89cbd13f..623751d1796 100644 --- a/packages/vuetify/src/components/VCarousel/VCarousel.sass +++ b/packages/vuetify/src/components/VCarousel/VCarousel.sass @@ -64,5 +64,5 @@ .v-carousel--vertical-delimiters .v-carousel__controls flex-direction: column - height: 100% !important + height: 100% width: $carousel-controls-size diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass index ed4227985ff..2581d59c3ff 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass @@ -4,7 +4,8 @@ @include tools.layer('components') .v-color-picker-preview__alpha .v-slider-track__background - background-color: transparent !important + @include tools.layer('overrides') + background-color: transparent @include tools.ltr() background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv)) @@ -54,7 +55,8 @@ position: relative width: 100% - margin: 0 !important + @include tools.layer('overrides') + margin: 0 .v-slider-track__fill display: none diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 8789632346d..59f086fb064 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -77,10 +77,16 @@ .v-data-table-column--fixed, .v-data-table__th--sticky background: $table-background - position: sticky !important left: 0 z-index: 1 + @include tools.layer('overrides') + // Beat out relative on table > tbody > tr > td + // TODO: Use :where() for all those child combinators + // @scope would probably be even better but + // doesn't seem to be getting here any time soon + position: sticky + .v-data-table-column--last-fixed border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) @@ -99,8 +105,10 @@ .v-data-table__td opacity: $data-table-loading-opacity - .v-data-table-group-header-row__column - padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important + @include tools.layer('overrides') + // Again, needs to beat all the child combinators + .v-data-table-group-header-row__column + padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) .v-data-table-header__content display: flex @@ -119,11 +127,12 @@ width: $data-table-header-sort-badge-size height: $data-table-header-sort-badge-size - .v-data-table-progress - > th - border: none !important - height: auto !important - padding: 0 !important + @include tools.layer('overrides') + .v-data-table-progress + > th + border: none + height: auto + padding: 0 .v-data-table-progress__loader position: relative @@ -148,8 +157,9 @@ grid-template-columns: repeat(2, 1fr) min-height: var(--v-table-row-height) - &:not(:last-child) - border-bottom: 0 !important + @include tools.layer('overrides') + &:not(:last-child) + border-bottom: 0 .v-data-table__td-title font-weight: VTable.$table-header-font-weight diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass index 44bafc512e7..84f0d53994f 100644 --- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass @@ -33,39 +33,41 @@ position: relative z-index: 1 - &:not(&--variant-accordion) - > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important + @include tools.layer('overrides') + &:not(&--variant-accordion) + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 - > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 + border-top-right-radius: 0 - > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important + > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 - > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important + > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 + border-top-right-radius: 0 - &--variant-accordion - > :first-child:not(:last-child) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important + &--variant-accordion + > :first-child:not(:last-child) + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 - > :last-child:not(:first-child) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important + > :last-child:not(:first-child) + border-top-left-radius: 0 + border-top-right-radius: 0 - .v-expansion-panel-title--active - border-bottom-left-radius: initial - border-bottom-right-radius: initial + .v-expansion-panel-title--active + border-bottom-left-radius: initial + border-bottom-right-radius: initial - > :not(:first-child):not(:last-child) - border-radius: 0 !important + > :not(:first-child):not(:last-child) + border-radius: 0 + &--variant-accordion .v-expansion-panel-title__overlay transition: 0.3s border-radius settings.$standard-easing diff --git a/packages/vuetify/src/components/VFab/VFab.sass b/packages/vuetify/src/components/VFab/VFab.sass index e6bf9eea331..d8cfac5c553 100644 --- a/packages/vuetify/src/components/VFab/VFab.sass +++ b/packages/vuetify/src/components/VFab/VFab.sass @@ -45,10 +45,11 @@ align-items: flex-start &--extended - .v-btn - // min-height: 56px - // min-width: 80px - border-radius: 9999px !important + @include tools.layer('overrides') + .v-btn + // min-height: 56px + // min-width: 80px + border-radius: 9999px .v-fab__container align-self: center diff --git a/packages/vuetify/src/components/VList/VList.sass b/packages/vuetify/src/components/VList/VList.sass index 6bec2f9f528..897643b2072 100644 --- a/packages/vuetify/src/components/VList/VList.sass +++ b/packages/vuetify/src/components/VList/VList.sass @@ -63,7 +63,7 @@ #{$root} min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier) - padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) &--inset --indent-padding: #{$list-subheader-inset-padding-start} diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index 3dfb6b0b782..0a4031e91fd 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -317,7 +317,8 @@ --indent-padding: calc(var(--parent-padding) + var(--list-indent-size)) .v-list-group__items .v-list-item - padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + @include tools.layer('overrides') + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) .v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active &:not(:focus-visible) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.sass b/packages/vuetify/src/components/VOverlay/VOverlay.sass index 7d8a1cec563..37162de9bfe 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.sass +++ b/packages/vuetify/src/components/VOverlay/VOverlay.sass @@ -12,19 +12,6 @@ top: 0 display: contents - .v-overlay-scroll-blocked - padding-inline-end: var(--v-scrollbar-offset) - - &:not(html) - overflow-y: hidden !important - - @at-root #{selector.append(html, &)} - position: fixed - top: var(--v-body-scroll-y) - left: var(--v-body-scroll-x) - width: 100% - height: 100% - .v-overlay border-radius: inherit display: flex @@ -62,3 +49,17 @@ .v-overlay--scroll-blocked padding-inline-end: var(--v-scrollbar-offset) + +@include tools.layer('trumps') + .v-overlay-scroll-blocked + padding-inline-end: var(--v-scrollbar-offset) + + &:not(html) + overflow-y: hidden + + @at-root #{selector.append(html, &)} + position: fixed + top: var(--v-body-scroll-y) + left: var(--v-body-scroll-x) + width: 100% + height: 100% diff --git a/packages/vuetify/src/components/VTable/VTable.sass b/packages/vuetify/src/components/VTable/VTable.sass index a459c9fdb66..5120dac9708 100644 --- a/packages/vuetify/src/components/VTable/VTable.sass +++ b/packages/vuetify/src/components/VTable/VTable.sass @@ -154,7 +154,8 @@ z-index: 2 > tr > th - border-bottom: 0px !important + @include tools.layer('overrides') + border-bottom: 0px .v-table--fixed-footer > .v-table__wrapper @@ -166,4 +167,5 @@ z-index: 1 > td, > th - border-top: 0px !important + @include tools.layer('overrides') + border-top: 0px diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.sass b/packages/vuetify/src/components/VTextarea/VTextarea.sass index 4f86f5742c9..744555bc399 100644 --- a/packages/vuetify/src/components/VTextarea/VTextarea.sass +++ b/packages/vuetify/src/components/VTextarea/VTextarea.sass @@ -26,10 +26,12 @@ position: absolute top: 0 left: 0 - height: 0 !important - min-height: 0 !important pointer-events: none + @include tools.layer('overrides') + height: 0 + min-height: 0 + &--no-resize .v-field__input resize: none diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.sass b/packages/vuetify/src/components/VTooltip/VTooltip.sass index eeab163e2b6..a9658e76a52 100644 --- a/packages/vuetify/src/components/VTooltip/VTooltip.sass +++ b/packages/vuetify/src/components/VTooltip/VTooltip.sass @@ -19,10 +19,12 @@ transition-property: opacity, transform overflow-wrap: $tooltip-overflow-wrap - &[class*="enter-active"] - transition-timing-function: settings.$decelerated-easing - transition-duration: $tooltip-transition-enter-duration +@include tools.layer('overrides') + .v-tooltip > .v-overlay__content + &[class*="enter-active"] + transition-timing-function: settings.$decelerated-easing + transition-duration: $tooltip-transition-enter-duration - &[class*="leave-active"] - transition-timing-function: settings.$accelerated-easing - transition-duration: $tooltip-transition-leave-duration + &[class*="leave-active"] + transition-timing-function: settings.$accelerated-easing + transition-duration: $tooltip-transition-leave-duration diff --git a/packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap b/packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap index c8531ed3b4c..371262e5a3f 100644 --- a/packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap +++ b/packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap @@ -6,362 +6,364 @@ exports[`createTheme > should create style element 1`] = ` id="vuetify-theme-stylesheet" type="text/css" > - :root { - --v-theme-background: 255,255,255; - --v-theme-background-overlay-multiplier: 1; - --v-theme-surface: 255,255,255; - --v-theme-surface-overlay-multiplier: 1; - --v-theme-surface-bright: 255,255,255; - --v-theme-surface-bright-overlay-multiplier: 1; - --v-theme-surface-light: 238,238,238; - --v-theme-surface-light-overlay-multiplier: 1; - --v-theme-surface-variant: 66,66,66; - --v-theme-surface-variant-overlay-multiplier: 2; - --v-theme-on-surface-variant: 238,238,238; - --v-theme-primary: 24,103,192; - --v-theme-primary-overlay-multiplier: 2; - --v-theme-primary-darken-1: 31,85,146; - --v-theme-primary-darken-1-overlay-multiplier: 2; - --v-theme-secondary: 72,169,166; - --v-theme-secondary-overlay-multiplier: 1; - --v-theme-secondary-darken-1: 1,135,134; - --v-theme-secondary-darken-1-overlay-multiplier: 1; - --v-theme-error: 176,0,32; - --v-theme-error-overlay-multiplier: 2; - --v-theme-info: 33,150,243; - --v-theme-info-overlay-multiplier: 1; - --v-theme-success: 76,175,80; - --v-theme-success-overlay-multiplier: 1; - --v-theme-warning: 251,140,0; - --v-theme-warning-overlay-multiplier: 1; - --v-theme-on-background: 0,0,0; - --v-theme-on-surface: 0,0,0; - --v-theme-on-surface-bright: 0,0,0; - --v-theme-on-surface-light: 0,0,0; - --v-theme-on-primary: 255,255,255; - --v-theme-on-primary-darken-1: 255,255,255; - --v-theme-on-secondary: 255,255,255; - --v-theme-on-secondary-darken-1: 255,255,255; - --v-theme-on-error: 255,255,255; - --v-theme-on-info: 255,255,255; - --v-theme-on-success: 255,255,255; - --v-theme-on-warning: 255,255,255; - --v-border-color: 0, 0, 0; - --v-border-opacity: 0.12; - --v-high-emphasis-opacity: 0.87; - --v-medium-emphasis-opacity: 0.6; - --v-disabled-opacity: 0.38; - --v-idle-opacity: 0.04; - --v-hover-opacity: 0.04; - --v-focus-opacity: 0.12; - --v-selected-opacity: 0.08; - --v-activated-opacity: 0.12; - --v-pressed-opacity: 0.12; - --v-dragged-opacity: 0.08; - --v-theme-kbd: 33, 37, 41; - --v-theme-on-kbd: 255, 255, 255; - --v-theme-code: 245, 245, 245; - --v-theme-on-code: 0, 0, 0; - } - .v-theme--light { - color-scheme: normal; - --v-theme-background: 255,255,255; - --v-theme-background-overlay-multiplier: 1; - --v-theme-surface: 255,255,255; - --v-theme-surface-overlay-multiplier: 1; - --v-theme-surface-bright: 255,255,255; - --v-theme-surface-bright-overlay-multiplier: 1; - --v-theme-surface-light: 238,238,238; - --v-theme-surface-light-overlay-multiplier: 1; - --v-theme-surface-variant: 66,66,66; - --v-theme-surface-variant-overlay-multiplier: 2; - --v-theme-on-surface-variant: 238,238,238; - --v-theme-primary: 24,103,192; - --v-theme-primary-overlay-multiplier: 2; - --v-theme-primary-darken-1: 31,85,146; - --v-theme-primary-darken-1-overlay-multiplier: 2; - --v-theme-secondary: 72,169,166; - --v-theme-secondary-overlay-multiplier: 1; - --v-theme-secondary-darken-1: 1,135,134; - --v-theme-secondary-darken-1-overlay-multiplier: 1; - --v-theme-error: 176,0,32; - --v-theme-error-overlay-multiplier: 2; - --v-theme-info: 33,150,243; - --v-theme-info-overlay-multiplier: 1; - --v-theme-success: 76,175,80; - --v-theme-success-overlay-multiplier: 1; - --v-theme-warning: 251,140,0; - --v-theme-warning-overlay-multiplier: 1; - --v-theme-on-background: 0,0,0; - --v-theme-on-surface: 0,0,0; - --v-theme-on-surface-bright: 0,0,0; - --v-theme-on-surface-light: 0,0,0; - --v-theme-on-primary: 255,255,255; - --v-theme-on-primary-darken-1: 255,255,255; - --v-theme-on-secondary: 255,255,255; - --v-theme-on-secondary-darken-1: 255,255,255; - --v-theme-on-error: 255,255,255; - --v-theme-on-info: 255,255,255; - --v-theme-on-success: 255,255,255; - --v-theme-on-warning: 255,255,255; - --v-border-color: 0, 0, 0; - --v-border-opacity: 0.12; - --v-high-emphasis-opacity: 0.87; - --v-medium-emphasis-opacity: 0.6; - --v-disabled-opacity: 0.38; - --v-idle-opacity: 0.04; - --v-hover-opacity: 0.04; - --v-focus-opacity: 0.12; - --v-selected-opacity: 0.08; - --v-activated-opacity: 0.12; - --v-pressed-opacity: 0.12; - --v-dragged-opacity: 0.08; - --v-theme-kbd: 33, 37, 41; - --v-theme-on-kbd: 255, 255, 255; - --v-theme-code: 245, 245, 245; - --v-theme-on-code: 0, 0, 0; - } - .v-theme--dark { - color-scheme: dark; - --v-theme-background: 18,18,18; - --v-theme-background-overlay-multiplier: 1; - --v-theme-surface: 33,33,33; - --v-theme-surface-overlay-multiplier: 1; - --v-theme-surface-bright: 204,191,214; - --v-theme-surface-bright-overlay-multiplier: 2; - --v-theme-surface-light: 66,66,66; - --v-theme-surface-light-overlay-multiplier: 1; - --v-theme-surface-variant: 163,163,163; - --v-theme-surface-variant-overlay-multiplier: 2; - --v-theme-on-surface-variant: 66,66,66; - --v-theme-primary: 33,150,243; - --v-theme-primary-overlay-multiplier: 2; - --v-theme-primary-darken-1: 39,124,193; - --v-theme-primary-darken-1-overlay-multiplier: 2; - --v-theme-secondary: 84,182,178; - --v-theme-secondary-overlay-multiplier: 2; - --v-theme-secondary-darken-1: 72,169,166; - --v-theme-secondary-darken-1-overlay-multiplier: 2; - --v-theme-error: 207,102,121; - --v-theme-error-overlay-multiplier: 2; - --v-theme-info: 33,150,243; - --v-theme-info-overlay-multiplier: 2; - --v-theme-success: 76,175,80; - --v-theme-success-overlay-multiplier: 2; - --v-theme-warning: 251,140,0; - --v-theme-warning-overlay-multiplier: 2; - --v-theme-on-background: 255,255,255; - --v-theme-on-surface: 255,255,255; - --v-theme-on-surface-bright: 0,0,0; - --v-theme-on-surface-light: 255,255,255; - --v-theme-on-primary: 255,255,255; - --v-theme-on-primary-darken-1: 255,255,255; - --v-theme-on-secondary: 255,255,255; - --v-theme-on-secondary-darken-1: 255,255,255; - --v-theme-on-error: 255,255,255; - --v-theme-on-info: 255,255,255; - --v-theme-on-success: 255,255,255; - --v-theme-on-warning: 255,255,255; - --v-border-color: 255, 255, 255; - --v-border-opacity: 0.12; - --v-high-emphasis-opacity: 1; - --v-medium-emphasis-opacity: 0.7; - --v-disabled-opacity: 0.5; - --v-idle-opacity: 0.1; - --v-hover-opacity: 0.04; - --v-focus-opacity: 0.12; - --v-selected-opacity: 0.08; - --v-activated-opacity: 0.12; - --v-pressed-opacity: 0.16; - --v-dragged-opacity: 0.08; - --v-theme-kbd: 33, 37, 41; - --v-theme-on-kbd: 255, 255, 255; - --v-theme-code: 52, 52, 52; - --v-theme-on-code: 204, 204, 204; - } - .bg-background { - --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier); - background-color: rgb(var(--v-theme-background)) !important; - color: rgb(var(--v-theme-on-background)) !important; - } - .bg-surface { - --v-theme-overlay-multiplier: var(--v-theme-surface-overlay-multiplier); - background-color: rgb(var(--v-theme-surface)) !important; - color: rgb(var(--v-theme-on-surface)) !important; - } - .bg-surface-bright { - --v-theme-overlay-multiplier: var(--v-theme-surface-bright-overlay-multiplier); - background-color: rgb(var(--v-theme-surface-bright)) !important; - color: rgb(var(--v-theme-on-surface-bright)) !important; - } - .bg-surface-light { - --v-theme-overlay-multiplier: var(--v-theme-surface-light-overlay-multiplier); - background-color: rgb(var(--v-theme-surface-light)) !important; - color: rgb(var(--v-theme-on-surface-light)) !important; - } - .bg-surface-variant { - --v-theme-overlay-multiplier: var(--v-theme-surface-variant-overlay-multiplier); - background-color: rgb(var(--v-theme-surface-variant)) !important; - color: rgb(var(--v-theme-on-surface-variant)) !important; - } - .bg-primary { - --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier); - background-color: rgb(var(--v-theme-primary)) !important; - color: rgb(var(--v-theme-on-primary)) !important; - } - .bg-primary-darken-1 { - --v-theme-overlay-multiplier: var(--v-theme-primary-darken-1-overlay-multiplier); - background-color: rgb(var(--v-theme-primary-darken-1)) !important; - color: rgb(var(--v-theme-on-primary-darken-1)) !important; - } - .bg-secondary { - --v-theme-overlay-multiplier: var(--v-theme-secondary-overlay-multiplier); - background-color: rgb(var(--v-theme-secondary)) !important; - color: rgb(var(--v-theme-on-secondary)) !important; - } - .bg-secondary-darken-1 { - --v-theme-overlay-multiplier: var(--v-theme-secondary-darken-1-overlay-multiplier); - background-color: rgb(var(--v-theme-secondary-darken-1)) !important; - color: rgb(var(--v-theme-on-secondary-darken-1)) !important; - } - .bg-error { - --v-theme-overlay-multiplier: var(--v-theme-error-overlay-multiplier); - background-color: rgb(var(--v-theme-error)) !important; - color: rgb(var(--v-theme-on-error)) !important; - } - .bg-info { - --v-theme-overlay-multiplier: var(--v-theme-info-overlay-multiplier); - background-color: rgb(var(--v-theme-info)) !important; - color: rgb(var(--v-theme-on-info)) !important; - } - .bg-success { - --v-theme-overlay-multiplier: var(--v-theme-success-overlay-multiplier); - background-color: rgb(var(--v-theme-success)) !important; - color: rgb(var(--v-theme-on-success)) !important; - } - .bg-warning { - --v-theme-overlay-multiplier: var(--v-theme-warning-overlay-multiplier); - background-color: rgb(var(--v-theme-warning)) !important; - color: rgb(var(--v-theme-on-warning)) !important; - } - .text-background { - color: rgb(var(--v-theme-background)) !important; - } - .border-background { - --v-border-color: var(--v-theme-background); - } - .text-surface { - color: rgb(var(--v-theme-surface)) !important; - } - .border-surface { - --v-border-color: var(--v-theme-surface); - } - .text-surface-bright { - color: rgb(var(--v-theme-surface-bright)) !important; - } - .border-surface-bright { - --v-border-color: var(--v-theme-surface-bright); - } - .text-surface-light { - color: rgb(var(--v-theme-surface-light)) !important; - } - .border-surface-light { - --v-border-color: var(--v-theme-surface-light); - } - .text-surface-variant { - color: rgb(var(--v-theme-surface-variant)) !important; - } - .border-surface-variant { - --v-border-color: var(--v-theme-surface-variant); - } - .on-surface-variant { - color: rgb(var(--v-theme-on-surface-variant)) !important; - } - .text-primary { - color: rgb(var(--v-theme-primary)) !important; - } - .border-primary { - --v-border-color: var(--v-theme-primary); - } - .text-primary-darken-1 { - color: rgb(var(--v-theme-primary-darken-1)) !important; - } - .border-primary-darken-1 { - --v-border-color: var(--v-theme-primary-darken-1); - } - .text-secondary { - color: rgb(var(--v-theme-secondary)) !important; - } - .border-secondary { - --v-border-color: var(--v-theme-secondary); - } - .text-secondary-darken-1 { - color: rgb(var(--v-theme-secondary-darken-1)) !important; - } - .border-secondary-darken-1 { - --v-border-color: var(--v-theme-secondary-darken-1); - } - .text-error { - color: rgb(var(--v-theme-error)) !important; - } - .border-error { - --v-border-color: var(--v-theme-error); - } - .text-info { - color: rgb(var(--v-theme-info)) !important; - } - .border-info { - --v-border-color: var(--v-theme-info); - } - .text-success { - color: rgb(var(--v-theme-success)) !important; - } - .border-success { - --v-border-color: var(--v-theme-success); - } - .text-warning { - color: rgb(var(--v-theme-warning)) !important; - } - .border-warning { - --v-border-color: var(--v-theme-warning); - } - .on-background { - color: rgb(var(--v-theme-on-background)) !important; - } - .on-surface { - color: rgb(var(--v-theme-on-surface)) !important; - } - .on-surface-bright { - color: rgb(var(--v-theme-on-surface-bright)) !important; - } - .on-surface-light { - color: rgb(var(--v-theme-on-surface-light)) !important; - } - .on-primary { - color: rgb(var(--v-theme-on-primary)) !important; - } - .on-primary-darken-1 { - color: rgb(var(--v-theme-on-primary-darken-1)) !important; - } - .on-secondary { - color: rgb(var(--v-theme-on-secondary)) !important; - } - .on-secondary-darken-1 { - color: rgb(var(--v-theme-on-secondary-darken-1)) !important; - } - .on-error { - color: rgb(var(--v-theme-on-error)) !important; - } - .on-info { - color: rgb(var(--v-theme-on-info)) !important; - } - .on-success { - color: rgb(var(--v-theme-on-success)) !important; - } - .on-warning { - color: rgb(var(--v-theme-on-warning)) !important; - } + @layer vuetify.theme { + :root { + --v-theme-background: 255,255,255; + --v-theme-background-overlay-multiplier: 1; + --v-theme-surface: 255,255,255; + --v-theme-surface-overlay-multiplier: 1; + --v-theme-surface-bright: 255,255,255; + --v-theme-surface-bright-overlay-multiplier: 1; + --v-theme-surface-light: 238,238,238; + --v-theme-surface-light-overlay-multiplier: 1; + --v-theme-surface-variant: 66,66,66; + --v-theme-surface-variant-overlay-multiplier: 2; + --v-theme-on-surface-variant: 238,238,238; + --v-theme-primary: 24,103,192; + --v-theme-primary-overlay-multiplier: 2; + --v-theme-primary-darken-1: 31,85,146; + --v-theme-primary-darken-1-overlay-multiplier: 2; + --v-theme-secondary: 72,169,166; + --v-theme-secondary-overlay-multiplier: 1; + --v-theme-secondary-darken-1: 1,135,134; + --v-theme-secondary-darken-1-overlay-multiplier: 1; + --v-theme-error: 176,0,32; + --v-theme-error-overlay-multiplier: 2; + --v-theme-info: 33,150,243; + --v-theme-info-overlay-multiplier: 1; + --v-theme-success: 76,175,80; + --v-theme-success-overlay-multiplier: 1; + --v-theme-warning: 251,140,0; + --v-theme-warning-overlay-multiplier: 1; + --v-theme-on-background: 0,0,0; + --v-theme-on-surface: 0,0,0; + --v-theme-on-surface-bright: 0,0,0; + --v-theme-on-surface-light: 0,0,0; + --v-theme-on-primary: 255,255,255; + --v-theme-on-primary-darken-1: 255,255,255; + --v-theme-on-secondary: 255,255,255; + --v-theme-on-secondary-darken-1: 255,255,255; + --v-theme-on-error: 255,255,255; + --v-theme-on-info: 255,255,255; + --v-theme-on-success: 255,255,255; + --v-theme-on-warning: 255,255,255; + --v-border-color: 0, 0, 0; + --v-border-opacity: 0.12; + --v-high-emphasis-opacity: 0.87; + --v-medium-emphasis-opacity: 0.6; + --v-disabled-opacity: 0.38; + --v-idle-opacity: 0.04; + --v-hover-opacity: 0.04; + --v-focus-opacity: 0.12; + --v-selected-opacity: 0.08; + --v-activated-opacity: 0.12; + --v-pressed-opacity: 0.12; + --v-dragged-opacity: 0.08; + --v-theme-kbd: 33, 37, 41; + --v-theme-on-kbd: 255, 255, 255; + --v-theme-code: 245, 245, 245; + --v-theme-on-code: 0, 0, 0; + } + .v-theme--light { + color-scheme: normal; + --v-theme-background: 255,255,255; + --v-theme-background-overlay-multiplier: 1; + --v-theme-surface: 255,255,255; + --v-theme-surface-overlay-multiplier: 1; + --v-theme-surface-bright: 255,255,255; + --v-theme-surface-bright-overlay-multiplier: 1; + --v-theme-surface-light: 238,238,238; + --v-theme-surface-light-overlay-multiplier: 1; + --v-theme-surface-variant: 66,66,66; + --v-theme-surface-variant-overlay-multiplier: 2; + --v-theme-on-surface-variant: 238,238,238; + --v-theme-primary: 24,103,192; + --v-theme-primary-overlay-multiplier: 2; + --v-theme-primary-darken-1: 31,85,146; + --v-theme-primary-darken-1-overlay-multiplier: 2; + --v-theme-secondary: 72,169,166; + --v-theme-secondary-overlay-multiplier: 1; + --v-theme-secondary-darken-1: 1,135,134; + --v-theme-secondary-darken-1-overlay-multiplier: 1; + --v-theme-error: 176,0,32; + --v-theme-error-overlay-multiplier: 2; + --v-theme-info: 33,150,243; + --v-theme-info-overlay-multiplier: 1; + --v-theme-success: 76,175,80; + --v-theme-success-overlay-multiplier: 1; + --v-theme-warning: 251,140,0; + --v-theme-warning-overlay-multiplier: 1; + --v-theme-on-background: 0,0,0; + --v-theme-on-surface: 0,0,0; + --v-theme-on-surface-bright: 0,0,0; + --v-theme-on-surface-light: 0,0,0; + --v-theme-on-primary: 255,255,255; + --v-theme-on-primary-darken-1: 255,255,255; + --v-theme-on-secondary: 255,255,255; + --v-theme-on-secondary-darken-1: 255,255,255; + --v-theme-on-error: 255,255,255; + --v-theme-on-info: 255,255,255; + --v-theme-on-success: 255,255,255; + --v-theme-on-warning: 255,255,255; + --v-border-color: 0, 0, 0; + --v-border-opacity: 0.12; + --v-high-emphasis-opacity: 0.87; + --v-medium-emphasis-opacity: 0.6; + --v-disabled-opacity: 0.38; + --v-idle-opacity: 0.04; + --v-hover-opacity: 0.04; + --v-focus-opacity: 0.12; + --v-selected-opacity: 0.08; + --v-activated-opacity: 0.12; + --v-pressed-opacity: 0.12; + --v-dragged-opacity: 0.08; + --v-theme-kbd: 33, 37, 41; + --v-theme-on-kbd: 255, 255, 255; + --v-theme-code: 245, 245, 245; + --v-theme-on-code: 0, 0, 0; + } + .v-theme--dark { + color-scheme: dark; + --v-theme-background: 18,18,18; + --v-theme-background-overlay-multiplier: 1; + --v-theme-surface: 33,33,33; + --v-theme-surface-overlay-multiplier: 1; + --v-theme-surface-bright: 204,191,214; + --v-theme-surface-bright-overlay-multiplier: 2; + --v-theme-surface-light: 66,66,66; + --v-theme-surface-light-overlay-multiplier: 1; + --v-theme-surface-variant: 163,163,163; + --v-theme-surface-variant-overlay-multiplier: 2; + --v-theme-on-surface-variant: 66,66,66; + --v-theme-primary: 33,150,243; + --v-theme-primary-overlay-multiplier: 2; + --v-theme-primary-darken-1: 39,124,193; + --v-theme-primary-darken-1-overlay-multiplier: 2; + --v-theme-secondary: 84,182,178; + --v-theme-secondary-overlay-multiplier: 2; + --v-theme-secondary-darken-1: 72,169,166; + --v-theme-secondary-darken-1-overlay-multiplier: 2; + --v-theme-error: 207,102,121; + --v-theme-error-overlay-multiplier: 2; + --v-theme-info: 33,150,243; + --v-theme-info-overlay-multiplier: 2; + --v-theme-success: 76,175,80; + --v-theme-success-overlay-multiplier: 2; + --v-theme-warning: 251,140,0; + --v-theme-warning-overlay-multiplier: 2; + --v-theme-on-background: 255,255,255; + --v-theme-on-surface: 255,255,255; + --v-theme-on-surface-bright: 0,0,0; + --v-theme-on-surface-light: 255,255,255; + --v-theme-on-primary: 255,255,255; + --v-theme-on-primary-darken-1: 255,255,255; + --v-theme-on-secondary: 255,255,255; + --v-theme-on-secondary-darken-1: 255,255,255; + --v-theme-on-error: 255,255,255; + --v-theme-on-info: 255,255,255; + --v-theme-on-success: 255,255,255; + --v-theme-on-warning: 255,255,255; + --v-border-color: 255, 255, 255; + --v-border-opacity: 0.12; + --v-high-emphasis-opacity: 1; + --v-medium-emphasis-opacity: 0.7; + --v-disabled-opacity: 0.5; + --v-idle-opacity: 0.1; + --v-hover-opacity: 0.04; + --v-focus-opacity: 0.12; + --v-selected-opacity: 0.08; + --v-activated-opacity: 0.12; + --v-pressed-opacity: 0.16; + --v-dragged-opacity: 0.08; + --v-theme-kbd: 33, 37, 41; + --v-theme-on-kbd: 255, 255, 255; + --v-theme-code: 52, 52, 52; + --v-theme-on-code: 204, 204, 204; + } + .bg-background { + --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier); + background-color: rgb(var(--v-theme-background)); + color: rgb(var(--v-theme-on-background)); + } + .bg-surface { + --v-theme-overlay-multiplier: var(--v-theme-surface-overlay-multiplier); + background-color: rgb(var(--v-theme-surface)); + color: rgb(var(--v-theme-on-surface)); + } + .bg-surface-bright { + --v-theme-overlay-multiplier: var(--v-theme-surface-bright-overlay-multiplier); + background-color: rgb(var(--v-theme-surface-bright)); + color: rgb(var(--v-theme-on-surface-bright)); + } + .bg-surface-light { + --v-theme-overlay-multiplier: var(--v-theme-surface-light-overlay-multiplier); + background-color: rgb(var(--v-theme-surface-light)); + color: rgb(var(--v-theme-on-surface-light)); + } + .bg-surface-variant { + --v-theme-overlay-multiplier: var(--v-theme-surface-variant-overlay-multiplier); + background-color: rgb(var(--v-theme-surface-variant)); + color: rgb(var(--v-theme-on-surface-variant)); + } + .bg-primary { + --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier); + background-color: rgb(var(--v-theme-primary)); + color: rgb(var(--v-theme-on-primary)); + } + .bg-primary-darken-1 { + --v-theme-overlay-multiplier: var(--v-theme-primary-darken-1-overlay-multiplier); + background-color: rgb(var(--v-theme-primary-darken-1)); + color: rgb(var(--v-theme-on-primary-darken-1)); + } + .bg-secondary { + --v-theme-overlay-multiplier: var(--v-theme-secondary-overlay-multiplier); + background-color: rgb(var(--v-theme-secondary)); + color: rgb(var(--v-theme-on-secondary)); + } + .bg-secondary-darken-1 { + --v-theme-overlay-multiplier: var(--v-theme-secondary-darken-1-overlay-multiplier); + background-color: rgb(var(--v-theme-secondary-darken-1)); + color: rgb(var(--v-theme-on-secondary-darken-1)); + } + .bg-error { + --v-theme-overlay-multiplier: var(--v-theme-error-overlay-multiplier); + background-color: rgb(var(--v-theme-error)); + color: rgb(var(--v-theme-on-error)); + } + .bg-info { + --v-theme-overlay-multiplier: var(--v-theme-info-overlay-multiplier); + background-color: rgb(var(--v-theme-info)); + color: rgb(var(--v-theme-on-info)); + } + .bg-success { + --v-theme-overlay-multiplier: var(--v-theme-success-overlay-multiplier); + background-color: rgb(var(--v-theme-success)); + color: rgb(var(--v-theme-on-success)); + } + .bg-warning { + --v-theme-overlay-multiplier: var(--v-theme-warning-overlay-multiplier); + background-color: rgb(var(--v-theme-warning)); + color: rgb(var(--v-theme-on-warning)); + } + .text-background { + color: rgb(var(--v-theme-background)); + } + .border-background { + --v-border-color: var(--v-theme-background); + } + .text-surface { + color: rgb(var(--v-theme-surface)); + } + .border-surface { + --v-border-color: var(--v-theme-surface); + } + .text-surface-bright { + color: rgb(var(--v-theme-surface-bright)); + } + .border-surface-bright { + --v-border-color: var(--v-theme-surface-bright); + } + .text-surface-light { + color: rgb(var(--v-theme-surface-light)); + } + .border-surface-light { + --v-border-color: var(--v-theme-surface-light); + } + .text-surface-variant { + color: rgb(var(--v-theme-surface-variant)); + } + .border-surface-variant { + --v-border-color: var(--v-theme-surface-variant); + } + .on-surface-variant { + color: rgb(var(--v-theme-on-surface-variant)); + } + .text-primary { + color: rgb(var(--v-theme-primary)); + } + .border-primary { + --v-border-color: var(--v-theme-primary); + } + .text-primary-darken-1 { + color: rgb(var(--v-theme-primary-darken-1)); + } + .border-primary-darken-1 { + --v-border-color: var(--v-theme-primary-darken-1); + } + .text-secondary { + color: rgb(var(--v-theme-secondary)); + } + .border-secondary { + --v-border-color: var(--v-theme-secondary); + } + .text-secondary-darken-1 { + color: rgb(var(--v-theme-secondary-darken-1)); + } + .border-secondary-darken-1 { + --v-border-color: var(--v-theme-secondary-darken-1); + } + .text-error { + color: rgb(var(--v-theme-error)); + } + .border-error { + --v-border-color: var(--v-theme-error); + } + .text-info { + color: rgb(var(--v-theme-info)); + } + .border-info { + --v-border-color: var(--v-theme-info); + } + .text-success { + color: rgb(var(--v-theme-success)); + } + .border-success { + --v-border-color: var(--v-theme-success); + } + .text-warning { + color: rgb(var(--v-theme-warning)); + } + .border-warning { + --v-border-color: var(--v-theme-warning); + } + .on-background { + color: rgb(var(--v-theme-on-background)); + } + .on-surface { + color: rgb(var(--v-theme-on-surface)); + } + .on-surface-bright { + color: rgb(var(--v-theme-on-surface-bright)); + } + .on-surface-light { + color: rgb(var(--v-theme-on-surface-light)); + } + .on-primary { + color: rgb(var(--v-theme-on-primary)); + } + .on-primary-darken-1 { + color: rgb(var(--v-theme-on-primary-darken-1)); + } + .on-secondary { + color: rgb(var(--v-theme-on-secondary)); + } + .on-secondary-darken-1 { + color: rgb(var(--v-theme-on-secondary-darken-1)); + } + .on-error { + color: rgb(var(--v-theme-on-error)); + } + .on-info { + color: rgb(var(--v-theme-on-info)); + } + .on-success { + color: rgb(var(--v-theme-on-success)); + } + .on-warning { + color: rgb(var(--v-theme-on-warning)); + } +} `; diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts index a261035cd33..fcdaa6aee3f 100644 --- a/packages/vuetify/src/composables/theme.ts +++ b/packages/vuetify/src/composables/theme.ts @@ -274,21 +274,21 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install: const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors))) for (const key of colors) { if (/^on-[a-z]/.test(key)) { - createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]) + createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key}))`]) } else { createCssClass(bgLines, `.bg-${key}`, [ `--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, - `background-color: rgb(var(--v-theme-${key})) !important`, - `color: rgb(var(--v-theme-on-${key})) !important`, + `background-color: rgb(var(--v-theme-${key}))`, + `color: rgb(var(--v-theme-on-${key}))`, ]) - createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]) + createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key}))`]) createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]) } } lines.push(...bgLines, ...fgLines) - return lines.map((str, i) => i === 0 ? str : ` ${str}`).join('') + return '@layer vuetify.theme {\n' + lines.map(v => ` ${v}`).join('') + '\n}' }) function getHead () { diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass b/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass index 28bd5523d70..1764230d2d1 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass @@ -17,7 +17,6 @@ border-inline-end: $calendar-line-width solid $calendar-line-color .v-calendar-weekly__day - flex: 1 width: 0 overflow: hidden user-select: none @@ -47,7 +46,9 @@ .v-btn font-size: $calendar-weekly-day-label-font-size - text-transform: none !important + + @include tools.layer('overrides') + text-transform: none &.v-calendar-weekly__day-label__today background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity)) diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass index 568e9233a50..34ed9d126de 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass +++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass @@ -15,4 +15,5 @@ --prepend-width: #{$treeview-group-list-prepend-width} .v-list-group__items .v-list-item - padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important + @include tools.layer('overrides') + padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) diff --git a/packages/vuetify/src/styles/elements/_global.sass b/packages/vuetify/src/styles/elements/_global.sass index 0cfac6df552..1076dea6767 100644 --- a/packages/vuetify/src/styles/elements/_global.sass +++ b/packages/vuetify/src/styles/elements/_global.sass @@ -13,7 +13,7 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0) html.overflow-y-hidden - overflow-y: hidden !important + overflow-y: hidden :root --v-theme-overlay-multiplier: 1 diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss index 55f884fb79d..930e780be3b 100644 --- a/packages/vuetify/src/styles/generic/_colors.scss +++ b/packages/vuetify/src/styles/generic/_colors.scss @@ -6,19 +6,19 @@ @mixin background-color($color_value) { & { - background-color: $color_value !important; + background-color: $color_value; } } @mixin text-color($color_value) { & { - color: $color_value !important; + color: $color_value; } } @mixin background-text-color($color_name, $color_type) { $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type); & { - color: $map_value !important; + color: $map_value; } } diff --git a/packages/vuetify/src/styles/generic/_layers.scss b/packages/vuetify/src/styles/generic/_layers.scss index aabefdf8f1c..40e977edf30 100644 --- a/packages/vuetify/src/styles/generic/_layers.scss +++ b/packages/vuetify/src/styles/generic/_layers.scss @@ -2,6 +2,18 @@ @if (settings.$layers) { @layer vuetify { - @layer reset, transitions, base, components, overrides, colors, theme, utilities; + @layer reset, base, components, transitions; + + // Use to override styles in other components + // This replaces hacks like .v-btn.v-btn and most of !important + @layer overrides; + + @layer colors, theme, utilities; + + // Only use for rules that need to override theme or utils + @layer trumps; + + // Don't use, this is for consumers + @layer custom; } } diff --git a/packages/vuetify/src/styles/generic/_transitions.scss b/packages/vuetify/src/styles/generic/_transitions.scss index 88659677c02..519fae18bd8 100644 --- a/packages/vuetify/src/styles/generic/_transitions.scss +++ b/packages/vuetify/src/styles/generic/_transitions.scss @@ -3,19 +3,19 @@ @mixin transition-default() { &-enter-active { - transition-duration: settings.$transition-duration-root !important; - transition-timing-function: settings.$standard-easing !important; + transition-duration: settings.$transition-duration-root; + transition-timing-function: settings.$standard-easing; } &-leave-active { - transition-duration: settings.$transition-duration-root !important; - transition-timing-function: settings.$standard-easing !important; + transition-duration: settings.$transition-duration-root; + transition-timing-function: settings.$standard-easing; } &-move { - transition-duration: settings.$transition-move-duration-root !important; - transition-property: transform !important; - transition-timing-function: settings.$standard-easing !important; + transition-duration: settings.$transition-move-duration-root; + transition-property: transform; + transition-timing-function: settings.$standard-easing; } } @mixin fade-out() { @@ -23,7 +23,7 @@ opacity: 0; } &-leave-active { - transition-duration: 100ms !important; + transition-duration: 100ms; } } @@ -33,18 +33,18 @@ .dialog-bottom-transition, .dialog-top-transition { &-enter-active { - transition-duration: 225ms !important; - transition-timing-function: settings.$decelerated-easing !important; + transition-duration: 225ms; + transition-timing-function: settings.$decelerated-easing; } &-leave-active { - transition-duration: 125ms !important; - transition-timing-function: settings.$accelerated-easing !important; + transition-duration: 125ms; + transition-timing-function: settings.$accelerated-easing; } &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; pointer-events: none; } } @@ -84,12 +84,12 @@ &-leave-from, &-leave-active, &-leave-to { - position: absolute !important; + position: absolute; } &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -123,7 +123,7 @@ &-enter-active, &-leave-active { - transition-property: height !important; + transition-property: height; } } @@ -132,7 +132,7 @@ &-enter-active, &-leave-active { - transition-property: width !important; + transition-property: width; } } @@ -147,7 +147,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -162,7 +162,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -177,7 +177,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -195,7 +195,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -209,7 +209,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -223,7 +223,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -244,7 +244,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -265,7 +265,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -286,7 +286,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -307,7 +307,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -321,7 +321,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -335,7 +335,7 @@ &-enter-active, &-leave-active { - transition-property: transform, opacity !important; + transition-property: transform, opacity; } } @@ -343,12 +343,12 @@ @include transition-default(); &-enter-from, &-leave-to { - opacity: 0 !important; + opacity: 0; } &-enter-active, &-leave-active { - transition-property: opacity !important; + transition-property: opacity; } } @@ -361,7 +361,7 @@ &-enter-active, &-leave-active { - transition-property: transform !important; + transition-property: transform; } } } diff --git a/packages/vuetify/src/styles/settings/_utilities.scss b/packages/vuetify/src/styles/settings/_utilities.scss index dc4ce44386f..ff93a1bd6e9 100644 --- a/packages/vuetify/src/styles/settings/_utilities.scss +++ b/packages/vuetify/src/styles/settings/_utilities.scss @@ -506,11 +506,6 @@ $utilities: () !default; text-transform ), class: text, - unimportant: ( - font-family, - font-weight, - line-height - ), values: variables.$flat-typography ), "text-transform": ( diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss index 615e71b0e77..7ceb1300543 100644 --- a/packages/vuetify/src/styles/settings/_variables.scss +++ b/packages/vuetify/src/styles/settings/_variables.scss @@ -5,7 +5,7 @@ $color-pack: true !default; $reset: true !default; -$layers: false !default; +$layers: true !default; $body-font-family: 'Roboto', sans-serif !default; $font-size-root: 1rem !default; @@ -341,7 +341,6 @@ $decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering $accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving // Elements -$bootable-transition: 0.2s $decelerated-easing !default; $blockquote-font-size: 18px !default; $blockquote-font-weight: 300 !default; diff --git a/packages/vuetify/src/styles/tools/_bootable.sass b/packages/vuetify/src/styles/tools/_bootable.sass deleted file mode 100644 index 8d9808fca5c..00000000000 --- a/packages/vuetify/src/styles/tools/_bootable.sass +++ /dev/null @@ -1,3 +0,0 @@ -@mixin bootable() - &:not([data-booted="true"]) - transition: none !important diff --git a/packages/vuetify/src/styles/tools/_border.sass b/packages/vuetify/src/styles/tools/_border.sass index 045c74eac39..7c9f9b6179d 100644 --- a/packages/vuetify/src/styles/tools/_border.sass +++ b/packages/vuetify/src/styles/tools/_border.sass @@ -1,8 +1,8 @@ -@mixin border($color: null, $style: null, $width: null, $thin-width: false, $important: false) +@mixin border($color: null, $style: null, $width: null, $thin-width: false) & - border-color: $color if($important, !important, null) - border-style: $style if($important, !important, null) - border-width: $width if($important, !important, null) + border-color: $color + border-style: $style + border-width: $width @if $thin-width &--border diff --git a/packages/vuetify/src/styles/tools/_display.sass b/packages/vuetify/src/styles/tools/_display.sass index 25377a5d9e1..352eefd8ce5 100644 --- a/packages/vuetify/src/styles/tools/_display.sass +++ b/packages/vuetify/src/styles/tools/_display.sass @@ -1,16 +1,6 @@ @use './functions' as * @use '../settings' as * -@mixin visually-hidden - & - position: absolute !important - height: 1px - width: 1px - overflow: hidden - clip: rect(1px, 1px, 1px, 1px) - white-space: nowrap - display: initial - =media-breakpoint-up($name, $breakpoints: $grid-breakpoints) $min: breakpoint-min($name, $breakpoints) @if $min diff --git a/packages/vuetify/src/styles/tools/_elevation.sass b/packages/vuetify/src/styles/tools/_elevation.sass index 61e7e192449..ef4c35afed1 100644 --- a/packages/vuetify/src/styles/tools/_elevation.sass +++ b/packages/vuetify/src/styles/tools/_elevation.sass @@ -1,9 +1,9 @@ @use 'sass:map' @use '../settings' -@mixin elevation($z, $important: false) +@mixin elevation($z) & - box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null) + box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) @mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1)) & diff --git a/packages/vuetify/src/styles/tools/_index.sass b/packages/vuetify/src/styles/tools/_index.sass index 843402e8ed4..d1107183f7a 100644 --- a/packages/vuetify/src/styles/tools/_index.sass +++ b/packages/vuetify/src/styles/tools/_index.sass @@ -1,12 +1,10 @@ @forward '_absolute' @forward '_functions' -@forward '_bootable' @forward '_border' @forward '_density' @forward '_elevation' @forward '_layer' @forward '_position' -@forward '_radius' @forward '_rounded' @forward '_rtl' @forward '_states' diff --git a/packages/vuetify/src/styles/tools/_layer.scss b/packages/vuetify/src/styles/tools/_layer.scss index 74fb238a5dc..57a51cc6900 100644 --- a/packages/vuetify/src/styles/tools/_layer.scss +++ b/packages/vuetify/src/styles/tools/_layer.scss @@ -2,8 +2,10 @@ @mixin layer ($name) { @if (settings.$layers) { - @layer vuetify.#{$name} { - @content; + @at-root (without: layer) { + @layer vuetify.#{$name} { + @content; + } } } @else { @content; diff --git a/packages/vuetify/src/styles/tools/_position.sass b/packages/vuetify/src/styles/tools/_position.sass index 1e961365c1b..99640847aab 100644 --- a/packages/vuetify/src/styles/tools/_position.sass +++ b/packages/vuetify/src/styles/tools/_position.sass @@ -1,4 +1,4 @@ -@mixin position($positions, $important: false) +@mixin position($positions) @each $position in $positions &--#{$position} - position: #{$position} if($important, !important, null) + position: #{$position} diff --git a/packages/vuetify/src/styles/tools/_radius.sass b/packages/vuetify/src/styles/tools/_radius.sass deleted file mode 100644 index 2f0bba08b1d..00000000000 --- a/packages/vuetify/src/styles/tools/_radius.sass +++ /dev/null @@ -1,10 +0,0 @@ -@use 'sass:map' -@use '../settings' - -@mixin radius($r, $important: false) - & - // Key exists within the $rounded variable - @if (map.has-key(settings.$rounded, $r)) - border-radius: map.get(settings.$rounded, $r) if($important, !important, null) - @else - border-radius: $r if($important, !important, null) diff --git a/packages/vuetify/src/styles/tools/_rounded.sass b/packages/vuetify/src/styles/tools/_rounded.sass index 84256a0cf11..4e6fe915088 100644 --- a/packages/vuetify/src/styles/tools/_rounded.sass +++ b/packages/vuetify/src/styles/tools/_rounded.sass @@ -1,3 +1,3 @@ -@mixin rounded($radius: null, $important: false) +@mixin rounded($radius: null) & - border-radius: $radius if($important, !important, null) + border-radius: $radius diff --git a/packages/vuetify/src/styles/tools/_utilities.sass b/packages/vuetify/src/styles/tools/_utilities.sass index d25bbc4b025..71386e09d59 100644 --- a/packages/vuetify/src/styles/tools/_utilities.sass +++ b/packages/vuetify/src/styles/tools/_utilities.sass @@ -57,8 +57,4 @@ @if meta.type-of($value) == 'list' and list.length($properties) == list.length($value) $val: list.nth($value, $i) @if $val != false - // Check if unimportant property exists. - // This allows you to conditional skip - // defining a property as important. - $unimportant: map.get($utility, unimportant) - #{$property}: #{meta.inspect($val) if(list.index($unimportant, $property), null, !important)} + #{$property}: #{meta.inspect($val)} diff --git a/packages/vuetify/src/styles/utilities/_elevation.scss b/packages/vuetify/src/styles/utilities/_elevation.scss index 3e72d408e2a..12889ac16a5 100644 --- a/packages/vuetify/src/styles/utilities/_elevation.scss +++ b/packages/vuetify/src/styles/utilities/_elevation.scss @@ -7,7 +7,7 @@ $z: 24; @while $z >= 0 { .elevation-#{$z} { - @include tools.elevation($z, $important: true); + @include tools.elevation($z); } $z: $z - 1; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74443a8e156..5ac0003440f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ overrides: '@testing-library/dom': npm:@vuetify/testing-library-dom@1.0.2 '@types/node': 22.5.4 tough-cookie: 5.0.0-rc.4 + rrweb-cssom: 0.8.0 pnpmfileChecksum: hdycaw5dzspbcs5sui7ue3czcu @@ -7654,11 +7655,8 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true - rrweb-cssom@0.6.0: - resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} - - rrweb-cssom@0.7.1: - resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==} + rrweb-cssom@0.8.0: + resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==} run-applescript@7.0.0: resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==} @@ -13744,7 +13742,7 @@ snapshots: cssstyle@4.0.1: dependencies: - rrweb-cssom: 0.6.0 + rrweb-cssom: 0.8.0 csstype@3.1.3: {} @@ -15963,7 +15961,7 @@ snapshots: is-potential-custom-element-name: 1.0.1 nwsapi: 2.2.12 parse5: 7.1.2 - rrweb-cssom: 0.7.1 + rrweb-cssom: 0.8.0 saxes: 6.0.0 symbol-tree: 3.2.4 tough-cookie: 5.0.0-rc.4 @@ -17909,9 +17907,7 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.21.2 fsevents: 2.3.3 - rrweb-cssom@0.6.0: {} - - rrweb-cssom@0.7.1: {} + rrweb-cssom@0.8.0: {} run-applescript@7.0.0: {}