fix(sass): use math.div instead of division since it's deprecated

Author: mlaursen

packages/app-bar/src/_variables.scss

@@ -48,7 +48,7 @@ $rmd-app-bar-keyline: 1rem !default;
 /// @require $rmd-button-icon-size
 /// @type Number
 $rmd-app-bar-nav-margin: $rmd-app-bar-keyline -
-  (($rmd-button-icon-size - $rmd-icon-size) / 2);
+  (($rmd-button-icon-size - $rmd-icon-size) * 0.5);
 
 /// The keyline for the `AppBarTitle` to use when used with the `AppBarNav` or
 /// the `offset` prop is enabled.

packages/form/src/toggle/_variables.scss

@@ -128,7 +128,7 @@ $rmd-switch-container-vertical-padding: 0.5rem !default;
 /// enough so that the ball does not overlap the label or other elements.
 ///
 /// @type Number
-$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size / 2 !default;
+$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size * 0.5 !default;
 
 /// The color to use for the switch's ball when it is toggled on and disabled.
 ///

packages/media/src/_mixins.scss

@@ -2,6 +2,8 @@
 /// @group media
 ////
 
+@use "sass:math";
+
 @import '~@react-md/theme/dist/mixins';
 @import '~@react-md/utils/dist/functions';
 @import './variables';
@@ -25,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($height / $width);
+  padding-bottom: percentage(math.div($height, $width));
 }
 
 /// Creates the styles for a media container that should enforce a specific

packages/media/src/_variables.scss

@@ -2,6 +2,8 @@
 /// @group media
 ////
 
+@use "sass:math";
+
 @import '~@react-md/theme/dist/color-palette';
 
 /// The background color for a media overlay.
@@ -21,7 +23,7 @@ $rmd-media-selectors: (img '>svg' iframe video embed object) !default;
 /// enforced.
 ///
 /// @type Number
-$rmd-media-default-aspect-ratio: percentage(9 / 16) !default;
+$rmd-media-default-aspect-ratio: 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

packages/progress/src/_variables.scss

@@ -242,7 +242,7 @@ $rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default;
 /// The ending dashoffset for the ciruclar progress animation. This will be used
 /// for the `50%` value in the animation keyframes by default.
 /// @type Number
-$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray / 4 !default;
+$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray * 0.25 !default;
 
 /// The circular progress styles to apply for the rotation transition. Each key
 /// in this map will be set immediately at the root of the `keyframes` and then

packages/theme/src/_color-a11y.scss

@@ -2,6 +2,8 @@
 /// @group theme
 ////
 
+@use "sass:math";
+
 @import './color-palette';
 
 /// This is the default contrast ratio to use for color accessibility between
@@ -190,8 +192,10 @@ $rmd-theme-linear-channel-values: (
   $back-luminance: rmd-theme-luminance($back) + 0.05;
   $front-luminance: rmd-theme-luminance($front) + 0.05;
 
-  @return max($back-luminance, $front-luminance) /
-    min($back-luminance, $front-luminance);
+  @return math.div(
+    max($back-luminance, $front-luminance),
+    min($back-luminance, $front-luminance)
+  );
 }
 
 /// Determines if a provided color is considered light or dark.

packages/typography/src/_variables.scss

@@ -2,6 +2,8 @@
 /// @group typography
 ////
 
+@use "sass:math";
+
 /// Gets the global variable value for a provided typography style name. This
 /// assumes that the global variable exists already.
 ///
@@ -76,7 +78,7 @@
 /// @param {Number} font-size - The font size to use
 /// @return {Number} the letter spacing value in em
 @function rmd-typography-get-letter-spacing($tracking, $font-size) {
-  @return $tracking / ($font-size * 16) * 1em;
+  @return math.div($tracking, $font-size * 16) * 1em;
 }
 
 /// The font family to use throughout the entire application.