From 6a119f81527b8075d83ed0c9b1b65a9f1366667d Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 9 Oct 2024 12:10:29 +0200
Subject: [PATCH 1/5] Storybook: Add stub doc on existing colors.

---
 storybook/stories/tokens/color.mdx | 104 +++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 storybook/stories/tokens/color.mdx

diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
new file mode 100644
index 00000000000000..556fcce041c111
--- /dev/null
+++ b/storybook/stories/tokens/color.mdx
@@ -0,0 +1,104 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Tokens/Color" name="page" />
+
+# Color
+
+This document outlines the default color set of the WordPress component system as it ships. The page is a work in progress. 
+
+
+## Gray Tones
+
+<ColorPalette>
+	<ColorItem
+		title="Black"
+		subtitle="Pure black. For UI, use Gray 900"
+		colors={{
+			'$black': '#000',
+		}}
+	/>
+	<ColorItem
+		title="Gray 900"
+		subtitle="Default text/icon color."
+		colors={{
+			'$gray-900': '#1e1e1e',
+		}}
+	/>
+	<ColorItem
+		title="Gray 800"
+		subtitle=""
+		colors={{
+			'$gray-800': '#2f2f2f',
+		}}
+	/>
+	<ColorItem
+		title="Gray 700"
+		subtitle="Meets 4.6:1 text contrast against white."
+		colors={{
+			'$gray-700': '#757575',
+		}}
+	/>
+	<ColorItem
+		title="Gray 600"
+		subtitle="Meets 3:1 UI or large text contrast against white."
+		colors={{
+			'$gray-600': '#949494',
+		}}
+	/>
+	<ColorItem
+		title="Gray 400"
+		subtitle=""
+		colors={{
+			'$gray-400': '#ccc',
+		}}
+	/>
+	<ColorItem
+		title="Gray 300"
+		subtitle="Used for most borders on white."
+		colors={{
+			'$gray-300': '#ddd',
+		}}
+	/>
+	<ColorItem
+		title="Gray 200"
+		subtitle="Used sparingly for light borders on white."
+		colors={{
+			'$gray-200': '#e0e0e0',
+		}}
+	/>
+	<ColorItem
+		title="Gray 100"
+		subtitle=""
+		colors={{
+			'$gray-100': '#f0f0f0',
+		}}
+	/>
+	<ColorItem
+		title="White"
+		subtitle="Used for light gray backgrounds."
+		colors={{
+			'$white': '#fff',
+		}}
+	/>
+</ColorPalette>
+
+
+
+## Other
+
+<ColorPalette>
+	<ColorItem
+		title="Alert colors"
+		subtitle=""
+		colors={{
+			'Alert Yellow': '#f0b849',
+			'Alert Red': '#cc1818',
+			'Alert Green': '#4ab866',
+		}}
+	/>
+</ColorPalette>
+
+
+
+
+

From 582885c1d37cab213f98996208f107d8dd12584e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 9 Oct 2024 13:39:49 +0200
Subject: [PATCH 2/5] Update 4.6 to 4.5 for contrast.

---
 storybook/stories/tokens/color.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
index 556fcce041c111..c864ce6c86774d 100644
--- a/storybook/stories/tokens/color.mdx
+++ b/storybook/stories/tokens/color.mdx
@@ -33,7 +33,7 @@ This document outlines the default color set of the WordPress component system a
 	/>
 	<ColorItem
 		title="Gray 700"
-		subtitle="Meets 4.6:1 text contrast against white."
+		subtitle="Meets 4.5:1 text contrast against white."
 		colors={{
 			'$gray-700': '#757575',
 		}}

From ebcfa1eac1663ce818f5c284badc63d159d0a595 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 9 Oct 2024 15:20:11 +0200
Subject: [PATCH 3/5] Update based on feedback.

---
 storybook/stories/tokens/color.mdx | 72 +++++-------------------------
 1 file changed, 10 insertions(+), 62 deletions(-)

diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
index c864ce6c86774d..5cf518a6f22375 100644
--- a/storybook/stories/tokens/color.mdx
+++ b/storybook/stories/tokens/color.mdx
@@ -6,86 +6,27 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
 This document outlines the default color set of the WordPress component system as it ships. The page is a work in progress. 
 
-
-## Gray Tones
+## Colors
 
 <ColorPalette>
 	<ColorItem
-		title="Black"
-		subtitle="Pure black. For UI, use Gray 900"
+		title="Gray Tones"
+		subtitle=""
 		colors={{
 			'$black': '#000',
-		}}
-	/>
-	<ColorItem
-		title="Gray 900"
-		subtitle="Default text/icon color."
-		colors={{
 			'$gray-900': '#1e1e1e',
-		}}
-	/>
-	<ColorItem
-		title="Gray 800"
-		subtitle=""
-		colors={{
 			'$gray-800': '#2f2f2f',
-		}}
-	/>
-	<ColorItem
-		title="Gray 700"
-		subtitle="Meets 4.5:1 text contrast against white."
-		colors={{
 			'$gray-700': '#757575',
-		}}
-	/>
-	<ColorItem
-		title="Gray 600"
-		subtitle="Meets 3:1 UI or large text contrast against white."
-		colors={{
 			'$gray-600': '#949494',
-		}}
-	/>
-	<ColorItem
-		title="Gray 400"
-		subtitle=""
-		colors={{
 			'$gray-400': '#ccc',
-		}}
-	/>
-	<ColorItem
-		title="Gray 300"
-		subtitle="Used for most borders on white."
-		colors={{
 			'$gray-300': '#ddd',
-		}}
-	/>
-	<ColorItem
-		title="Gray 200"
-		subtitle="Used sparingly for light borders on white."
-		colors={{
 			'$gray-200': '#e0e0e0',
-		}}
-	/>
-	<ColorItem
-		title="Gray 100"
-		subtitle=""
-		colors={{
 			'$gray-100': '#f0f0f0',
-		}}
-	/>
-	<ColorItem
-		title="White"
-		subtitle="Used for light gray backgrounds."
-		colors={{
 			'$white': '#fff',
 		}}
 	/>
 </ColorPalette>
 
-
-
-## Other
-
 <ColorPalette>
 	<ColorItem
 		title="Alert colors"
@@ -98,7 +39,14 @@ This document outlines the default color set of the WordPress component system a
 	/>
 </ColorPalette>
 
+## Contrast
 
+Ensure proper contrast is met between text, icons, UI, and backgrounds. Text needs to meet a 4.5:1 ratio to meet AA standards, while large text (16px+) and UI elements (borders, etc.) need to meet a 3:1 ratio. In this section is a list of tokens you can use to meet these criteria.
 
+Against a white background:
 
+* **Gray 700**\
+Lightest gray you can use and meet 4.5:1 text contrast.
 
+* **Gray 600**\
+Lightest gray you can use and meet 3:1 UI contrast.

From e5fb1709cf7e3ce77d13f141b58b1c3c78601f17 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 9 Oct 2024 15:24:33 +0200
Subject: [PATCH 4/5] Use SCSS also for the alerts.

---
 storybook/stories/tokens/color.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
index 5cf518a6f22375..de306f42ef27d3 100644
--- a/storybook/stories/tokens/color.mdx
+++ b/storybook/stories/tokens/color.mdx
@@ -32,9 +32,9 @@ This document outlines the default color set of the WordPress component system a
 		title="Alert colors"
 		subtitle=""
 		colors={{
-			'Alert Yellow': '#f0b849',
-			'Alert Red': '#cc1818',
-			'Alert Green': '#4ab866',
+			'$alert-yellow': '#f0b849',
+			'$alert-red': '#cc1818',
+			'$alert-green': '#4ab866',
 		}}
 	/>
 </ColorPalette>

From 084c8e88d43cffb10d75504d95d942958a164b0b Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 10 Oct 2024 08:40:10 +0200
Subject: [PATCH 5/5] Separate white and black.

---
 storybook/stories/tokens/color.mdx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
index de306f42ef27d3..17944a47777fc8 100644
--- a/storybook/stories/tokens/color.mdx
+++ b/storybook/stories/tokens/color.mdx
@@ -10,10 +10,20 @@ This document outlines the default color set of the WordPress component system a
 
 <ColorPalette>
 	<ColorItem
-		title="Gray Tones"
+		title="Black & White"
 		subtitle=""
 		colors={{
 			'$black': '#000',
+			'$white': '#fff',
+		}}
+	/>
+</ColorPalette>
+
+<ColorPalette>
+	<ColorItem
+		title="Gray Tones"
+		subtitle=""
+		colors={{
 			'$gray-900': '#1e1e1e',
 			'$gray-800': '#2f2f2f',
 			'$gray-700': '#757575',
@@ -22,7 +32,6 @@ This document outlines the default color set of the WordPress component system a
 			'$gray-300': '#ddd',
 			'$gray-200': '#e0e0e0',
 			'$gray-100': '#f0f0f0',
-			'$white': '#fff',
 		}}
 	/>
 </ColorPalette>