fix(styles): explicitly import global functions

package.json

@@ -70,8 +70,8 @@
     "mkdirp": "^3.0.1",
     "moment": "^2.30.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.77.8",
-    "sass-embedded": "^1.77.8",
+    "sass": "^1.80.1",
+    "sass-embedded": "^1.80.1",
     "semver": "^7.6.0",
     "shelljs": "^0.8.5",
     "stringify-object": "^5.0.0",

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -90,10 +90,10 @@ app.use(vuetify)
 
 ### SASS variables
 
-- `$headings` was merged with `$typography`: Access font-size of subtitle-2 with `map-get($typography, 'subtitle-2', 'size')`
+- `$headings` was merged with `$typography`: Access font-size of subtitle-2 with `map.get($typography, 'subtitle-2', 'size')`
 - If you imported variables from `~vuetify/src/styles/settings/_variables` in v2, you have to replace it with `vuetify/settings`
 - Component variables that previously lived in e.g. `~/vuetify/src/components/VIcon/VIcon.sass` can now be imported from `vuetify/settings` directly too.
-- `$display-breakpoints` no longer includes `{breakpoint}-only` variables (e.g. xs-only), use `@media #{map-get(v.$display-breakpoints, 'xs')}` instead.
+- `$display-breakpoints` no longer includes `{breakpoint}-only` variables (e.g. xs-only), use `@media #{map.get(v.$display-breakpoints, 'xs')}` instead.
 - The `$transition` map has been removed, replaced with individual `$standard-easing`, `$decelerated-easing`, `$accelerated-easing` variables.
 - `$container-padding-x` is now 16px instead of 12px as in v2. You can replace it with `$spacer * 3` to get to the previous look.
 - Too many component variables to list have been renamed or removed. There is no automated way to update these as the element structure has changed significantly, you will need to manually update these along with any custom styles.

packages/vuetify/build/rollup.config.mjs

@@ -68,6 +68,7 @@ export default [
       sass({
         options: {
           charset: false,
+          silenceDeprecations: ['legacy-js-api'],
         },
         output (styles, styleNodes) {
           // Complete CSS bundle
@@ -203,6 +204,7 @@ export default [
       sass({
         options: {
           charset: false,
+          silenceDeprecations: ['legacy-js-api'],
         },
         output (styles, styleNodes) {
           mkdirp(path.resolve(root, 'dist')).then(() => {

packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass

@@ -1,3 +1,4 @@
+@use 'sass:map'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
@@ -36,5 +37,5 @@
     &.v-bottom-sheet--inset
       max-width: none
 
-      @media #{map-get(settings.$display-breakpoints, 'sm-and-up')}
+      @media #{map.get(settings.$display-breakpoints, 'sm-and-up')}
         max-width: $bottom-sheet-inset-width

packages/vuetify/src/components/VField/_variables.scss

@@ -1,10 +1,11 @@
 @forward '../VInput/variables';
+@use 'sass:map';
 @use '../../styles/settings';
 @use '../VInput/variables' as *;
 
 // INPUT
 $field-border-radius: settings.$border-radius-root !default;
-$field-rounded-border-radius: map-get(settings.$rounded, 'xl') !default;
+$field-rounded-border-radius: map.get(settings.$rounded, 'xl') !default;
 $field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $field-error-color: rgb(var(--v-theme-error)) !default;

packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.sass

@@ -1,17 +1,18 @@
-@import './_variables.scss'
+@use 'sass:map'
+@use './variables' as *
 
 // Theme
 @include theme(v-overflow-btn) using ($material)
   &#{&} > .v-input__control > .v-input__slot
-    border-color: map-get($material, 'dividers')
+    border-color: map.get($material, 'dividers')
 
   &:not(.v-input--is-focused):not(.v-input--has-state)
     > .v-input__control > .v-input__slot:hover
-      background: map-get($material, 'cards')
+      background: map.get($material, 'cards')
 
   &.v-overflow-btn--segmented
     .v-input__append-inner
-      border-left: thin solid map-get($material, 'dividers')
+      border-left: thin solid map.get($material, 'dividers')
 
 
 .v-autocomplete__content.v-menu__content
@@ -49,7 +50,7 @@
     margin-inline-start: $overflow-selection-comma-margin-x
 
   .v-input__slot
-    transition: .3s map-get($transition, 'swing')
+    transition: .3s map.get($transition, 'swing')
 
     &::before,
     &::after

packages/vuetify/src/components/VProgressLinear/_variables.scss

@@ -1,10 +1,11 @@
+@use 'sass:map';
 @use '../../styles/settings';
 
 // VProgressLinear
 $progress-linear-background: currentColor !default;
 $progress-linear-background-background: $progress-linear-background !default;
 $progress-linear-background-opacity: var(--v-border-opacity) !default;
-$progress-linear-border-radius: map-get(settings.$rounded, 'pill') !default;
+$progress-linear-border-radius: map.get(settings.$rounded, 'pill') !default;
 $progress-linear-stream-opacity: 0.3 !default;
 $progress-linear-stripe-background-size: 40px 40px !default;
 $progress-linear-stream-border-width: 4px !default;

packages/vuetify/src/components/VTable/_mixins.scss

@@ -11,10 +11,10 @@
           > tfoot {
             > tr {
               > th {
-                height: map-get($properties, header)
+                height: map.get($properties, header)
               }
               > td {
-                height: map-get($properties, row)
+                height: map.get($properties, row)
               }
             }
           }

packages/vuetify/src/components/VTabs/VTabs.sass

@@ -47,7 +47,7 @@
     .v-tab:last-child
       margin-inline-end: 0
 
-  @media #{map-get(settings.$display-breakpoints, 'md-and-down')}
+  @media #{map.get(settings.$display-breakpoints, 'md-and-down')}
     .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
       .v-tab:first-child
         margin-inline-start: 52px