From 7ccd5663afd7b0fc2ec81105ec1f8bda0ca125c1 Mon Sep 17 00:00:00 2001
From: Sharon Yogev <31185192+sharonyogev@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:30:00 +0300
Subject: [PATCH 1/3] Fix typo of contrast color for the colors in darkBgColors

---
 components/ColorGrayPairsComplementary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ColorGrayPairsComplementary.tsx b/components/ColorGrayPairsComplementary.tsx
index f3e5ec14..ca414f18 100644
--- a/components/ColorGrayPairsComplementary.tsx
+++ b/components/ColorGrayPairsComplementary.tsx
@@ -77,7 +77,7 @@ export function ColorGrayPairsComplementary() {
 							as="p"
 							size="2"
 							style={{
-								color: `var(--${color}-9-contrast)`,
+								color: `var(--${color}-contrast)`,
 								textTransform: "capitalize",
 							}}
 						>

From dfa306163839500040bd5ca9ca7e5cf8f1a1398e Mon Sep 17 00:00:00 2001
From: Sharon Yogev <31185192+sharonyogev@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:31:04 +0300
Subject: [PATCH 2/3] Align titles of colors with white and dark forground text
 to be inside the component

---
 components/ColorGrayPairsComplementary.tsx                   | 4 ++++
 data/colors/docs/palette-composition/composing-a-palette.mdx | 2 --
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/ColorGrayPairsComplementary.tsx b/components/ColorGrayPairsComplementary.tsx
index ca414f18..e23b631f 100644
--- a/components/ColorGrayPairsComplementary.tsx
+++ b/components/ColorGrayPairsComplementary.tsx
@@ -28,6 +28,10 @@ const darkBgColors = ["sky", "mint", "lime", "yellow", "amber"];
 export function ColorGrayPairsComplementary() {
 	return (
 		<Box>
+			<Text as="p" mb="3">
+				Scales designed for white foreground text:
+			</Text>
+
 			<Grid
 				align="center"
 				my="5"
diff --git a/data/colors/docs/palette-composition/composing-a-palette.mdx b/data/colors/docs/palette-composition/composing-a-palette.mdx
index b602a97e..8cd11e6b 100644
--- a/data/colors/docs/palette-composition/composing-a-palette.mdx
+++ b/data/colors/docs/palette-composition/composing-a-palette.mdx
@@ -13,8 +13,6 @@ metaDescription: A guide to composing a color palette with Radix Colors.
 
 Radix provides a number of scales you could use for your brand or accent color.
 
-Scales designed for white foreground text:
-
 <ColorGrayPairsComplementary />
 
 ### Custom brand colors

From a774539b235e4ea1b4f27db681dcf3d0272b3055 Mon Sep 17 00:00:00 2001
From: Sharon Yogev <sharon.yogev@neutrino.security>
Date: Mon, 19 May 2025 16:05:01 +0300
Subject: [PATCH 3/3] ColorGrayPairs: Change font color to use contrast color
 instead of manually checking if it should be dark text

---
 components/ColorGrayPairs.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/ColorGrayPairs.tsx b/components/ColorGrayPairs.tsx
index b6f243ce..18a4b6fc 100644
--- a/components/ColorGrayPairs.tsx
+++ b/components/ColorGrayPairs.tsx
@@ -20,8 +20,6 @@ const pairings = [
 	{ color: "sand", pairs: ["yellow", "amber", "orange", "brown"] },
 ];
 
-const darkTextPair = ["sky", "mint", "lime", "amber", "yellow"];
-
 export function ColorGrayPairs() {
 	return (
 		<Box>
@@ -65,9 +63,7 @@ export function ColorGrayPairs() {
 									as="p"
 									size="2"
 									style={{
-										color: darkTextPair.includes(pair)
-											? `var(--${color}-12)`
-											: "white",
+										color: `var(--${pair}-contrast)`,
 										textTransform: "capitalize",
 									}}
 								>