Replace deprecated global functions

foundation · Oct 22, 2024 · 6c80d4b · 6c80d4b
1 parent 7792fcb
commit 6c80d4b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 27 deletions.
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -2,6 +2,7 @@
 // zurb.com/ink/
 // Licensed under MIT Open Source
 @use "sass:color";
+@use "sass:map";
 
 ////
 /// @group button
@@ -72,13 +73,13 @@ table.button {
 
       a {
         font-family: $body-font-family;
-        font-size: map-get($button-font-size, default);
+        font-size: map.get($button-font-size, default);
         font-weight: $button-font-weight;
         color: $button-color;
         text-decoration: none;
         text-align: left;
         display: inline-block;
-        padding: map-get($button-padding, default);
+        padding: map.get($button-padding, default);
         border: 0 solid $button-background;
         border-radius: $button-radius;
       }
@@ -119,11 +120,11 @@ table.button.tiny {
   table {
     td,
     a {
-      padding: map-get($button-padding, tiny);
+      padding: map.get($button-padding, tiny);
     }
 
     a {
-      font-size: map-get($button-font-size, tiny);
+      font-size: map.get($button-font-size, tiny);
       font-weight: normal;
     }
   }
@@ -133,17 +134,17 @@ table.button.small {
   table {
     td,
     a {
-      padding: map-get($button-padding, small);
-      font-size: map-get($button-font-size, small);
+      padding: map.get($button-padding, small);
+      font-size: map.get($button-font-size, small);
     }
   }
 }
 
 table.button.large {
   table {
     a {
-      padding: map-get($button-padding, large);
-      font-size: map-get($button-font-size, large);
+      padding: map.get($button-padding, large);
+      font-size: map.get($button-font-size, large);
     }
   }
 }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
@@ -63,31 +63,31 @@ th.callout-inner {
   background: $callout-background;
 
   &.primary {
-    background: scale-color($primary-color, $lightness: $callout-background-fade);
+    background: color.scale($primary-color, $lightness: $callout-background-fade);
     border: $callout-border-primary;
     color: $black;
   }
 
   &.secondary {
-    background: scale-color($secondary-color, $lightness: $callout-background-fade);
+    background: color.scale($secondary-color, $lightness: $callout-background-fade);
     border: $callout-border-secondary;
     color: $black;
   }
 
   &.success {
-    background: scale-color($success-color, $lightness: $callout-background-fade);
+    background: color.scale($success-color, $lightness: $callout-background-fade);
     border: $callout-border-success;
     color: $black;
   }
 
   &.warning {
-    background: scale-color($warning-color, $lightness: $callout-background-fade);
+    background: color.scale($warning-color, $lightness: $callout-background-fade);
     border: $callout-border-warning;
     color: $black;
   }
 
   &.alert {
-    background: scale-color($alert-color, $lightness: $callout-background-fade);
+    background: color.scale($alert-color, $lightness: $callout-background-fade);
     border: $callout-border-alert;
     color: $black;
   }

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
@@ -46,27 +46,27 @@ $header-font-weight: $global-font-weight !default;
 
 /// Font size of `<h1>` elements.
 /// @type Number
-$h1-font-size: floor($global-font-size * 2.125) !default;
+$h1-font-size: math.floor($global-font-size * 2.125) !default;
 
 /// Font size of `<h2>` elements.
 /// @type Number
-$h2-font-size: floor($global-font-size * 1.875) !default;
+$h2-font-size: math.floor($global-font-size * 1.875) !default;
 
 /// Font size of `<h3>` elements.
 /// @type Number
-$h3-font-size: floor($global-font-size * 1.75) !default;
+$h3-font-size: math.floor($global-font-size * 1.75) !default;
 
 /// Font size of `<h4>` elements.
 /// @type Number
-$h4-font-size: floor($global-font-size * 1.5) !default;
+$h4-font-size: math.floor($global-font-size * 1.5) !default;
 
 /// Font size of `<h5>` elements.
 /// @type Number
-$h5-font-size: floor($global-font-size * 1.2) !default;
+$h5-font-size: math.floor($global-font-size * 1.2) !default;
 
 /// Font size of `<h6>` elements.
 /// @type Number
-$h6-font-size: floor($global-font-size * 1.125) !default;
+$h6-font-size: math.floor($global-font-size * 1.125) !default;
 
 /// Margin bottom of `<h1>` through `<h6>` elements.
 /// @type Number

diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss
@@ -28,6 +28,6 @@ $block-grid-gutter: $global-gutter !default;
 // Sizing classes
 @for $i from 2 through $block-grid-max {
   .up-#{$i} td {
-    width: floor(math.div($global-width - $i * $block-grid-gutter, $i)) !important;
+    width: math.floor(math.div($global-width - $i * $block-grid-gutter, $i)) !important;
   }
 }
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //  Foundation for Emails Settings
 //  ------------------------------
 //
@@ -64,12 +66,12 @@ $global-font-size: 16px;
 $body-line-height: $global-line-height;
 $header-font-family: $body-font-family;
 $header-font-weight: $global-font-weight;
-$h1-font-size: floor($global-font-size * 2.125);
-$h2-font-size: floor($global-font-size * 1.875);
-$h3-font-size: floor($global-font-size * 1.75);
-$h4-font-size: floor($global-font-size * 1.5);
-$h5-font-size: floor($global-font-size * 1.2);
-$h6-font-size: floor($global-font-size * 1.125);
+$h1-font-size: math.floor($global-font-size * 2.125);
+$h2-font-size: math.floor($global-font-size * 1.875);
+$h3-font-size: math.floor($global-font-size * 1.75);
+$h4-font-size: math.floor($global-font-size * 1.5);
+$h5-font-size: math.floor($global-font-size * 1.2);
+$h6-font-size: math.floor($global-font-size * 1.125);
 $header-margin-bottom: 10px;
 $paragraph-margin-bottom: 10px;
 $small-font-size: 80%;

diff --git a/scss/util/_util.scss b/scss/util/_util.scss
@@ -9,7 +9,7 @@
 /// @param {number} $totalColumns - Column count of the entire row.
 /// @returns {number} A percentage width value.
 @function -zf-grid-calc-pct($colNumber, $totalColumns) {
-  @return math.div(floor(percentage(math.div($colNumber, $totalColumns)) * 1000000), 1000000);
+  @return math.div(math.floor(math.percentage(math.div($colNumber, $totalColumns)) * 1000000), 1000000);
 }
 
 /// Calculates a pixel value for a grid column width.