Replace deprecated SASS methods

foundation · Sep 23, 2024 · 7792fcb · 7792fcb
1 parent 9e37170
commit 7792fcb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 25 deletions.
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -1,6 +1,7 @@
 // Foundation for Emails by ZURB
 // zurb.com/ink/
 // Licensed under MIT Open Source
+@use "sass:color";
 
 ////
 /// @group button
@@ -172,7 +173,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 +184,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 +207,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 +257,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 +282,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 +307,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;

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