Tests/Build Tools: Update SCSS files to use new color functions.

peterwilsoncc · peterwilsoncc · commit ce9c8d2dfed7 · 2024-10-06T23:35:49.000Z
Replaces deprecated color functions with their updated equivalents, see [https://sass-lang.com/documentation/breaking-changes/color-functions/ the deprecation documentation]. This results in four changes in the built files, `hsl` colors with a negative lightness value are replaced with the keyword `black`. These changes are harmless as they have no effect on the rendered colors. Props aslamdoctor, veryard. Fixes #62142. git-svn-id: https://develop.svn.wordpress.org/trunk@59185 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
@@ -115,28 +115,28 @@ textarea:focus {
 	.button:hover,
 	.button.focus,
 	.button:focus {
-		border-color: darken( #7e8993, 5% );
-		color: darken( #32373c, 5% );
+		border-color: color.adjust(#7e8993, $lightness: -5%);
+		color: color.adjust(#32373c, $lightness: -5%);
 	}
 
 	.button.focus,
 	.button:focus {
 		border-color: #7e8993;
-		color: darken( #32373c, 5% );
+		color: color.adjust(#32373c, $lightness: -5%);
 		box-shadow: 0 0 0 1px #32373c;
 	}
 
 	.button:active {
 		border-color: #7e8993;
-		color: darken( #32373c, 5% );
+		color: color.adjust(#32373c, $lightness: -5%);
 		box-shadow: none;
 	}
 
 	.button.active,
 	.button.active:focus,
 	.button.active:hover {
 		border-color: $button-color;
-		color: darken( #32373c, 5% );
+		color: color.adjust(#32373c, $lightness: -5%);
 		box-shadow: inset 0 2px 5px -3px $button-color;
 	}
 
@@ -154,16 +154,16 @@ textarea:focus {
 		.button.hover,
 		.button:hover,
 		.button-secondary:hover{
-			border-color: darken($highlight-color, 10);
-			color: darken($highlight-color, 10);
+			border-color: color.adjust($highlight-color, $lightness: -10%);
+			color: color.adjust($highlight-color, $lightness: -10%);
 		}
 
 		.button.focus,
 		.button:focus,
 		.button-secondary:focus {
-			border-color: lighten($highlight-color, 10);
-			color: darken($highlight-color, 20);;
-			box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+			border-color: color.adjust($highlight-color, $lightness: 10%);
+			color: color.adjust($highlight-color, $lightness: -20%);
+			box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
 		}
 
 		.button-primary {
@@ -225,14 +225,14 @@ textarea:focus {
 	}
 
 	.wrap .page-title-action:hover {
-		color: darken($highlight-color, 10);
-		border-color: darken($highlight-color, 10);
+		color: color.adjust($highlight-color, $lightness: -10%);
+		border-color: color.adjust($highlight-color, $lightness: -10%);
 	}
 
 	.wrap .page-title-action:focus {
-		border-color: lighten($highlight-color, 10);
-		color: darken($highlight-color, 20);;
-		box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+		border-color: color.adjust($highlight-color, $lightness: 10%);
+		color: color.adjust($highlight-color, $lightness: -20%);
+		box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
 	}
 }
 
@@ -539,7 +539,7 @@ ul#adminmenu > li.current > a.current:after {
 
 .wp-pointer .wp-pointer-content h3 {
 	background-color: $highlight-color;
-	border-color: darken( $highlight-color, 5% );
+	border-color: color.adjust($highlight-color, $lightness: -5%);
 }
 
 .wp-pointer .wp-pointer-content h3:before {
@@ -632,7 +632,7 @@ body.more-filters-opened .more-filters:focus:before {
 
 .nav-menus-php .item-edit:focus:before {
 	box-shadow:
-		0 0 0 1px lighten($button-color, 10),
+		0 0 0 1px color.adjust($button-color, $lightness: 10%),
 		0 0 2px 1px $button-color;
 }
 
@@ -711,7 +711,7 @@ div#wp-responsive-toggle a:before {
 	#customize-save-button-wrapper .save:focus,
 	#publish-settings:focus {
 		box-shadow:
-			0 0 0 1px lighten($button-color, 10),
+			0 0 0 1px color.adjust($button-color, $lightness: 10%),
 			0 0 2px 1px $button-color;
 	}
 
@@ -772,7 +772,7 @@ div#wp-responsive-toggle a:before {
 	.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
 	.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
 		box-shadow:
-			0 0 0 1px lighten($button-color, 10),
+			0 0 0 1px color.adjust($button-color, $lightness: 10%),
 			0 0 2px 1px $button-color;
 	}
 
diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss
@@ -9,8 +9,8 @@
 
 	&:hover,
 	&:focus {
-		background: lighten( $button-color, 3% );
-		border-color: darken( $button-color, 3% );
+		background: color.adjust($button-color, $lightness: 3%);
+		border-color: color.adjust($button-color, $lightness: -3%);
 		color: $button-text-color;
 	}
 
@@ -21,8 +21,8 @@
 	}
 
 	&:active {
-		background: darken( $button-color, 5% );
-		border-color: darken( $button-color, 5% );
+		background: color.adjust($button-color, $lightness: -5%);
+		border-color: color.adjust($button-color, $lightness: -5%);
 		color: $button-text-color;
 	}
 
@@ -31,7 +31,7 @@
 	&.active:hover {
 		background: $button-color;
 		color: $button-text-color;
-		border-color: darken( $button-color, 15% );
-		box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
+		border-color: color.adjust($button-color, $lightness: -15%);
+		box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
 	}
 }
diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss
@@ -6,7 +6,7 @@ $scheme-name: "default" !default;
 
 $text-color: #fff !default;
 $base-color: #23282d !default;
-$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
+$icon-color: hsl(color.channel($base-color, "hue", $space: hsl), 7%, 95%) !default;
 $highlight-color: #0073aa !default;
 $notification-color: #d54e21 !default;
 
@@ -16,7 +16,7 @@ $notification-color: #d54e21 !default;
 $body-background: #f1f1f1 !default;
 
 $link: #0073aa !default;
-$link-focus: lighten( $link, 10% ) !default;
+$link-focus: color.adjust($link, $lightness: 10%) !default;
 
 $button-color: $highlight-color !default;
 $button-text-color: $text-color !default;
@@ -38,8 +38,8 @@ $menu-current-icon: $menu-highlight-icon !default;
 $menu-current-background: $menu-highlight-background !default;
 
 $menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
-$menu-submenu-background: darken( $base-color, 7% ) !default;
-$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
+$menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
+$menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
 
 $menu-submenu-focus-text: $highlight-color !default;
 $menu-submenu-current-text: $text-color !default;
@@ -54,8 +54,8 @@ $menu-collapse-icon: $menu-icon !default;
 $menu-collapse-focus-text: $text-color !default;
 $menu-collapse-focus-icon: $menu-highlight-icon !default;
 
-$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
-$adminbar-input-background: lighten( $menu-background, 7% ) !default;
+$adminbar-avatar-frame: color.adjust($menu-background, $lightness: 7%) !default;
+$adminbar-input-background: color.adjust($menu-background, $lightness: 7%) !default;
 
 $adminbar-recovery-exit-text: $menu-bubble-text !default;
 $adminbar-recovery-exit-background: $menu-bubble-background !default;
diff --git a/src/wp-admin/css/colors/blue/colors.scss b/src/wp-admin/css/colors/blue/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "blue";
 $base-color: #52accc;
 $icon-color: #e5f8ff;
diff --git a/src/wp-admin/css/colors/coffee/colors.scss b/src/wp-admin/css/colors/coffee/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "coffee";
 $base-color: #59524c;
 $highlight-color: #c7a589;
diff --git a/src/wp-admin/css/colors/ectoplasm/colors.scss b/src/wp-admin/css/colors/ectoplasm/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "ectoplasm";
 $base-color: #523f6d;
 $icon-color: #ece6f6;
diff --git a/src/wp-admin/css/colors/light/colors.scss b/src/wp-admin/css/colors/light/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "light";
 $base-color: #e5e5e5;
 $icon-color: #999;
@@ -19,7 +21,7 @@ $menu-collapse-text: #777;
 $menu-collapse-focus-icon: #555;
 
 $dashboard-accent-1: $highlight-color;
-$dashboard-accent-2: desaturate( lighten( $highlight-color, 7% ), 15% );
+$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
 $dashboard-icon-background: $text-color;
 
 @import "../_admin.scss";
diff --git a/src/wp-admin/css/colors/midnight/colors.scss b/src/wp-admin/css/colors/midnight/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "midnight";
 $base-color: #363b3f;
 $highlight-color: #e14d43;
diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss
@@ -1,11 +1,13 @@
+@use "sass:color";
+
 $scheme-name: "modern";
 $base-color: #1e1e1e;
 $highlight-color: #3858e9;
 $menu-submenu-focus-text: #33f078;
 $notification-color: $highlight-color;
 
 $link: $highlight-color;
-$link-focus: darken($highlight-color, 10%);
+$link-focus: color.adjust($highlight-color, $lightness: -10%);
 
 $custom-welcome-panel: "false";
 
diff --git a/src/wp-admin/css/colors/ocean/colors.scss b/src/wp-admin/css/colors/ocean/colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $scheme-name: "ocean";
 $base-color: #738e96;
 $icon-color: #f2fcff;
diff --git a/src/wp-admin/css/colors/sunrise/colors.scss b/src/wp-admin/css/colors/sunrise/colors.scss
@@ -1,7 +1,9 @@
+@use "sass:color";
+
 $scheme-name: "sunrise";
 $base-color: #cf4944;
 $highlight-color: #dd823b;
 $notification-color: #ccaf0b;
-$menu-submenu-focus-text: lighten( $highlight-color, 35% );
+$menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%);
 
 @import "../_admin.scss";

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@`
`9`	`9`
`10`	`10`	`&:hover,`
`11`	`11`	`&:focus {`
`12`		`- background: lighten( $button-color, 3% );`
`13`		`- border-color: darken( $button-color, 3% );`
	`12`	`+ background: color.adjust($button-color, $lightness: 3%);`
	`13`	`+ border-color: color.adjust($button-color, $lightness: -3%);`
`14`	`14`	`color: $button-text-color;`
`15`	`15`	`}`
`16`	`16`
`@@ -21,8 +21,8 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`&:active {`
`24`		`- background: darken( $button-color, 5% );`
`25`		`- border-color: darken( $button-color, 5% );`
	`24`	`+ background: color.adjust($button-color, $lightness: -5%);`
	`25`	`+ border-color: color.adjust($button-color, $lightness: -5%);`
`26`	`26`	`color: $button-text-color;`
`27`	`27`	`}`
`28`	`28`
`@@ -31,7 +31,7 @@`
`31`	`31`	`&.active:hover {`
`32`	`32`	`background: $button-color;`
`33`	`33`	`color: $button-text-color;`
`34`		`- border-color: darken( $button-color, 15% );`
`35`		`- box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );`
	`34`	`+ border-color: color.adjust($button-color, $lightness: -15%);`
	`35`	`+ box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);`
`36`	`36`	`}`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`$scheme-name: "blue";`
`2`	`4`	`$base-color: #52accc;`
`3`	`5`	`$icon-color: #e5f8ff;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`$scheme-name: "coffee";`
`2`	`4`	`$base-color: #59524c;`
`3`	`5`	`$highlight-color: #c7a589;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`$scheme-name: "ectoplasm";`
`2`	`4`	`$base-color: #523f6d;`
`3`	`5`	`$icon-color: #ece6f6;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`$scheme-name: "midnight";`
`2`	`4`	`$base-color: #363b3f;`
`3`	`5`	`$highlight-color: #e14d43;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`$scheme-name: "ocean";`
`2`	`4`	`$base-color: #738e96;`
`3`	`5`	`$icon-color: #f2fcff;`