Components: Deprecate COLORS.white

WordPress · Dec 5, 2024 · 2638c65 · 2638c65
1 parent 1418350
commit 2638c65
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,19 +79,19 @@ export const buttonView = ( {
 `;
 
 const pressed = css`
-	color: ${ COLORS.white };
+	color: ${ COLORS.theme.foregroundInverted };
 
 	&:active {
 		background: transparent;
 	}
 `;
 
 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
@@ -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
@@ -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
@@ -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 )`,