fix(sass): Do not use legacy global functions

mlaursen · mlaursen · commit 6159e161af72 · 2021-11-01T18:08:46.000-06:00
diff --git a/packages/alert/src/_variables.scss b/packages/alert/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group alert
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/transition/dist/variables';
 @import '~@react-md/theme/dist/color-palette';
 @import '~@react-md/theme/dist/variables';
@@ -44,7 +46,7 @@ $rmd-toast-light-color: $rmd-white-base !default;
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-toast-dark-elevation-background-color: map-get(
+$rmd-toast-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-toast-elevation
 ) !default;
diff --git a/packages/card/src/_variables.scss b/packages/card/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group card
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/divider/dist/functions';
 @import '~@react-md/divider/dist/variables';
 @import '~@react-md/theme/dist/functions';
@@ -23,7 +25,7 @@ $rmd-card-light-background-color: rmd-theme-var(surface) !default;
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-card-dark-elevation-background-color: map-get(
+$rmd-card-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-card-elevation
 );
diff --git a/packages/chip/src/_variables.scss b/packages/chip/src/_variables.scss
@@ -2,6 +2,9 @@
 /// @group chip
 ////
 
+@use 'sass:color';
+@use 'sass:map';
+
 @import '~@react-md/states/dist/variables';
 @import '~@react-md/transition/dist/variables';
 @import '~@react-md/theme/dist/functions';
@@ -70,7 +73,7 @@ $rmd-chip-themed-background-color: rmd-theme-get-swatch(
   $rmd-theme-primary,
   300,
   false,
-  darken($rmd-theme-primary, 20%),
+  color.adjust($rmd-theme-primary, $lightness: -20%),
   rmd-chip-themed-background-color
 ) !default;
 
@@ -121,7 +124,7 @@ $rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;
 /// @type Color
 $rmd-chip-solid-dark-background-color: if(
   $rmd-theme-dark-elevation,
-  map-get($rmd-theme-dark-elevation-colors, 12),
+  map.get($rmd-theme-dark-elevation-colors, 12),
   $rmd-grey-900
 ) !default;
 
@@ -142,9 +145,9 @@ $rmd-chip-solid-dark-color: if(
 ///
 /// @require $rmd-grey-900
 /// @type Color
-$rmd-chip-solid-dark-disabled-background-color: lighten(
+$rmd-chip-solid-dark-disabled-background-color: color.adjust(
   $rmd-grey-900,
-  2%
+  $lightness: 2%
 ) !default;
 
 /// The background color to use for "solid" themed chips.
@@ -206,7 +209,7 @@ $rmd-chip-outline-light-color: if(
 /// @type Color
 $rmd-chip-outline-dark-background-color: if(
   $rmd-theme-dark-elevation,
-  map-get($rmd-theme-dark-elevation-colors, 8),
+  map.get($rmd-theme-dark-elevation-colors, 8),
   $rmd-theme-dark-surface
 ) !default;
 
diff --git a/packages/dev-utils/src/utils/styles/variable.ts b/packages/dev-utils/src/utils/styles/variable.ts
@@ -189,8 +189,7 @@ export function getCompiledValue(
     return { name, value: originalValue };
   }
 
-  const data = `@use 'sass:meta';
-${getEverythingScss()}
+  const data = `${getEverythingScss()}
 
 .output {
   --value: #{meta.inspect(${originalValue})};
diff --git a/packages/dialog/src/_variables.scss b/packages/dialog/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group dialog
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/overlay/dist/variables';
 @import '~@react-md/theme/dist/variables';
 @import '~@react-md/theme/dist/functions';
@@ -27,7 +29,7 @@ $rmd-dialog-light-background-color: rmd-theme-var(surface) !default;
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-dialog-dark-elevation-background-color: map-get(
+$rmd-dialog-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-dialog-elevation
 ) !default;
diff --git a/packages/documentation/src/components/CodeBlock/CodeBlock.module.scss b/packages/documentation/src/components/CodeBlock/CodeBlock.module.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'react-md' as *;
 @use './solarized';
 
@@ -78,7 +79,7 @@
 
       &.important,
       &.bold {
-        font-weight: map-get($rmd-typography-font-weights, bold);
+        font-weight: map.get($rmd-typography-font-weights, bold);
       }
 
       &.italic {
diff --git a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss
@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use 'react-md' as *;
 
 .container {
   color: $rmd-black-base;
   display: flex;
-  font-weight: map-get($rmd-typography-font-weights, bold);
+  font-weight: map.get($rmd-typography-font-weights, bold);
   justify-content: space-between;
   padding: 1rem;
 }
diff --git a/packages/documentation/src/components/Demos/DemoDescription.module.scss b/packages/documentation/src/components/Demos/DemoDescription.module.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'react-md' as *;
 
 .container {
@@ -9,7 +10,7 @@
   }
 
   strong {
-    font-weight: map-get($rmd-typography-font-weights, bold);
+    font-weight: map.get($rmd-typography-font-weights, bold);
   }
 
   em {
diff --git a/packages/documentation/src/components/Home/Logo.module.scss b/packages/documentation/src/components/Home/Logo.module.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'react-md' as *;
 
 .primary {
@@ -14,6 +15,6 @@
     transform: translateX(0.7em);
   }
 
-  font-weight: map-get($rmd-typography-font-weights, bold);
+  font-weight: map.get($rmd-typography-font-weights, bold);
   transform: translateX(-0.8em);
 }
diff --git a/packages/elevation/src/_functions.scss b/packages/elevation/src/_functions.scss
@@ -2,6 +2,8 @@
 /// @group elevation
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/theme/dist/functions';
 @import './variables';
 
@@ -40,19 +42,19 @@
   }
 
   $color: rmd-theme($color);
-  $shadow-1-value: map-get($rmd-elevation-shadow-1-map, $z-value);
+  $shadow-1-value: map.get($rmd-elevation-shadow-1-map, $z-value);
   $shadow-1-color: rgba(
     $color,
     $rmd-elevation-shadow-1-opacity + $opacity-boost
   );
 
-  $shadow-2-value: map-get($rmd-elevation-shadow-2-map, $z-value);
+  $shadow-2-value: map.get($rmd-elevation-shadow-2-map, $z-value);
   $shadow-2-color: rgba(
     $color,
     $rmd-elevation-shadow-2-opacity + $opacity-boost
   );
 
-  $shadow-3-value: map-get($rmd-elevation-shadow-3-map, $z-value);
+  $shadow-3-value: map.get($rmd-elevation-shadow-3-map, $z-value);
   $shadow-3-color: rgba(
     $color,
     $rmd-elevation-shadow-3-opacity + $opacity-boost
diff --git a/packages/form/src/_variables.scss b/packages/form/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group form
 ////
 
+@use 'sass:color';
+
 @import '~@react-md/theme/dist/color-palette';
 @import '~@react-md/theme/dist/helpers';
 @import '~@react-md/theme/dist/functions';
@@ -27,7 +29,7 @@ $rmd-form-error-hover-color: rmd-theme-get-swatch(
   $rmd-form-error-color,
   700,
   true,
-  darken($rmd-form-error-color, 10%),
+  color.adjust($rmd-form-error-color, $lightness: -10%),
   rmd-form-error-color
 ) !default;
 
diff --git a/packages/form/src/select/_variables.scss b/packages/form/src/select/_variables.scss
@@ -2,6 +2,8 @@
 /// @group form-select
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/theme/dist/color-palette';
 @import '~@react-md/theme/dist/functions';
 @import '~@react-md/utils/dist/variables';
@@ -36,7 +38,7 @@ $rmd-listbox-light-background-color: rmd-theme-var(surface) !default;
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-listbox-dark-elevation-background-color: map-get(
+$rmd-listbox-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-listbox-elevation
 ) !default;
diff --git a/packages/form/src/toggle/_mixins.scss b/packages/form/src/toggle/_mixins.scss
@@ -2,6 +2,8 @@
 /// @group form-toggle
 ////
 
+@use 'sass:color';
+
 @import '~@react-md/button/dist/mixins';
 @import '~@react-md/icon/dist/mixins';
 @import '~@react-md/menu/dist/mixins';
@@ -336,7 +338,7 @@
   &::after {
     @include rmd-elevation(1);
 
-    background-color: darken($rmd-white-base, 5%);
+    background-color: color.adjust($rmd-white-base, $lightness: -5%);
     border-radius: inherit;
     content: '';
     height: $rmd-switch-ball-size;
diff --git a/packages/form/src/toggle/_variables.scss b/packages/form/src/toggle/_variables.scss
@@ -2,6 +2,9 @@
 /// @group form-toggle
 ////
 
+@use 'sass:map';
+@use 'sass:color';
+
 @import '~@react-md/theme/dist/color-palette';
 @import '~@react-md/theme/dist/functions';
 
@@ -97,7 +100,7 @@ $rmd-switch-track-width: 2.25rem !default;
 /// @type Color
 $rmd-switch-track-background-color: if(
   $rmd-theme-dark-elevation,
-  map-get($rmd-theme-dark-elevation-colors, 24),
+  map.get($rmd-theme-dark-elevation-colors, 24),
   rgba($rmd-black-base, 0.38)
 ) !default;
 
@@ -139,7 +142,7 @@ $rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
   $rmd-theme-secondary,
   200,
   false,
-  darken($rmd-theme-secondary, 5%),
+  color.adjust($rmd-theme-secondary, $lightness: -5%),
   rmd-switch-ball-disabled-color
 ) !default;
 
diff --git a/packages/icon/src/_material-icons.scss b/packages/icon/src/_material-icons.scss
@@ -2,6 +2,8 @@
 /// @group icon
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/typography/dist/variables';
 @import './mixins';
 
@@ -61,13 +63,13 @@
   @font-face {
     font-family: $font-family;
     font-style: normal;
-    font-weight: map-get($rmd-typography-font-weights, normal);
+    font-weight: map.get($rmd-typography-font-weights, normal);
 
     @if $old-ie-support {
       @if $font-map == null {
         src: url($font-url + '.eot');
       } @else {
-        src: #{map-get($font-map, eot)};
+        src: #{map.get($font-map, eot)};
       }
     }
 
@@ -79,9 +81,9 @@
           url($font-url + '.ttf')
           format('truetype');
     } @else {
-      $woff2: map-get($font-url-or-map, woff2);
-      $woff: map-get($font-url-or-map, woff);
-      $truetype: map-get($font-url-or-map, truetype);
+      $woff2: map.get($font-url-or-map, woff2);
+      $woff: map.get($font-url-or-map, woff);
+      $truetype: map.get($font-url-or-map, truetype);
 
       $src: local($font-family), local($font-name);
       $src: "local(#{$font-family}), local(#{$font-name}), #{$woff2} format('woff2'), #{$woff} format('woff'), #{$truetype} format('truetype')";
diff --git a/packages/media/src/_mixins.scss b/packages/media/src/_mixins.scss
@@ -27,7 +27,7 @@
 /// @param {Number} width - The width to enforce for the responsive media
 /// @param {Number} height - The height to enforce for the responsive media
 @mixin rmd-media-aspect-ratio($width, $height) {
-  padding-bottom: percentage(math.div($height, $width));
+  padding-bottom: math.percentage(math.div($height, $width));
 }
 
 /// Creates the styles for a media container that should enforce a specific
diff --git a/packages/media/src/_variables.scss b/packages/media/src/_variables.scss
@@ -23,7 +23,7 @@ $rmd-media-selectors: (img '>svg' iframe video embed object) !default;
 /// enforced.
 ///
 /// @type Number
-$rmd-media-default-aspect-ratio: percentage(math.div(9, 16)) !default;
+$rmd-media-default-aspect-ratio: math.percentage(math.div(9, 16)) !default;
 
 /// A Map including the default aspect ratios to create for responsive media
 /// with a forced aspect ratio. Each key must be a string for a class name
diff --git a/packages/menu/src/_variables.scss b/packages/menu/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group menu
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/theme/dist/mixins';
 @import '~@react-md/list/dist/functions';
 @import '~@react-md/utils/dist/variables';
@@ -25,7 +27,7 @@ $rmd-menu-light-background-color: rmd-theme-var(surface) !default;
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-menu-dark-elevation-background-color: map-get(
+$rmd-menu-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-menu-elevation
 ) !default;
diff --git a/packages/sheet/src/_variables.scss b/packages/sheet/src/_variables.scss
@@ -2,6 +2,8 @@
 /// @group sheet
 ////
 
+@use 'sass:map';
+
 @import '~@react-md/dialog/dist/variables';
 @import '~@react-md/overlay/dist/variables';
 @import '~@react-md/transition/dist/variables';
@@ -61,7 +63,7 @@ $rmd-sheet-light-background-color: rmd-dialog-theme-var(
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-sheet-dark-elevation-background-color: map-get(
+$rmd-sheet-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-sheet-elevation
 ) !default;
@@ -115,7 +117,7 @@ $rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
 /// @require $rmd-theme-dark-elevation-colors
 /// @type Color
 /// @since 2.7.0
-$rmd-sheet-raised-dark-elevation-background-color: map-get(
+$rmd-sheet-raised-dark-elevation-background-color: map.get(
   $rmd-theme-dark-elevation-colors,
   $rmd-sheet-raised-elevation
 ) !default;
diff --git a/packages/theme/src/_color-a11y.scss b/packages/theme/src/_color-a11y.scss
diff --git a/packages/theme/src/_functions.scss b/packages/theme/src/_functions.scss
diff --git a/packages/theme/src/_variables.scss b/packages/theme/src/_variables.scss
diff --git a/packages/transition/src/_mixins.scss b/packages/transition/src/_mixins.scss
diff --git a/packages/typography/src/_mixins.scss b/packages/typography/src/_mixins.scss
diff --git a/packages/typography/src/_variables.scss b/packages/typography/src/_variables.scss
diff --git a/packages/utils/src/_functions.scss b/packages/utils/src/_functions.scss
diff --git a/packages/utils/src/_mixins.scss b/packages/utils/src/_mixins.scss

Original file line number	Diff line number	Diff line change
`@@ -189,8 +189,7 @@ export function getCompiledValue(`
`189`	`189`	`return { name, value: originalValue };`
`190`	`190`	`}`
`191`	`191`
`192`		- const data = `@use 'sass:meta';
`193`		`-${getEverythingScss()}`
	`192`	+ const data = `${getEverythingScss()}
`194`	`193`
`195`	`194`	`.output {`
`196`	`195`	`--value: #{meta.inspect(${originalValue})};`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@use 'sass:map';`
`1`	`2`	`@use 'react-md' as *;`
`2`	`3`
`3`	`4`	`.container {`
`@@ -9,7 +10,7 @@`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`strong {`
`12`		`- font-weight: map-get($rmd-typography-font-weights, bold);`
	`13`	`+ font-weight: map.get($rmd-typography-font-weights, bold);`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`em {`