Components: Restore Non-Themed Text Colors for `optimizeReadabilityFo…

…r` (WordPress#68472) * fix: Reverted to use non theme based CSS values * revert: Dark contrast tests for optimizeReadabilityFor, and updated CHANGELOG Co-authored-by: im3dabasia <[email protected]> Co-authored-by: mirka <[email protected]>
carstingaxion · Jan 6, 2025 · b80c80c · b80c80c
1 parent 72a9996
commit b80c80c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,8 @@
 -   `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
 -   `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
 -   `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
+-   `Heading`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
+-   `Text`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
 
 ### Deprecations
 

diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts
@@ -104,9 +104,10 @@ export default function useText(
 			const isOptimalTextColorDark =
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
+			// Should not use theme colors
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.theme.foreground } )
-				: css( { color: COLORS.theme.foregroundInverted } );
+				? css( { color: COLORS.gray[ 900 ] } )
+				: css( { color: COLORS.white } );
 		}
 
 		return cx(

diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
@@ -25,7 +25,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: 'rgb( 255, 255, 255 )',
+			color: COLORS.white,
 		} );
 	} );
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ describe( 'Text', () => { @@
     			</Text>
     		);
     		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-    			color: 'rgb( 255, 255, 255 )',
+    			color: COLORS.white,
     		} );
     	} );
@@ Expand Down @@