From b80c80cfbbf7e7ca95706eb651eef4e1331529a9 Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:26:35 +0530
Subject: [PATCH] Components: Restore Non-Themed Text Colors for
 `optimizeReadabilityFor` (#68472)

* fix: Reverted to use non theme based CSS values

* revert: Dark contrast tests for optimizeReadabilityFor, and updated CHANGELOG

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md            | 2 ++
 packages/components/src/text/hook.ts        | 5 +++--
 packages/components/src/text/test/index.tsx | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d9b08962296782..7a4a7724c97e76 100644
--- 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
index 243b00202460eb..76314686eb963b 100644
--- 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
index e6f6423b6b572d..5fad5582f4d46e 100644
--- 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,
 		} );
 	} );