Ran the SASS migration tool on division so deprecation warnings stop …

…being thrown. (#1107) (#1110)

Co-authored-by: Jarrett Lusso <jclusso@gmail.com>

core/bourbon/library/_modular-scale.scss

@@ -67,6 +67,8 @@
 ///
 /// @require {function} _fetch-bourbon-setting
 
+@use "sass:math";
+
 @function modular-scale(
   $increment,
   $value: _fetch-bourbon-setting("modular-scale-base"),
@@ -78,7 +80,7 @@
 
   // scale $v2 to just above $v1
   @while $v2 > $v1 {
-    $v2: ($v2 / $ratio); // will be off-by-1
+    $v2: math.div($v2, $ratio); // will be off-by-1
   }
   @while $v2 < $v1 {
     $v2: ($v2 * $ratio); // will fix off-by-1
@@ -102,15 +104,15 @@
   @if $increment < 0 {
     // adjust $v2 to just below $v1
     @if $double-stranded {
-      $v2: ($v2 / $ratio);
+      $v2: math.div($v2, $ratio);
     }
 
     @for $i from $increment through -1 {
-      @if $double-stranded and ($v1 / $ratio) < $v2 {
+      @if $double-stranded and math.div($v1, $ratio) < $v2 {
         $value: $v2;
-        $v2: ($v2 / $ratio);
+        $v2: math.div($v2, $ratio);
       } @else {
-        $v1: ($v1 / $ratio);
+        $v1: math.div($v1, $ratio);
         $value: $v1;
       }
     }

core/bourbon/library/_strip-unit.scss

@@ -12,6 +12,8 @@
 ///   // Output
 ///   $dimension: 10;
 
+@use "sass:math";
+
 @function strip-unit($value) {
-  @return ($value / ($value * 0 + 1));
+  @return math.div($value, $value * 0 + 1);
 }

core/bourbon/library/_triangle.scss

@@ -55,25 +55,25 @@
 
     @if $direction == "up" {
       border-color: transparent transparent $color;
-      border-width: 0 ($width / 2) $height;
+      border-width: 0 ($width * 0.5) $height;
     } @else if $direction == "up-right" {
       border-color: transparent $color transparent transparent;
       border-width: 0 $width $width 0;
     } @else if $direction == "right" {
       border-color: transparent transparent transparent $color;
-      border-width: ($height / 2) 0 ($height / 2) $width;
+      border-width: ($height * 0.5) 0 ($height * 0.5) $width;
     } @else if $direction == "down-right" {
       border-color: transparent transparent $color;
       border-width: 0 0 $width $width;
     } @else if $direction == "down" {
       border-color: $color transparent transparent;
-      border-width: $height ($width / 2) 0;
+      border-width: $height ($width * 0.5) 0;
     } @else if $direction == "down-left" {
       border-color: transparent transparent transparent $color;
       border-width: $width 0 0 $width;
     } @else if $direction == "left" {
       border-color: transparent $color transparent transparent;
-      border-width: ($height / 2) $width ($height / 2) 0;
+      border-width: ($height * 0.5) $width ($height * 0.5) 0;
     } @else if $direction == "up-left" {
       border-color: $color transparent transparent;
       border-width: $width $width 0 0;

core/bourbon/utilities/_contrast-ratio.scss

@@ -19,13 +19,15 @@
 ///
 /// @access private
 
+@use "sass:math";
+
 @function _contrast-ratio($color-1, $color-2) {
   $-local-lightness-1: _lightness($color-1) + 0.05;
   $-local-lightness-2: _lightness($color-2) + 0.05;
 
   @if $-local-lightness-1 > $-local-lightness-2 {
-    @return $-local-lightness-1 / $-local-lightness-2;
+    @return math.div($-local-lightness-1, $-local-lightness-2);
   } @else {
-    @return $-local-lightness-2 / $-local-lightness-1;
+    @return math.div($-local-lightness-2, $-local-lightness-1);
   }
 }

core/bourbon/utilities/_gamma.scss

@@ -10,11 +10,13 @@
 ///
 /// @access private
 
+@use "sass:math";
+
 @function _gamma($channel) {
   @if $channel < 0.03928 {
-    @return $channel / 12.92;
+    @return math.div($channel, 12.92);
   } @else {
-    $c: ($channel + 0.055) / 1.055;
+    $c: math.div($channel + 0.055, 1.055);
     @if function-exists("pow") {
       @return pow($c, 2.4);
     } @else {

core/bourbon/utilities/_lightness.scss

@@ -11,14 +11,16 @@
 ///
 /// @access private
 
+@use "sass:math";
+
 @function _lightness($hex-color) {
   $-local-red-raw: red(rgba($hex-color, 1));
   $-local-green-raw: green(rgba($hex-color, 1));
   $-local-blue-raw: blue(rgba($hex-color, 1));
 
-  $-local-red: _gamma($-local-red-raw / 255);
-  $-local-green: _gamma($-local-green-raw / 255);
-  $-local-blue: _gamma($-local-blue-raw / 255);
+  $-local-red: _gamma(math.div($-local-red-raw, 255));
+  $-local-green: _gamma(math.div($-local-green-raw, 255));
+  $-local-blue: _gamma(math.div($-local-blue-raw, 255));
 
   @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722;
 }