From 1d7fb6c87b17f6a5e0364e851cd7998ff6cadc82 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Tue, 15 Feb 2022 18:36:10 -0600
Subject: [PATCH] Migrate SASS to use new math.div function

---
 assets/css/components/_player-finder.scss            |  8 +++++---
 assets/css/elements/_forms.scss                      |  8 +++++---
 assets/css/settings/_global.scss                     |  4 ++--
 assets/css/vendor/_family.scss                       |  2 +-
 .../bourbon/bourbon/library/_modular-scale.scss      | 12 +++++++-----
 .../vendor/bourbon/bourbon/library/_strip-unit.scss  |  4 +++-
 .../vendor/bourbon/bourbon/library/_triangle.scss    |  8 ++++----
 .../bourbon/bourbon/utilities/_contrast-ratio.scss   |  6 ++++--
 .../css/vendor/bourbon/bourbon/utilities/_gamma.scss |  8 +++++---
 .../vendor/bourbon/bourbon/utilities/_lightness.scss |  8 +++++---
 10 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/assets/css/components/_player-finder.scss b/assets/css/components/_player-finder.scss
index 6cbb103..b0233ae 100644
--- a/assets/css/components/_player-finder.scss
+++ b/assets/css/components/_player-finder.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .opponent-finder__result {
   border-bottom: 1px dotted $black;
   border-bottom-left-radius: $base-border-radius;
@@ -5,14 +7,14 @@
   border-left: 1px dotted $black;
   border-right: 1px dotted $black;
   margin-top: -$small-spacing;
-  padding: $small-spacing / 3;
+  padding: math.div($small-spacing, 3);
 }
 
 .opponent-finder__result-item {
-  border-radius: $base-border-radius / 2;
+  border-radius: $base-border-radius * 0.5;
   cursor: pointer;
   display: block;
-  padding: $small-spacing / 3 $base-spacing / 2;
+  padding: math.div($small-spacing, 3) $base-spacing * 0.5;
   text-decoration: none;
 
   &:hover,
diff --git a/assets/css/elements/_forms.scss b/assets/css/elements/_forms.scss
index 9b7a8cd..38a2413 100644
--- a/assets/css/elements/_forms.scss
+++ b/assets/css/elements/_forms.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $_form-background-color: $background-color;
 
 fieldset {
@@ -9,14 +11,14 @@ fieldset {
 
 legend {
   font-weight: $heavy-font-weight;
-  margin-bottom: $small-spacing / 2;
+  margin-bottom: $small-spacing * 0.5;
   padding: 0;
 }
 
 label {
   display: block;
   font-weight: $heavy-font-weight;
-  margin-bottom: $small-spacing / 2;
+  margin-bottom: $small-spacing * 0.5;
 }
 
 input,
@@ -35,7 +37,7 @@ textarea {
   box-sizing: border-box;
   color: $foreground-color;
   margin-bottom: $small-spacing;
-  padding: $base-spacing / 3;
+  padding: math.div($base-spacing, 3);
   transition: border-color $base-duration $base-timing;
   width: 100%;
 
diff --git a/assets/css/settings/_global.scss b/assets/css/settings/_global.scss
index fe53f63..907271a 100644
--- a/assets/css/settings/_global.scss
+++ b/assets/css/settings/_global.scss
@@ -1,7 +1,7 @@
 $base-border-radius: 0.5rem;
 $base-spacing: 2rem;
-$small-spacing: $base-spacing / 2;
-$x-small-spacing: $small-spacing / 2;
+$small-spacing: $base-spacing * 0.5;
+$x-small-spacing: $small-spacing * 0.5;
 $base-z-index: 0;
 
 $container-width: 90%;
diff --git a/assets/css/vendor/_family.scss b/assets/css/vendor/_family.scss
index f5f65d6..91053f6 100644
--- a/assets/css/vendor/_family.scss
+++ b/assets/css/vendor/_family.scss
@@ -130,7 +130,7 @@
 /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
 /// @param {number} $num - id of the child
 @mixin middle($num) {
-  &:nth-child(#{round($num / 2)}) {
+  &:nth-child(#{round($num * 0.5)}) {
     @content;
   }
 }
diff --git a/assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss b/assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss
index 7a011f1..cec7e10 100644
--- a/assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss
+++ b/assets/css/vendor/bourbon/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;
       }
     }
diff --git a/assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss b/assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss
index f4f660a..b0e260d 100644
--- a/assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss
+++ b/assets/css/vendor/bourbon/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);
 }
diff --git a/assets/css/vendor/bourbon/bourbon/library/_triangle.scss b/assets/css/vendor/bourbon/bourbon/library/_triangle.scss
index 2ba96b5..ae3f528 100644
--- a/assets/css/vendor/bourbon/bourbon/library/_triangle.scss
+++ b/assets/css/vendor/bourbon/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;
diff --git a/assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss b/assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss
index 1ba65ce..55d38d5 100644
--- a/assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss
+++ b/assets/css/vendor/bourbon/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);
   }
 }
diff --git a/assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss b/assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss
index 2314f5a..95b0080 100644
--- a/assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss
+++ b/assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss
@@ -11,11 +11,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;
-    @return (133 * $c * $c * $c + 155 * $c * $c) / 288;
+    $c: math.div($channel + 0.055, 1.055);
+    @return math.div(133 * $c * $c * $c + 155 * $c * $c, 288);
   }
 }
diff --git a/assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss b/assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss
index a292904..998a29c 100644
--- a/assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss
+++ b/assets/css/vendor/bourbon/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;
 }