Components: Fix color scale functions (#72255)

mirka · aduth · web-flow · commit 4ea11030a96e · 2025-10-11T05:43:14.000+09:00
Co-authored-by: mirka &lt;0mirka00@git.wordpress.org&gt;
Co-authored-by: aduth &lt;aduth@git.wordpress.org&gt;
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -201,15 +201,15 @@
 	 */
 	&.is-destructive {
 		--wp-components-color-accent: #{$alert-red};
-		--wp-components-color-accent-darker-10: #{color.scale($alert-red, $lightness: -10%)};
-		--wp-components-color-accent-darker-20: #{color.scale($alert-red, $lightness: -20%)};
+		--wp-components-color-accent-darker-10: #{color.adjust($alert-red, $lightness: -10%)};
+		--wp-components-color-accent-darker-20: #{color.adjust($alert-red, $lightness: -20%)};
 
 		// Only the default variant is styled differently from the non-destructive counterparts.
 		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 			color: $alert-red;
 
 			&:hover:not(:disabled, [aria-disabled="true"]) {
-				color: color.scale($alert-red, $lightness: -20%);
+				color: color.adjust($alert-red, $lightness: -20%);
 			}
 
 			&:focus {
@@ -294,10 +294,10 @@
 		background-image: linear-gradient(
 			-45deg,
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			color.scale($white, $lightness: -2%) 33%,
-			color.scale($white, $lightness: -12%) 33%,
-			color.scale($white, $lightness: -12%) 70%,
-			color.scale($white, $lightness: -2%) 70%
+			color.adjust($white, $lightness: -2%) 33%,
+			color.adjust($white, $lightness: -12%) 33%,
+			color.adjust($white, $lightness: -12%) 70%,
+			color.adjust($white, $lightness: -2%) 70%
 		);
 		/* stylelint-enable */
 	}
diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -19,17 +19,17 @@
 
 	&.is-success {
 		border-left-color: $alert-green;
-		background-color: color.scale($alert-green, $lightness: +45%);
+		background-color: color.adjust($alert-green, $lightness: +45%);
 	}
 
 	&.is-warning {
 		border-left-color: $alert-yellow;
-		background-color: color.scale($alert-yellow, $lightness: +35%);
+		background-color: color.adjust($alert-yellow, $lightness: +35%);
 	}
 
 	&.is-error {
 		border-left-color: $alert-red;
-		background-color: color.scale($alert-red, $lightness: +35%);
+		background-color: color.adjust($alert-red, $lightness: +35%);
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -19,17 +19,17 @@`
`19`	`19`
`20`	`20`	`&.is-success {`
`21`	`21`	`border-left-color: $alert-green;`
`22`		`- background-color: color.scale($alert-green, $lightness: +45%);`
	`22`	`+ background-color: color.adjust($alert-green, $lightness: +45%);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&.is-warning {`
`26`	`26`	`border-left-color: $alert-yellow;`
`27`		`- background-color: color.scale($alert-yellow, $lightness: +35%);`
	`27`	`+ background-color: color.adjust($alert-yellow, $lightness: +35%);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`&.is-error {`
`31`	`31`	`border-left-color: $alert-red;`
`32`		`- background-color: color.scale($alert-red, $lightness: +35%);`
	`32`	`+ background-color: color.adjust($alert-red, $lightness: +35%);`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`