chore(styles): migrate foundation sass away from deprecated APIs

Author: cmath10

m3-foundation/assets/stylesheets/basics/layout.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $m3-screen-medium: 600px;
 $m3-screen-expanded: 840px;
 $m3-screen-large: 1200px;
@@ -20,16 +22,16 @@ $screen-max: (
 );
 
 @function get-screen-min ($keyOrValue) {
-  @if map-has-key($screen-min, $keyOrValue) {
-    @return map-get($screen-min, $keyOrValue);
+  @if map.has-key($screen-min, $keyOrValue) {
+    @return map.get($screen-min, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }
 }
 
 @function get-screen-max ($keyOrValue) {
-  @if map-has-key($screen-max, $keyOrValue) {
-    @return map-get($screen-max, $keyOrValue);
+  @if map.has-key($screen-max, $keyOrValue) {
+    @return map.get($screen-max, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }

m3-foundation/assets/stylesheets/basics/motion.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 // Duration
 
 // Short durations
@@ -50,8 +52,8 @@ $m3-sys-motion-duration-map: (
 );
 
 @function duration($type) {
-  @if map-has-key($m3-sys-motion-duration-map, $type) {
-    @return map-get($m3-sys-motion-duration-map, $type);
+  @if map.has-key($m3-sys-motion-duration-map, $type) {
+    @return map.get($m3-sys-motion-duration-map, $type);
   } @else {
     @warn "Unknown duration `#{$type}`.";
     @return null;
@@ -80,8 +82,8 @@ $m3-sys-motion-easing-map: (
 );
 
 @function easing($key) {
-  @if map-has-key($m3-sys-motion-easing-map, $key) {
-    @return map-get($m3-sys-motion-easing-map, $key);
+  @if map.has-key($m3-sys-motion-easing-map, $key) {
+    @return map.get($m3-sys-motion-easing-map, $key);
   } @else {
     @warn "Unknown key `#{$key}` in easing map.";
     @return null;
@@ -114,4 +116,4 @@ $m3-sys-motion-easing-map: (
 
 @function timing-standard-decelerate($property, $duration: 'medium1') {
   @return #{$property} + ' ' + #{timing($duration, 'standard-decelerate')}
-}
+}

m3-foundation/assets/stylesheets/basics/shape.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $m3-sys-shape-corner-extra-small: 4px;
 $m3-sys-shape-corner-small: 8px;
 $m3-sys-shape-corner-medium: 12px;
@@ -11,8 +13,8 @@ $m3-sys-shape-corner-map: (
 );
 
 @function get-corner($keyOrValue) {
-  @if map-has-key($m3-sys-shape-corner-map, $keyOrValue) {
-    @return map-get($m3-sys-shape-corner-map, $keyOrValue);
+  @if map.has-key($m3-sys-shape-corner-map, $keyOrValue) {
+    @return map.get($m3-sys-shape-corner-map, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }
@@ -62,4 +64,4 @@ $m3-sys-shape-corner-map: (
   *::after {
     box-sizing: border-box;
   }
-}
+}

m3-foundation/assets/stylesheets/components/index.scss

@@ -1,22 +1,22 @@
-@import 'badge';
-@import 'button';
-@import 'card';
-@import 'checkbox';
-@import 'dialog';
-@import 'fab-button';
-@import 'icon';
-@import 'icon-button';
-@import 'menu';
-@import 'navigation';
-@import 'plane-tooltip';
-@import 'popper';
-@import 'rich-tooltip';
-@import 'ripple';
-@import 'scrim';
-@import 'scroll-box';
-@import 'scroll-rail';
-@import 'select';
-@import 'side-sheet';
-@import 'slider';
-@import 'switch';
-@import 'text-field';
+@use 'badge';
+@use 'button';
+@use 'card';
+@use 'checkbox';
+@use 'dialog';
+@use 'fab-button';
+@use 'icon';
+@use 'icon-button';
+@use 'menu';
+@use 'navigation';
+@use 'plane-tooltip';
+@use 'popper';
+@use 'rich-tooltip';
+@use 'ripple';
+@use 'scrim';
+@use 'scroll-box';
+@use 'scroll-rail';
+@use 'select';
+@use 'side-sheet';
+@use 'slider';
+@use 'switch';
+@use 'text-field';

m3-foundation/assets/stylesheets/components/navigation/index.scss

@@ -3,7 +3,7 @@
 @use '../../basics/shape' as m3-shape;
 @use '../../basics/typography' as m3-typography;
 
-@import './variables';
+@use './variables' as *;
 
 @mixin m3-navigation-drawer {
   width: $m3-navigation-drawer-width;
@@ -372,4 +372,4 @@
   @include m3-layout.screen-from('large') {
     padding-left: $m3-navigation-drawer-width;
   }
-}
+}

m3-foundation/assets/stylesheets/components/scrim/index.scss

@@ -1,4 +1,4 @@
-@import "../../basics/palette";
+@use '../../basics/palette' as *;
 
 .m3-scrim {
   display: flex;
@@ -9,4 +9,4 @@
   position: fixed;
   left: 0;
   top: 0;
-}
+}

m3-foundation/assets/stylesheets/components/text-field/index.scss

@@ -1,7 +1,7 @@
 @use '../../basics/motion' as m3-motion;
 @use '../../basics/typography' as m3-typography;
 
-@import './variables.scss';
+@use './variables' as *;
 
 .m3-text-field {
   display: inline-flex;
@@ -335,4 +335,4 @@
 @keyframes m3-text-field-outlined-label-slide-out {
   0%   { transform: translate3d(0, -28px, 0); }
   100% { transform: translate3d(0, 0, 0); }
-}
+}

m3-foundation/assets/stylesheets/index.scss

@@ -1,5 +1,5 @@
-@import 'animation';
-@import 'transitions';
-@import 'layout';
-@import 'themes';
-@import 'components';
+@use 'animation';
+@use 'transitions';
+@use 'layout';
+@use 'themes';
+@use 'components';

m3-foundation/assets/stylesheets/themes/dark.scss

@@ -1,4 +1,4 @@
-@import "../basics/palette";
+@use '../basics/palette' as *;
 
 // Primary
 $m3-sys-dark-primary:           $m3-palette-primary-80;
@@ -94,4 +94,4 @@ $m3-elevation-dark-5: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0,
   --m3-elevation-3: #{$m3-elevation-dark-3};
   --m3-elevation-4: #{$m3-elevation-dark-4};
   --m3-elevation-5: #{$m3-elevation-dark-5};
-}
+}

m3-foundation/assets/stylesheets/themes/index.scss

@@ -1,5 +1,5 @@
-@import 'dark';
-@import 'light';
+@use 'dark' as *;
+@use 'light' as *;
 
 :root {
   @include m3-theme-light;
@@ -13,4 +13,4 @@
 .m3-theme-dark,
 .m3-theme-dark:root {
   @include m3-theme-dark;
-}
+}