fix: switch to math.div

Switch to using math.div in SASS fix #629
mdn · May 24, 2021 · 44e86a7 · 44e86a7
1 parent 1417ce0
commit 44e86a7
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 30 deletions.
diff --git a/sass/atoms/_blockquote.scss b/sass/atoms/_blockquote.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 blockquote {
   @include blockquote();
   font-family: $heading-font-family;
@@ -10,11 +12,11 @@ blockquote {
     content: "";
     display: block;
     height: 5px;
-    margin-bottom: ($base-spacing / 2);
+    margin-bottom: math.div($base-spacing, 2);
   }
 
   &::after {
-    margin-top: ($base-spacing / 2);
+    margin-top: math.div($base-spacing, 2);
   }
 
   /*

diff --git a/sass/atoms/_buttons.scss b/sass/atoms/_buttons.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .button,
 a.button {
   @include button-state();
@@ -96,7 +98,7 @@ a.minimal {
   font-size: $small-font-size;
   font-weight: normal;
   min-height: inherit;
-  padding: ($base-unit / 2) $base-unit;
+  padding: math.div($base-unit, 2) $base-unit;
 
   @media #{$mq-tablet-and-up} {
     padding: 0 $base-unit;

diff --git a/sass/atoms/_code.scss b/sass/atoms/_code.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 code {
   background-color: $neutral-550;
   box-decoration-break: clone;
   font-family: $code-inline-font-family;
-  padding: 0 ($base-unit / 2);
+  padding: 0 math.div($base-unit, 2);
   word-wrap: break-word;
 }
 

diff --git a/sass/atoms/_examples.scss b/sass/atoms/_examples.scss
@@ -1,8 +1,10 @@
+@use "sass:math";
+
 .sample-code-frame {
   border: $thin-primary-border;
   border-left: $code-example-border;
   margin: 0;
-  margin-bottom: ($base-spacing / 2);
-  padding: ($base-spacing / 2);
+  margin-bottom: math.div($base-spacing, 2);
+  padding: math.div($base-spacing, 2);
   width: 100%;
 }
diff --git a/sass/atoms/_icons.scss b/sass/atoms/_icons.scss
@@ -1,11 +1,13 @@
+@use "sass:math";
+
 .icon {
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 21px;
   content: "";
   display: inline-block;
   height: 21px;
-  margin-right: $base-spacing / 4;
+  margin-right: math.div($base-spacing, 4);
   vertical-align: sub;
   width: 21px;
 }
@@ -14,7 +16,7 @@ h2,
 h3,
 h4 {
   .icon {
-    margin-left: $base-spacing / 4;
+    margin-left: math.div($base-spacing, 4);
     vertical-align: middle;
   }
 }

diff --git a/sass/atoms/_kbd.scss b/sass/atoms/_kbd.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
 kbd {
   background: $light-gray-gradient;
@@ -9,8 +11,8 @@ kbd {
   font-size: $small-font-size;
   font-weight: bold;
   line-height: 1;
-  margin: $base-unit / 2;
-  padding: ($base-spacing / 6) ($base-spacing / 4);
+  margin: math.div($base-unit, 2);
+  padding: math.div($base-spacing, 6) math.div($base-spacing, 4);
   white-space: nowrap;
 }
 
@@ -20,6 +22,6 @@ kbd {
  */
 table {
   kbd {
-    margin: $base-spacing / 4;
+    margin: math.div($base-spacing, 4);
   }
 }
diff --git a/sass/atoms/_links.scss b/sass/atoms/_links.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 a {
   color: $link-color;
   text-decoration: none;
@@ -19,7 +21,7 @@ a {
       content: "";
       display: inline-block;
       height: 16px;
-      margin-left: $base-spacing / 8;
+      margin-left: math.div($base-spacing, 8);
       width: 16px;
     }
   }

diff --git a/sass/atoms/_meta.scss b/sass/atoms/_meta.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+
 /* General Badges */
 .badge {
   background-color: $neutral-575;
   border-radius: 6px;
-  margin-right: $base-spacing / 4;
-  padding: 0 $base-spacing / 4;
+  margin-right: math.div($base-spacing, 4);
+  padding: 0 math.div($base-spacing, 4);
 
   a {
     color: $neutral-100;

diff --git a/sass/atoms/_tables.scss b/sass/atoms/_tables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 table {
   font-size: $small-font-size;
   overflow-x: auto;
@@ -10,13 +12,13 @@ table {
     @include heading-5();
     @include headings-common-base();
     font-weight: bold;
-    margin-bottom: $base-spacing / 2;
+    margin-bottom: math.div($base-spacing, 2);
   }
 
   th,
   td {
     border: 1px solid $neutral-500;
-    padding: $base-spacing / 2;
+    padding: math.div($base-spacing, 2);
     text-align: left;
   }
 
@@ -57,7 +59,7 @@ table,
     border: 0;
     border-top: $standard-primary-border;
     display: block;
-    padding: ($base-spacing / 2);
+    padding: math.div($base-spacing, 2);
     vertical-align: top;
 
     @media #{$mq-small-desktop-and-up} {
@@ -87,7 +89,7 @@ table,
   td {
     border: 0;
     border-left: $standard-light-border;
-    padding: ($base-spacing / 2);
+    padding: math.div($base-spacing, 2);
   }
 
   th {

diff --git a/sass/shared-variables.module.scss b/sass/shared-variables.module.scss
@@ -1,4 +1,5 @@
 @import "./vars/color-palette";
+@import "./vars/color-gradients";
 
 :export {
   primary100: $primary-100;

diff --git a/sass/vars/_borders.scss b/sass/vars/_borders.scss
@@ -1,5 +1,7 @@
-$standard-light-border: ($base-unit / 3) solid $neutral-600;
-$standard-primary-border: ($base-unit / 3) solid $primary-50;
+@use "sass:math";
+
+$standard-light-border: math.div($base-unit, 3) solid $neutral-600;
+$standard-primary-border: math.div($base-unit, 3) solid $primary-50;
 
 $thin-primary-border: 1px solid $primary-200;
 

diff --git a/sass/vars/_layout.scss b/sass/vars/_layout.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $browser-default-font-size: 16px;
 $base-unit: 6px;
 
@@ -6,21 +8,21 @@ $medium-spacing: $base-spacing * 2;
 $large-spacing: $medium-spacing * 2;
 
 $base-section-spacing: ($base-spacing * 2) $base-spacing;
-$base-section-spacing-mobile: ($base-spacing / 2) $base-spacing;
+$base-section-spacing-mobile: math.div($base-spacing, 2) $base-spacing;
 $content-block-margin: $base-spacing;
 
 $max-width-default: 1400px;
-$max-width-small-desktop: (1023px / $browser-default-font-size) * 1em;
+$max-width-small-desktop: math.div(1023px, $browser-default-font-size) * 1em;
 
-$small-mobile-ends: (479px / $browser-default-font-size) * 1em;
+$small-mobile-ends: math.div(479px, $browser-default-font-size) * 1em;
 $mobile-starts: $small-mobile-ends + 0.001em;
-$mobile-ends: (767px / $browser-default-font-size) * 1em;
+$mobile-ends: math.div(767px, $browser-default-font-size) * 1em;
 
 $tablet-starts: $mobile-ends + 0.001em;
-$tablet-ends: (1023px / $browser-default-font-size) * 1em;
+$tablet-ends: math.div(1023px, $browser-default-font-size) * 1em;
 
 $small-desktop-starts: $tablet-ends + 0.001em;
-$small-desktop-ends: (1199px / $browser-default-font-size) * 1em;
+$small-desktop-ends: math.div(1199px, $browser-default-font-size) * 1em;
 
 /*
  * media queries

diff --git a/styleguide/assets/molecules/_toc.scss b/styleguide/assets/molecules/_toc.scss
@@ -1,14 +1,16 @@
+@use "sass:math";
+
 .toc {
-  bottom: $base-spacing / 2;
+  bottom: math.div($base-spacing, 2);
   max-height: 95vh;
   overflow: scroll;
   position: sticky;
-  top: $base-spacing / 2;
+  top: math.div($base-spacing, 2);
 
   nav > ul {
     list-style: none;
     margin: 0;
     padding: 0;
-    padding-left: $base-spacing / 2;
+    padding-left: math.div($base-spacing, 2);
   }
 }
diff --git a/styleguide/assets/organisms/_footer.scss b/styleguide/assets/organisms/_footer.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .page-footer-logo {
   margin-bottom: $base-spacing;
 
@@ -45,7 +47,7 @@
     }
 
     ul {
-      padding-inline-start: $base-spacing / 4;
+      padding-inline-start: math.div($base-spacing, 4);
     }
 
     svg {