Replace deprecated global functions

*) map-get *) floor, percentage *) lighten, darken, scale-color
foundation · Nov 18, 2024 · 2125256 · 2125256
1 parent 9e37170
commit 2125256
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 62 deletions.
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
@@ -1,5 +1,7 @@
+@use "sass:color";
+
 $topbar-background: #2c3840;
-$topbar-hover-color: lighten($topbar-background, 10%);// The CSS for the Foundation docs is stored in an external codebase:
+$topbar-hover-color: color.adjust($topbar-background, $lightness: +10%, $space: hsl);// The CSS for the Foundation docs is stored in an external codebase:
 // https://github.com/zurb/foundation-docs
 //
 // You can test Sass changes locally by running these commands:
@@ -29,7 +31,7 @@ $foundation-palette: (
 @import 'course-callout';
 
 $topbar-background: #2c3840;
-$topbar-hover-color: lighten($topbar-background, 10%);
+$topbar-hover-color: color.adjust($topbar-background, $lightness: +10%, $space: hsl);
 
 .dropdown.menu > li.is-dropdown-submenu-parent > a {
   padding-right: 1rem;
@@ -69,7 +71,7 @@ $topbar-hover-color: lighten($topbar-background, 10%);
   background: $primary-color;
 
   &:hover {
-    background: darken($primary-color, 10%);
+    background: color.adjust($primary-color, $lightness: -10%, $space: hsl);
   }
 }
 

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -1,6 +1,8 @@
 // Foundation for Emails by ZURB
 // zurb.com/ink/
 // Licensed under MIT Open Source
+@use "sass:color";
+@use "sass:map";
 
 ////
 /// @group button
@@ -71,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;
       }
@@ -118,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;
     }
   }
@@ -132,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);
     }
   }
 }
@@ -172,7 +174,7 @@ table.button:visited,
 table.button:active {
   table {
     td {
-      background: darken($button-background, 10%);
+      background: color.adjust($button-background, $lightness: -10%, $space: hsl);
       color: $button-color;
     }
   }
@@ -183,7 +185,7 @@ table.button:visited,
 table.button:active {
   table {
     a {
-      border: 0 solid darken($button-background, 10%);
+      border: 0 solid color.adjust($button-background, $lightness: -10%, $space: hsl);
     }
   }
 }
@@ -206,12 +208,12 @@ table.button.secondary {
 table.button.secondary:hover {
   table {
     td {
-      background: lighten($secondary-color, 10%);
+      background: color.adjust($secondary-color, $lightness: +10%, $space: hsl);
       color: $button-color;
     }
 
     a {
-      border: 0 solid lighten($secondary-color, 10%);
+      border: 0 solid color.adjust($secondary-color, $lightness: +10%, $space: hsl);
     }
   }
 }
@@ -256,11 +258,11 @@ table.button.success {
 table.button.success:hover {
   table {
     td {
-      background: darken($success-color, 10%);
+      background: color.adjust($success-color, $lightness: -10%, $space: hsl);
     }
 
     a {
-      border: 0 solid darken($success-color, 10%);
+      border: 0 solid color.adjust($success-color, $lightness: -10%, $space: hsl);
     }
   }
 }
@@ -281,11 +283,11 @@ table.button.alert {
 table.button.alert:hover {
   table {
     td {
-      background: darken($alert-color, 10%);
+      background: color.adjust($alert-color, $lightness: -10%, $space: hsl);
     }
 
     a {
-      border: 0 solid darken($alert-color, 10%);
+      border: 0 solid color.adjust($alert-color, $lightness: -10%, $space: hsl);
     }
   }
 }
@@ -306,11 +308,11 @@ table.button.warning {
 table.button.warning:hover {
   table {
     td {
-      background: darken($warning-color, 10%);
+      background: color.adjust($warning-color, $lightness: -10%, $space: hsl);
     }
 
     a {
-      border: 0px solid darken($warning-color, 10%);
+      border: 0 solid color.adjust($warning-color, $lightness: -10%, $space: hsl);
     }
   }
 }
diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
@@ -1,6 +1,7 @@
 // Foundation for Emails by ZURB
 // zurb.com/ink/
 // Licensed under MIT Open Source
+@use "sass:color";
 
 ////
 /// @group callout
@@ -28,27 +29,27 @@ $callout-margin-bottom: $global-margin !default;
 
 /// Border around a callout.
 /// @type Border
-$callout-border: 1px solid darken($callout-background, 20%) !default;
+$callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $space: hsl) !default;
 
 /// Border around a callout with the `.primary` class.
 /// @type Border
-$callout-border-primary: 1px solid darken($primary-color, 20%) !default;
+$callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl) !default;
 
 /// Border around a callout with the `.secondary` class.
 /// @type Border
-$callout-border-secondary: 1px solid darken($secondary-color, 20%) !default;
+$callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl) !default;
 
 /// Border around a callout with the `.success` class.
 /// @type Border
-$callout-border-success: 1px solid darken($success-color, 20%) !default;
+$callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl) !default;
 
 /// Border around a callout with the `.warning` class.
 /// @type Border
-$callout-border-warning: 1px solid darken($warning-color, 20%) !default;
+$callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl) !default;
 
 /// Border around a callout with the `.alert` class.
 /// @type Border
-$callout-border-alert: 1px solid darken($alert-color, 20%) !default;
+$callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl) !default;
 
 table.callout {
   margin-bottom: $callout-margin-bottom;
@@ -62,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
@@ -2,6 +2,7 @@
 // zurb.com/ink/
 // Licensed under MIT Open Source
 @use "sass:math";
+@use "sass:color";
 
 ////
 /// @group typography
@@ -45,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
@@ -149,7 +150,7 @@ $anchor-color-visited: $anchor-color !default;
 
 /// Text color of anchors on hover.
 /// @type Color
-$anchor-color-hover: darken($primary-color, 10%) !default;
+$anchor-color-hover: color.adjust($primary-color, $lightness: -10%, $space: hsl) !default;
 
 /// Text color of active anchors.
 /// @type Color

diff --git a/scss/foundation-emails.scss b/scss/foundation-emails.scss
@@ -17,11 +17,3 @@
   'components/menu',
   'components/outlook-first',
   'components/media-query';
-
-
-
-
-
-
-
-
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,6 @@
+@use 'sass:math';
+@use 'sass:color';
+
 //  Foundation for Emails Settings
 //  ------------------------------
 //
@@ -64,12 +67,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%;
@@ -89,7 +92,7 @@ $hr-align: center;
 $anchor-text-decoration: none;
 $anchor-color: $primary-color;
 $anchor-color-visited: $anchor-color;
-$anchor-color-hover: darken($primary-color, 10%);
+$anchor-color-hover: color.adjust($primary-color, $lightness: -10%, $space: hsl);
 $anchor-color-active: $anchor-color-hover;
 $stat-font-size: 40px;
 $remove-ios-blue: true;
@@ -126,12 +129,12 @@ $callout-background-fade: 85%;
 $callout-padding: 10px;
 $callout-padding-small: $callout-padding;
 $callout-margin-bottom: $global-margin;
-$callout-border: 1px solid darken($callout-background, 20%);
-$callout-border-primary: 1px solid darken($primary-color, 20%);
-$callout-border-secondary: 1px solid darken($secondary-color, 20%);
-$callout-border-success: 1px solid darken($success-color, 20%);
-$callout-border-warning: 1px solid darken($warning-color, 20%);
-$callout-border-alert: 1px solid darken($alert-color, 20%);
+$callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $space: hsl);
+$callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl);
+$callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl);
+$callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl);
+$callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl);
+$callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl);
 
 // 7. Menu
 // -------

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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,11 +17,3 @@
		'components/menu',
		'components/outlook-first',
		'components/media-query';