Merge pull request #2465 from HyphaApp/maintenance/sass-slash-for-division-fix

Using / for division is deprecated and will be removed in Dart Sass 2.0.0

hypha/static_src/src/sass/apply/abstracts/_functions.scss

+@use 'sass:math';
+
 // Strip the unit from the given value and return the value
 @function strip-unit($value) {
-    @return $value / ($value * 0 + 1);
+    @return math.div($value, ($value * 0 + 1));
 }
 
 // Return an em unit based on the pixel value and context
 @function rem($px, $context: $base-font-size) {
-    @return #{strip-unit($px / strip-unit($context))}rem;
+    @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
 }
 
 // Returns the opposite direction of each direction in a list

hypha/static_src/src/sass/apply/abstracts/_mixins.scss

+@use 'sass:math';
+
 // Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
@@ -120,17 +122,17 @@
 @mixin responsive-font-sizes($min, $max) {
 
     $vw-context: (1260 * .1) * 1px;
-    $responsive: ($max / $vw-context) * 10vw;
+    $responsive: math.div($max, $vw-context) * 10vw;
 
-    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+    $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
     $dimension: if(unit($responsive) == 'vh', 'height', 'width');
-    $min-breakpoint: $min / $responsive-unitless * 100;
+    $min-breakpoint: math.div($min, $responsive-unitless) * 100;
 
     @media (max-#{$dimension}: #{$min-breakpoint}) {
         font-size: $min;
     }
 
-    $max-breakpoint: $max / $responsive-unitless * 100;
+    $max-breakpoint: math.div($max, $responsive-unitless) * 100;
 
     @media (min-#{$dimension}: #{$max-breakpoint}) {
         font-size: $max;

hypha/static_src/src/sass/apply/base/_typography.scss

+@use 'sass:math';
+
 // $TYPOGRAPHY
 // Base font
 html {
-    font-size: ($base-font-size / 16px) * 100%;
-    line-height: $base-line-height / $base-font-size;
+    font-size: math.div($base-font-size, 16px) * 100%;
+    line-height: math.div($base-line-height, $base-font-size);
     color: $color--default;
 }
 

hypha/static_src/src/sass/apply/components/_form.scss

+@use 'sass:math';
+
 .form {
     $root: &;
 
@@ -418,7 +420,7 @@
         padding: .4em;
         margin-bottom: 1em;
         border: 1px solid $color--mid-grey;
-        line-height: $base-line-height / $base-font-size;
+        line-height: math.div($base-line-height, $base-font-size);
 
         @include media-query(tablet-portrait) {
             max-width: 70%;

hypha/static_src/src/sass/public/abstracts/_functions.scss

+@use 'sass:math';
+
 // Strip the unit from the given value and return the value
 @function strip-unit($value) {
-    @return $value / ($value * 0 + 1);
+    @return math.div($value, ($value * 0 + 1));
 }
 
 // Return an em unit based on the pixel value and context
 @function rem($px, $context: $base-font-size) {
-    @return #{strip-unit($px / strip-unit($context))}rem;
+    @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
 }
 
 // Returns the opposite direction of each direction in a list

hypha/static_src/src/sass/public/abstracts/_mixins.scss

+@use 'sass:math';
+
 // Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
@@ -105,17 +107,17 @@
 @mixin responsive-font-sizes($min, $max) {
 
     $vw-context: (1260 * .1) * 1px;
-    $responsive: ($max / $vw-context) * 10vw;
+    $responsive: math.div($max, $vw-context) * 10vw;
 
-    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+    $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
     $dimension: if(unit($responsive) == 'vh', 'height', 'width');
-    $min-breakpoint: $min / $responsive-unitless * 100;
+    $min-breakpoint: math.div($min, $responsive-unitless) * 100;
 
     @media (max-#{$dimension}: #{$min-breakpoint}) {
         font-size: $min;
     }
 
-    $max-breakpoint: $max / $responsive-unitless * 100;
+    $max-breakpoint: math.div($max, $responsive-unitless) * 100;
 
     @media (min-#{$dimension}: #{$max-breakpoint}) {
         font-size: $max;

hypha/static_src/src/sass/public/base/_typography.scss

+@use 'sass:math';
+
 // $TYPOGRAPHY
 // Base font
 html {
-    font-size: ($base-font-size / 16px) * 100%;
-    line-height: $base-line-height / $base-font-size;
+    font-size: math.div($base-font-size, 16px) * 100%;
+    line-height: math.div($base-line-height, $base-font-size);
     color: $color--default;
 }
 

hypha/static_src/src/sass/public/components/_form.scss

+@use 'sass:math';
+
 .form {
     &--header-search-desktop {
         max-width: 300px;
@@ -424,7 +426,7 @@
         width: 100%;
         padding: .4em;
         border: 1px solid $color--mid-grey;
-        line-height: $base-line-height / $base-font-size;
+        line-height: math.div($base-line-height, $base-font-size);
     }
 
     // Radio + Checkbox