From 2638c65b09af97f622563ec17df09bdbe36dcd24 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 6 Dec 2024 01:07:04 +0900
Subject: [PATCH] Components: Deprecate `COLORS.white`

---
 packages/components/src/menu/styles.ts               |  2 +-
 .../src/navigation/styles/navigation-styles.tsx      |  4 ++--
 .../toggle-group-control-option-base/styles.ts       | 12 ++++++------
 .../toggle-group-control/styles.ts                   |  2 +-
 packages/components/src/utils/colors-values.js       |  3 +++
 packages/components/src/utils/config-values.js       |  1 -
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts
index 0e0752bf24cd10..cda5c7321f38b4 100644
--- a/packages/components/src/menu/styles.ts
+++ b/packages/components/src/menu/styles.ts
@@ -201,7 +201,7 @@ const baseItem = css`
 			[aria-disabled='true']
 		) {
 		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.white };
+		color: ${ COLORS.theme.accentInverted };
 	}
 
 	/* Keyboard focus (focus-visible) */
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
index 580c0eef4dba8f..0cde63146856bc 100644
--- a/packages/components/src/navigation/styles/navigation-styles.tsx
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -134,11 +134,11 @@ export const ItemBaseUI = styled.li`
 
 	&.is-active {
 		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.white };
+		color: ${ COLORS.theme.accentInverted };
 
 		> button,
 		> a {
-			color: ${ COLORS.white };
+			color: ${ COLORS.theme.accentInverted };
 			opacity: 1;
 		}
 	}
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index c0248f9b3f7f22..a53eced1219db4 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -38,7 +38,7 @@ export const buttonView = ( {
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
 	display: flex;
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.controlBackgroundColor };
+		background: ${ COLORS.ui.background };
 	}
 
 	${ isDeselectable && deselectable }
@@ -79,7 +79,7 @@ export const buttonView = ( {
 `;
 
 const pressed = css`
-	color: ${ COLORS.white };
+	color: ${ COLORS.theme.foregroundInverted };
 
 	&:active {
 		background: transparent;
@@ -87,11 +87,11 @@ const pressed = css`
 `;
 
 const deselectable = css`
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 
 	&:focus {
 		box-shadow:
-			inset 0 0 0 1px ${ COLORS.white },
+			inset 0 0 0 1px ${ COLORS.ui.background },
 			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
@@ -112,7 +112,7 @@ const isIconStyles = ( {
 	};
 
 	return css`
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index bb6efe476b2b2c..8376b66a5a86cf 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.gray[ 900 ] };
+		background: ${ COLORS.theme.foreground };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 1ad528d13f0108..439d464f1460b1 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -75,6 +75,9 @@ export const COLORS = Object.freeze( {
 	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
 	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
+	/**
+	 * @deprecated Prefer theme-ready variables in `COLORS.theme`.
+	 */
 	white,
 	alert: ALERT,
 	/**
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 1bc3945f9b3b16..13b704540e9c4c 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -12,7 +12,6 @@ const CONTROL_PROPS = {
 	controlPaddingXSmall: 8,
 	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
 
-	controlBackgroundColor: COLORS.white,
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,