From 8b5d4278d5792e75273fda647ea34053a510aeea Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 8 May 2023 13:41:46 -0400
Subject: [PATCH 01/29] Move color name and value below picker swatch

---
 .../components/src/color-palette/index.tsx    | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index f741e35eebef7e..140306b6f8d1b3 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -220,8 +220,6 @@ function UnforwardedColorPalette(
 		</DropdownContentWrapper>
 	);
 
-	const colordColor = colord( normalizedColorValue ?? '' );
-
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
 		: value ?? '';
@@ -258,41 +256,43 @@ function UnforwardedColorPalette(
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Flex
-							as={ 'button' }
-							ref={ customColorPaletteCallbackRef }
-							justify="space-between"
-							align="flex-start"
-							className="components-color-palette__custom-color"
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							aria-label={ customColorAccessibleLabel }
-							style={
-								showTransparentBackground( value )
-									? { color: '#000' }
-									: {
-											background: value,
-											color:
-												colordColor.contrast() >
-												colordColor.contrast( '#000' )
-													? '#fff'
-													: '#000',
-									  }
-							}
+							direction="column"
+							gap={ 0 }
+							as="div"
+							className="components-color-palette__custom-color__container"
 						>
 							<FlexItem
-								isBlock
-								as={ Truncate }
-								className="components-color-palette__custom-color-name"
-							>
-								{ buttonLabelName }
-							</FlexItem>
-							<FlexItem
-								as="span"
-								className="components-color-palette__custom-color-value"
-							>
-								{ valueWithoutLeadingHash }
-							</FlexItem>
+								as={ 'button' }
+								ref={ customColorPaletteCallbackRef }
+								className="components-color-palette__custom-color"
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								aria-label={ customColorAccessibleLabel }
+								style={
+									showTransparentBackground( value )
+										? {}
+										: {
+												background: value,
+										  }
+								}
+							/>
+							{ value && (
+								<>
+									<FlexItem
+										as={ Truncate }
+										className="components-color-palette__custom-color-name"
+									>
+										{ buttonLabelName }
+									</FlexItem>
+									<FlexItem
+										as={ 'span' }
+										className="components-color-palette__custom-color-value"
+									>
+										{ value }
+									</FlexItem>
+								</>
+							) }
 						</Flex>
 					) }
 				/>

From 40cf2b3c3a0eb6a172c9bdec05d00283f0794bcb Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 8 May 2023 13:42:06 -0400
Subject: [PATCH 02/29] update component styles

---
 .../components/src/color-palette/style.scss   | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 82f1858d64d3c4..ffb4a8b6814513 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,12 +1,20 @@
+.components-color-palette__custom-color__container {
+	border-radius: $radius-block-ui;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+}
+
 .components-color-palette__custom-color {
-	position: relative;
 	border: none;
 	background: none;
-	border-radius: $radius-block-ui;
+	// border-radius: $radius-block-ui $radius-block-ui 0 0;
+	border-radius:
+		calc(#{$radius-block-ui} - #{$border-width} * 0.5) 0 0
+		calc(#{$radius-block-ui} - #{$border-width} * 0.5) 0 0;
 	height: $grid-unit-80;
 	padding: $grid-unit-15;
 	font-family: inherit;
-	width: 100%;
+	width: calc(100% - (#{$border-width} * 2));
+	margin: $border-width auto $border-width auto;
 	// The background image creates a checkerboard pattern. Ignore rtlcss to
 	// make it work both in LTR and RTL.
 	// See https://github.com/WordPress/gutenberg/pull/42510
@@ -20,7 +28,6 @@
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
 
@@ -33,9 +40,18 @@
 
 .components-color-palette__custom-color-name {
 	text-align: left;
+	font-size: $default-font-size;
+	color: $components-color-foreground;
+	box-shadow: 0 (-$border-width) 0 0 rgba(0, 0, 0, 0.2);
+	margin: 0 $border-width;
+	padding-top: $grid-unit-15;
+	padding-left: $grid-unit-20;
 }
 
 .components-color-palette__custom-color-value {
-	margin-left: $grid-unit-20;
+	font-size: $default-font-size;
+	padding-left: $grid-unit-20;
+	padding-bottom: $grid-unit-15;
 	text-transform: uppercase;
+	color: $gray-600;
 }

From bd97be707afff3dba938127e6582b6037314d082 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 9 May 2023 08:31:01 -0400
Subject: [PATCH 03/29] update CHANGELOG

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index b299cdf3e0c153..9e7582adaff4c8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Enhancements
 
 -   `Tooltip`: Update background color so tooltip boundaries are more visible in the site editor ([#50792](https://github.com/WordPress/gutenberg/pull/50792)).
+-   `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
 
 ## 24.0.0 (2023-05-10)
 

From f1b8099ccf159085c27d283f764aa5babe0f21a3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 9 May 2023 08:36:20 -0400
Subject: [PATCH 04/29] update snapshot

---
 .../test/__snapshots__/control.js.snap        | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 631f8e45a6ec1d..96bceb92fb2f08 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -78,45 +78,44 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  width: 100%;
+  height: 100%;
 }
 
 .emotion-10>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-13 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.emotion-12 {
   display: block;
   max-height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  display: block;
 }
 
 .emotion-15 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   display: block;
   max-height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
+  display: block;
 }
 
 <div>
@@ -157,30 +156,35 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 class="components-dropdown"
                 tabindex="-1"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                <div
+                  class="components-flex components-color-palette__custom-color__container emotion-10 emotion-5"
                   data-wp-c16t="true"
                   data-wp-component="Flex"
-                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
                 >
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
+                    class="components-flex-item components-color-palette__custom-color emotion-12 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                    style="background: rgb(255, 0, 0);"
+                  />
                   <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-15 emotion-5"
                     data-wp-c16t="true"
                     data-wp-component="FlexItem"
                   >
                     red
                   </span>
                   <span
-                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                    class="components-flex-item components-color-palette__custom-color-value emotion-12 emotion-5"
                     data-wp-c16t="true"
                     data-wp-component="FlexItem"
                   >
-                    f00
+                    #f00
                   </span>
-                </button>
+                </div>
               </div>
               <div
                 class="components-circular-option-picker"

From f232053b4308ccb3e19deac8d72c78784233f5e8 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 9 May 2023 09:42:02 -0400
Subject: [PATCH 05/29] update unit tests

---
 .../test/__snapshots__/index.tsx.snap         | 60 ++++++++++---------
 .../src/color-palette/test/index.tsx          | 12 +---
 2 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
index efbcf7a4aa4a40..5251e2774c77b4 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
@@ -127,45 +127,44 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  width: 100%;
+  height: 100%;
 }
 
 .emotion-2>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-5 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.emotion-4 {
   display: block;
   max-height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  display: block;
 }
 
 .emotion-7 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   display: block;
   max-height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
+  display: block;
 }
 
 <div>
@@ -178,30 +177,35 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       class="components-dropdown"
       tabindex="-1"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-        class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
+      <div
+        class="components-flex components-color-palette__custom-color__container emotion-2 emotion-1"
         data-wp-c16t="true"
         data-wp-component="Flex"
-        style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
       >
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
+          class="components-flex-item components-color-palette__custom-color emotion-4 emotion-1"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+          style="background: rgb(255, 0, 0);"
+        />
         <span
-          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-5 emotion-1"
+          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-7 emotion-1"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           red
         </span>
         <span
-          class="components-flex-item components-color-palette__custom-color-value emotion-7 emotion-1"
+          class="components-flex-item components-color-palette__custom-color-value emotion-4 emotion-1"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
-          f00
+          #f00
         </span>
-      </button>
+      </div>
     </div>
     <div
       class="components-circular-option-picker"
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 46b5bc6ba22bdc..42c6d2e2eb51c3 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -156,15 +156,9 @@ describe( 'ColorPalette', () => {
 
 		expect( dropdownButton ).toBeVisible();
 
-		expect(
-			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
-		).toBeVisible();
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
 
-		expect(
-			within( dropdownButton ).getByText(
-				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
-			)
-		).toBeVisible();
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
 
 		// Check that the popover with custom color input has appeared.
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );

From d981a96973cef990844ea32b2a6a40e7a5a99ef7 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 10 May 2023 12:45:43 -0400
Subject: [PATCH 06/29] simplify CSS

---
 .../components/src/color-palette/style.scss   | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index ffb4a8b6814513..462034bcedd7d3 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,20 +1,15 @@
-.components-color-palette__custom-color__container {
+.components-color-palette__custom-color-container {
 	border-radius: $radius-block-ui;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	overflow: hidden;
+	position: relative;
+	border: $border-width solid $gray-200;
 }
 
-.components-color-palette__custom-color {
+.components-color-palette__custom-color-button {
 	border: none;
 	background: none;
-	// border-radius: $radius-block-ui $radius-block-ui 0 0;
-	border-radius:
-		calc(#{$radius-block-ui} - #{$border-width} * 0.5) 0 0
-		calc(#{$radius-block-ui} - #{$border-width} * 0.5) 0 0;
 	height: $grid-unit-80;
-	padding: $grid-unit-15;
-	font-family: inherit;
-	width: calc(100% - (#{$border-width} * 2));
-	margin: $border-width auto $border-width auto;
+	width: 100%;
 	// The background image creates a checkerboard pattern. Ignore rtlcss to
 	// make it work both in LTR and RTL.
 	// See https://github.com/WordPress/gutenberg/pull/42510
@@ -26,7 +21,6 @@
 	/*rtl:end:ignore*/
 	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
-	color: $white;
 	cursor: pointer;
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
@@ -36,22 +30,26 @@
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
+
+	// box shadow
+}
+
+.components-color-palette__custom-color-text-wrapper {
+	padding: $grid-unit-15 $grid-unit-20;
+	border-top: $border-width solid $gray-200;
+
+	// bottom border
 }
 
 .components-color-palette__custom-color-name {
-	text-align: left;
 	font-size: $default-font-size;
 	color: $components-color-foreground;
-	box-shadow: 0 (-$border-width) 0 0 rgba(0, 0, 0, 0.2);
 	margin: 0 $border-width;
-	padding-top: $grid-unit-15;
-	padding-left: $grid-unit-20;
+
 }
 
 .components-color-palette__custom-color-value {
 	font-size: $default-font-size;
-	padding-left: $grid-unit-20;
-	padding-bottom: $grid-unit-15;
 	text-transform: uppercase;
 	color: $gray-600;
 }

From 639be041d9181255aa7d56b826c3f314fb6ea09d Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 10 May 2023 15:47:50 -0400
Subject: [PATCH 07/29] simplify border styling

---
 .../components/src/color-palette/style.scss   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 462034bcedd7d3..e52442f2e6d755 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,9 +1,4 @@
-.components-color-palette__custom-color-container {
-	border-radius: $radius-block-ui;
-	overflow: hidden;
-	position: relative;
-	border: $border-width solid $gray-200;
-}
+$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
 .components-color-palette__custom-color-button {
 	border: none;
@@ -24,32 +19,39 @@
 	cursor: pointer;
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
+	border-radius: $radius-block-ui $radius-block-ui 0 0;
+	box-shadow: $border-as-box-shadow;
 
 	&:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
-
-	// box shadow
 }
 
 .components-color-palette__custom-color-text-wrapper {
 	padding: $grid-unit-15 $grid-unit-20;
-	border-top: $border-width solid $gray-200;
+	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	position: relative;
+	font-size: $default-font-size;
 
-	// bottom border
+	// Add a border with the same technique as the button above,
+	// but only for left, bottom, and right sides.
+	box-shadow:
+		inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
+		inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
+		inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .components-color-palette__custom-color-name {
-	font-size: $default-font-size;
 	color: $components-color-foreground;
 	margin: 0 $border-width;
-
 }
 
 .components-color-palette__custom-color-value {
-	font-size: $default-font-size;
-	text-transform: uppercase;
 	color: $gray-600;
+
+	&.is-hex {
+		text-transform: uppercase;
+	}
 }

From ba7a5a85264e15594634784928cbc45963a1f1bc Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 10 May 2023 16:42:28 -0400
Subject: [PATCH 08/29] replace `Flex` with `VStack`

---
 .../components/src/color-palette/index.tsx    | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 140306b6f8d1b3..f9753a75efe402 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -5,6 +5,7 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,7 +20,6 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
-import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
@@ -219,11 +219,12 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
-
+	// TODO: CSS vars should not have `VAR` or parentheses. They should also render in lowercase. Be careful of the hash, probably need a new variable.
+	// TODO: This variable is no longer accurate. It's only used for assistive tech now, so we can rename it.
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
 		: value ?? '';
-
+	//  TODO: Check with Andrew on whether or not the hash fits here. Should it be exposed to assistive tech? If hash is okay, remove `valueWithoutLeadingHash`. Otherwise, update translator hint
 	const customColorAccessibleLabel = !! valueWithoutLeadingHash
 		? sprintf(
 				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
@@ -255,16 +256,10 @@ function UnforwardedColorPalette(
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Flex
-							direction="column"
-							gap={ 0 }
-							as="div"
-							className="components-color-palette__custom-color__container"
-						>
-							<FlexItem
-								as={ 'button' }
+						<VStack spacing={ 0 }>
+							<button
 								ref={ customColorPaletteCallbackRef }
-								className="components-color-palette__custom-color"
+								className="components-color-palette__custom-color-button"
 								aria-expanded={ isOpen }
 								aria-haspopup="true"
 								onClick={ onToggle }
@@ -278,22 +273,27 @@ function UnforwardedColorPalette(
 								}
 							/>
 							{ value && (
-								<>
-									<FlexItem
-										as={ Truncate }
-										className="components-color-palette__custom-color-name"
-									>
+								<VStack
+									className="components-color-palette__custom-color-text-wrapper"
+									spacing={ 0.5 }
+								>
+									<Truncate className="components-color-palette__custom-color-name">
 										{ buttonLabelName }
-									</FlexItem>
-									<FlexItem
-										as={ 'span' }
-										className="components-color-palette__custom-color-value"
+									</Truncate>
+									<Truncate
+										className={ classnames(
+											'components-color-palette__custom-color-value',
+											{
+												'is-hex':
+													value?.startsWith( '#' ),
+											}
+										) }
 									>
 										{ value }
-									</FlexItem>
-								</>
+									</Truncate>
+								</VStack>
 							) }
-						</Flex>
+						</VStack>
 					) }
 				/>
 			) }

From b2b05c4b01bb7e06d9f6af4292c209fdb953a956 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 10 May 2023 18:00:04 -0400
Subject: [PATCH 09/29] remove `var()` wrapper from css vars

---
 .../components/src/color-palette/index.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index f9753a75efe402..e21ad573013f70 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -219,20 +219,18 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
-	// TODO: CSS vars should not have `VAR` or parentheses. They should also render in lowercase. Be careful of the hash, probably need a new variable.
-	// TODO: This variable is no longer accurate. It's only used for assistive tech now, so we can rename it.
-	const valueWithoutLeadingHash = value?.startsWith( '#' )
-		? value.substring( 1 )
-		: value ?? '';
-	//  TODO: Check with Andrew on whether or not the hash fits here. Should it be exposed to assistive tech? If hash is okay, remove `valueWithoutLeadingHash`. Otherwise, update translator hint
-	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = value?.startsWith( '#' )
+		? value
+		: value?.replace( /^var\((.+)\)$/, '$1' );
+	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
 				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				valueWithoutLeadingHash
+				displayValue
 		  )
 		: __( 'Custom color picker.' );
 
@@ -285,11 +283,13 @@ function UnforwardedColorPalette(
 											'components-color-palette__custom-color-value',
 											{
 												'is-hex':
-													value?.startsWith( '#' ),
+													displayValue?.startsWith(
+														'#'
+													),
 											}
 										) }
 									>
-										{ value }
+										{ displayValue }
 									</Truncate>
 								</VStack>
 							) }

From d4880c55a685ffdc69614e5bb91ab97b4902209f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 10 May 2023 18:01:02 -0400
Subject: [PATCH 10/29] re-update snapshot

---
 .../test/__snapshots__/index.tsx.snap         | 88 +++++++++++--------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
index 5251e2774c77b4..7bdf9845eefb74 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
@@ -127,18 +127,18 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-2>* {
@@ -146,25 +146,33 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
 }
 
 .emotion-4 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-4>* {
   min-height: 0;
-  min-width: 0;
-  display: block;
 }
 
-.emotion-7 {
+.emotion-6 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
 }
 
 <div>
@@ -178,33 +186,37 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       tabindex="-1"
     >
       <div
-        class="components-flex components-color-palette__custom-color__container emotion-2 emotion-1"
+        class="components-flex components-h-stack components-v-stack emotion-2 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="VStack"
       >
         <button
           aria-expanded="false"
           aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-          class="components-flex-item components-color-palette__custom-color emotion-4 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
+          class="components-color-palette__custom-color-button"
           style="background: rgb(255, 0, 0);"
         />
-        <span
-          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-7 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
-        >
-          red
-        </span>
-        <span
-          class="components-flex-item components-color-palette__custom-color-value emotion-4 emotion-1"
+        <div
+          class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-4 emotion-1"
           data-wp-c16t="true"
-          data-wp-component="FlexItem"
+          data-wp-component="VStack"
         >
-          #f00
-        </span>
+          <span
+            class="components-truncate components-color-palette__custom-color-name emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            red
+          </span>
+          <span
+            class="components-truncate components-color-palette__custom-color-value is-hex emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            #f00
+          </span>
+        </div>
       </div>
     </div>
     <div

From ffeddd5d20d9fdd5584212f80b3ba1073f2ff4f5 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 15 May 2023 07:28:24 -0400
Subject: [PATCH 11/29] display default text for no value

---
 packages/components/src/color-palette/index.tsx  | 8 +++++---
 packages/components/src/color-palette/style.scss | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index e21ad573013f70..da9a57c31a980e 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -270,13 +270,15 @@ function UnforwardedColorPalette(
 										  }
 								}
 							/>
-							{ value && (
+							{
 								<VStack
 									className="components-color-palette__custom-color-text-wrapper"
 									spacing={ 0.5 }
 								>
 									<Truncate className="components-color-palette__custom-color-name">
-										{ buttonLabelName }
+										{ value
+											? buttonLabelName
+											: 'No color selected' }
 									</Truncate>
 									<Truncate
 										className={ classnames(
@@ -292,7 +294,7 @@ function UnforwardedColorPalette(
 										{ displayValue }
 									</Truncate>
 								</VStack>
-							) }
+							}
 						</VStack>
 					) }
 				/>
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index e52442f2e6d755..e7f8e58a3f9c2d 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -50,6 +50,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
 .components-color-palette__custom-color-value {
 	color: $gray-600;
+	min-height: 15px;
 
 	&.is-hex {
 		text-transform: uppercase;

From a64ed18fea11cc21054d6ff681cdbb8e9a5b7097 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 15 May 2023 12:31:53 -0400
Subject: [PATCH 12/29] implement proper BEM notation

---
 packages/components/src/color-palette/index.tsx  | 2 +-
 packages/components/src/color-palette/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index da9a57c31a980e..49d3234b67ba69 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -284,7 +284,7 @@ function UnforwardedColorPalette(
 										className={ classnames(
 											'components-color-palette__custom-color-value',
 											{
-												'is-hex':
+												'components-color-palette__custom-color-value--is-hex':
 													displayValue?.startsWith(
 														'#'
 													),
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index e7f8e58a3f9c2d..cb2d7a7359bbf6 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -52,7 +52,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	color: $gray-600;
 	min-height: 15px;
 
-	&.is-hex {
+	&--is-hex {
 		text-transform: uppercase;
 	}
 }

From 5d41512b717c7701c00790522dd45b53ac0a0dc7 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 15 May 2023 12:38:02 -0400
Subject: [PATCH 13/29] update snapshot with BEM notation

---
 .../src/color-palette/test/__snapshots__/index.tsx.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
index 7bdf9845eefb74..567abd74aeae4e 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
@@ -210,7 +210,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             red
           </span>
           <span
-            class="components-truncate components-color-palette__custom-color-value is-hex emotion-6 emotion-1"
+            class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
             data-wp-c16t="true"
             data-wp-component="Truncate"
           >

From 65caf9066736bc02be15d46844028775d2b36643 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 16 May 2023 07:12:58 -0400
Subject: [PATCH 14/29] Updating block editor snapshots again

---
 .../test/__snapshots__/control.js.snap        | 88 +++++++++++--------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 96bceb92fb2f08..202d8f7ffb503d 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -78,18 +78,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-10>* {
@@ -97,25 +97,33 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-12 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-12>* {
   min-height: 0;
-  min-width: 0;
-  display: block;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
 }
 
 <div>
@@ -157,33 +165,37 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="components-flex components-color-palette__custom-color__container emotion-10 emotion-5"
+                  class="components-flex components-h-stack components-v-stack emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="Flex"
+                  data-wp-component="VStack"
                 >
                   <button
                     aria-expanded="false"
                     aria-haspopup="true"
-                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-                    class="components-flex-item components-color-palette__custom-color emotion-12 emotion-5"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
+                    class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
                   />
-                  <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-15 emotion-5"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  >
-                    red
-                  </span>
-                  <span
-                    class="components-flex-item components-color-palette__custom-color-value emotion-12 emotion-5"
+                  <div
+                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
                     data-wp-c16t="true"
-                    data-wp-component="FlexItem"
+                    data-wp-component="VStack"
                   >
-                    #f00
-                  </span>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      red
+                    </span>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      #f00
+                    </span>
+                  </div>
                 </div>
               </div>
               <div

From 65c33fc88c4b3e87cb26e6bf17241e991466dae9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 17 May 2023 16:39:18 -0400
Subject: [PATCH 15/29] simplify `displayValue` declaration

---
 packages/components/src/color-palette/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 49d3234b67ba69..27c837f4b6ead2 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -220,9 +220,7 @@ function UnforwardedColorPalette(
 		</DropdownContentWrapper>
 	);
 	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-	const displayValue = value?.startsWith( '#' )
-		? value
-		: value?.replace( /^var\((.+)\)$/, '$1' );
+	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
 				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".

From b032818608f196a1d0b44623630210345cad1844 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 17 May 2023 17:42:34 -0400
Subject: [PATCH 16/29] Remove extra curly braces

---
 .../components/src/color-palette/index.tsx    | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 27c837f4b6ead2..a3af90f974827b 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -268,31 +268,27 @@ function UnforwardedColorPalette(
 										  }
 								}
 							/>
-							{
-								<VStack
-									className="components-color-palette__custom-color-text-wrapper"
-									spacing={ 0.5 }
+							<VStack
+								className="components-color-palette__custom-color-text-wrapper"
+								spacing={ 0.5 }
+							>
+								<Truncate className="components-color-palette__custom-color-name">
+									{ value
+										? buttonLabelName
+										: 'No color selected' }
+								</Truncate>
+								<Truncate
+									className={ classnames(
+										'components-color-palette__custom-color-value',
+										{
+											'components-color-palette__custom-color-value--is-hex':
+												displayValue?.startsWith( '#' ),
+										}
+									) }
 								>
-									<Truncate className="components-color-palette__custom-color-name">
-										{ value
-											? buttonLabelName
-											: 'No color selected' }
-									</Truncate>
-									<Truncate
-										className={ classnames(
-											'components-color-palette__custom-color-value',
-											{
-												'components-color-palette__custom-color-value--is-hex':
-													displayValue?.startsWith(
-														'#'
-													),
-											}
-										) }
-									>
-										{ displayValue }
-									</Truncate>
-								</VStack>
-							}
+									{ displayValue }
+								</Truncate>
+							</VStack>
 						</VStack>
 					) }
 				/>

From 1c6774a65acbfcbdbd8321729a30b491c1050951 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 17 May 2023 17:57:19 -0400
Subject: [PATCH 17/29] Add layout comment

---
 packages/components/src/color-palette/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index a3af90f974827b..5fd02565544aeb 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -277,6 +277,11 @@ function UnforwardedColorPalette(
 										? buttonLabelName
 										: 'No color selected' }
 								</Truncate>
+								{ /*
+								This `Truncate` is always rendered, even if
+								there is no `displayValue`, to ensure the layout
+								does not shift
+								*/ }
 								<Truncate
 									className={ classnames(
 										'components-color-palette__custom-color-value',

From 43507c5dd865b844d3336b08bc3898e3a2a9d113 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 18 May 2023 13:57:49 -0400
Subject: [PATCH 18/29] fix color value span min-height

---
 .../components/color-palette/test/__snapshots__/control.js.snap  | 1 +
 packages/components/src/color-palette/index.tsx                  | 1 +
 packages/components/src/color-palette/style.scss                 | 1 -
 3 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 202d8f7ffb503d..486d06d7c7bc8c 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -192,6 +192,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                       class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
+                      style="min-height: 18px;"
                     >
                       #f00
                     </span>
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 5fd02565544aeb..179d94c5f3dd44 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -290,6 +290,7 @@ function UnforwardedColorPalette(
 												displayValue?.startsWith( '#' ),
 										}
 									) }
+									style={ { minHeight: '18px' } }
 								>
 									{ displayValue }
 								</Truncate>
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index cb2d7a7359bbf6..65e525cc0d4426 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -50,7 +50,6 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
 .components-color-palette__custom-color-value {
 	color: $gray-600;
-	min-height: 15px;
 
 	&--is-hex {
 		text-transform: uppercase;

From af8931fa3ee5a79b103aea74067e3abba309fd6e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 18 May 2023 15:53:38 -0400
Subject: [PATCH 19/29] Always show checkered background

---
 .../components/src/color-palette/index.tsx    | 16 ++++-----
 .../components/src/color-palette/style.scss   | 35 +++++++++++++------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 179d94c5f3dd44..316b98d08c72be 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -37,7 +37,6 @@ import {
 	extractColorNameFromCurrentValue,
 	isMultiplePaletteArray,
 	normalizeColorValue,
-	showTransparentBackground,
 } from './utils';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -252,7 +251,10 @@ function UnforwardedColorPalette(
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<VStack spacing={ 0 }>
+						<VStack
+							className="components-color-palette__custom-color-wrapper"
+							spacing={ 0 }
+						>
 							<button
 								ref={ customColorPaletteCallbackRef }
 								className="components-color-palette__custom-color-button"
@@ -260,13 +262,9 @@ function UnforwardedColorPalette(
 								aria-haspopup="true"
 								onClick={ onToggle }
 								aria-label={ customColorAccessibleLabel }
-								style={
-									showTransparentBackground( value )
-										? {}
-										: {
-												background: value,
-										  }
-								}
+								style={ {
+									background: value,
+								} }
 							/>
 							<VStack
 								className="components-color-palette__custom-color-text-wrapper"
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 65e525cc0d4426..bdc9439a190309 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,20 +1,15 @@
 $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
+.components-color-palette__custom-color-wrapper {
+	position: relative;
+	z-index: 0;
+}
 .components-color-palette__custom-color-button {
+	position: relative;
 	border: none;
 	background: none;
 	height: $grid-unit-80;
 	width: 100%;
-	// The background image creates a checkerboard pattern. Ignore rtlcss to
-	// make it work both in LTR and RTL.
-	// See https://github.com/WordPress/gutenberg/pull/42510
-	/*rtl:begin:ignore*/
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 24px 24px;
-	/*rtl:end:ignore*/
-	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
 	cursor: pointer;
 	// Show a thin outline in Windows high contrast mode.
@@ -27,6 +22,26 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 24px 24px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 24px) calc(2 * 24px);
+	}
 }
 
 .components-color-palette__custom-color-text-wrapper {

From eab5fea13f91fbf0095b31f12fb633aff60dee00 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 22 May 2023 15:44:06 -0400
Subject: [PATCH 20/29] hyphenate hex codes for assistive tech

---
 packages/components/src/color-palette/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 316b98d08c72be..98a70678dbda64 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -218,16 +218,18 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
+	const isHex = value?.startsWith( '#' );
+
 	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
 	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				displayValue
+				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
 		  )
 		: __( 'Custom color picker.' );
 
@@ -285,7 +287,7 @@ function UnforwardedColorPalette(
 										'components-color-palette__custom-color-value',
 										{
 											'components-color-palette__custom-color-value--is-hex':
-												displayValue?.startsWith( '#' ),
+												isHex,
 										}
 									) }
 									style={ { minHeight: '18px' } }

From 300cbf045d6e570e7b1364193ac81eb847fc4d3d Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 24 May 2023 06:53:03 -0400
Subject: [PATCH 21/29] snapshot updated to include hex code hyphens

---
 .../color-palette/test/__snapshots__/control.js.snap          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 486d06d7c7bc8c..2d51a3ea9b3112 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -165,14 +165,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="components-flex components-h-stack components-v-stack emotion-10 emotion-5"
+                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
                   data-wp-c16t="true"
                   data-wp-component="VStack"
                 >
                   <button
                     aria-expanded="false"
                     aria-haspopup="true"
-                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
                     class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
                   />

From a674052665c689f5841e07063ffe6c6f6850ae44 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 24 May 2023 15:36:05 -0400
Subject: [PATCH 22/29] Update unit tests

---
 .../test/__snapshots__/index.tsx.snap         |  5 +-
 .../src/color-palette/test/index.tsx          | 66 +++++++++++++++++--
 2 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
index 567abd74aeae4e..02743fc678dd18 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
@@ -186,14 +186,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       tabindex="-1"
     >
       <div
-        class="components-flex components-h-stack components-v-stack emotion-2 emotion-1"
+        class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-2 emotion-1"
         data-wp-c16t="true"
         data-wp-component="VStack"
       >
         <button
           aria-expanded="false"
           aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
           class="components-color-palette__custom-color-button"
           style="background: rgb(255, 0, 0);"
         />
@@ -213,6 +213,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
             data-wp-c16t="true"
             data-wp-component="Truncate"
+            style="min-height: 18px;"
           >
             #f00
           </span>
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 42c6d2e2eb51c3..e7e02dc319dab9 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -3,7 +3,10 @@
  */
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -20,6 +23,18 @@ function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
 
+const UnmockedColorPalette = () => {
+	const [ color, setColor ] = useState< string | undefined >( undefined );
+
+	return (
+		<ColorPalette
+			value={ color }
+			colors={ EXAMPLE_COLORS }
+			onChange={ ( newColor ) => setColor( newColor ) }
+		/>
+	);
+};
+
 describe( 'ColorPalette', () => {
 	it( 'should render a dynamic toolbar of colors', () => {
 		const onChange = jest.fn();
@@ -142,6 +157,12 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
+		// Check that custom color popover is not visible by default.
+		expect(
+			screen.queryByLabelText( 'Hex color' )
+		).not.toBeInTheDocument();
+
+		// Click the dropdown button while the dropdown is not expanded.
 		await user.click(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker/,
@@ -149,17 +170,13 @@ describe( 'ColorPalette', () => {
 			} )
 		);
 
+		// Confirm the dropdown is now expanded, and the button is still visible.
 		const dropdownButton = screen.getByRole( 'button', {
 			name: /^Custom color picker/,
 			expanded: true,
 		} );
-
 		expect( dropdownButton ).toBeVisible();
 
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
-
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
-
 		// Check that the popover with custom color input has appeared.
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
@@ -195,4 +212,41 @@ describe( 'ColorPalette', () => {
 			screen.getByRole( 'button', { name: 'Clear' } )
 		).toBeInTheDocument();
 	} );
+
+	it( 'should display the selected color name and value', async () => {
+		const user = userEvent.setup();
+
+		const { container } = render( <UnmockedColorPalette /> );
+
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+		expect(
+			// Relying on implementation details here, but it's the only way I could come up with.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			container.querySelector(
+				'.components-color-palette__custom-color-value'
+			)
+		).toHaveTextContent( '' );
+
+		// Click the first unpressed button
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /^Color:/,
+				pressed: false,
+			} )[ 0 ]
+		);
+
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+
+		// Clear the color, confirm that name and value are correctly updated
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+		expect(
+			// Relying on implementation details here, but it's the only way I could come up with.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			container.querySelector(
+				'.components-color-palette__custom-color-value'
+			)
+		).toHaveTextContent( '' );
+	} );
 } );

From 7e43311632940ff2f53428a1f7eae70f7b1377f2 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 24 May 2023 15:45:48 -0400
Subject: [PATCH 23/29] remove hardcoded `px` value for `min-height`

---
 packages/components/src/color-palette/index.tsx  | 1 -
 packages/components/src/color-palette/style.scss | 7 +++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 98a70678dbda64..2347897540f63a 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -290,7 +290,6 @@ function UnforwardedColorPalette(
 												isHex,
 										}
 									) }
-									style={ { minHeight: '18px' } }
 								>
 									{ displayValue }
 								</Truncate>
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index bdc9439a190309..a6e66888976571 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -69,4 +69,11 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	&--is-hex {
 		text-transform: uppercase;
 	}
+
+	// Add a zero-width space when this element is empty to preserve
+	// a minimum height of 1 line of text, and avoid layout jumps.
+	&:empty::after {
+		content: "\200B";
+		visibility: hidden;
+	}
 }

From 4e69db78cfe8024995a6957bf39f94c9a8674806 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 24 May 2023 15:54:11 -0400
Subject: [PATCH 24/29] update snapshots yet again

---
 .../components/color-palette/test/__snapshots__/control.js.snap  | 1 -
 .../src/color-palette/test/__snapshots__/index.tsx.snap          | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 2d51a3ea9b3112..93ff7de8807175 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -192,7 +192,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                       class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
-                      style="min-height: 18px;"
                     >
                       #f00
                     </span>
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
index 02743fc678dd18..8c7557366e37de 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
@@ -213,7 +213,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
             data-wp-c16t="true"
             data-wp-component="Truncate"
-            style="min-height: 18px;"
           >
             #f00
           </span>

From 5fbb188dddd36c0f8179f80546e5d4cc99074fab Mon Sep 17 00:00:00 2001
From: Chad Chadbourne <13856531+chad1008@users.noreply.github.com>
Date: Thu, 25 May 2023 06:07:32 -0400
Subject: [PATCH 25/29] rename new test and expose onChange

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 .../components/src/color-palette/test/index.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index e7e02dc319dab9..e019b84467c7cc 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -23,14 +23,21 @@ function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
 
-const UnmockedColorPalette = () => {
+const ControlledColorPalette = ( {
+	onChange,
+}: {
+	onChange?: ( newColor?: string ) => void;
+} ) => {
 	const [ color, setColor ] = useState< string | undefined >( undefined );
 
 	return (
 		<ColorPalette
 			value={ color }
 			colors={ EXAMPLE_COLORS }
-			onChange={ ( newColor ) => setColor( newColor ) }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
 		/>
 	);
 };
@@ -216,7 +223,7 @@ describe( 'ColorPalette', () => {
 	it( 'should display the selected color name and value', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render( <UnmockedColorPalette /> );
+		const { container } = render( <ControlledColorPalette /> );
 
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
 		expect(

From 28a81df08fb0e55137221c817c646cd06f6448ab Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 25 May 2023 07:53:09 -0400
Subject: [PATCH 26/29] apply unit test feedback

---
 .../src/color-palette/test/index.tsx          | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index e019b84467c7cc..5074e0d22e68c3 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -226,13 +226,6 @@ describe( 'ColorPalette', () => {
 		const { container } = render( <ControlledColorPalette /> );
 
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect(
-			// Relying on implementation details here, but it's the only way I could come up with.
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			container.querySelector(
-				'.components-color-palette__custom-color-value'
-			)
-		).toHaveTextContent( '' );
 
 		// Click the first unpressed button
 		await user.click(
@@ -242,10 +235,21 @@ describe( 'ColorPalette', () => {
 			} )[ 0 ]
 		);
 
+		// Confirm the correct color name, color value, and button label are used
 		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
 		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: `Custom color picker. The currently selected color is called "${
+					EXAMPLE_COLORS[ 0 ].name
+				}" and has a value of "${ EXAMPLE_COLORS[ 0 ].color
+					.split( '' )
+					.join( '-' ) }".`,
+				expanded: false,
+			} )
+		).toBeInTheDocument();
 
-		// Clear the color, confirm that name and value are correctly updated
+		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
 		expect(
@@ -255,5 +259,16 @@ describe( 'ColorPalette', () => {
 				'.components-color-palette__custom-color-value'
 			)
 		).toHaveTextContent( '' );
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].color )
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker.$/,
+			} )
+		).toBeInTheDocument();
 	} );
 } );

From 59e9492faad0a85f5e2e0ec4034d80306d2070ab Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 25 May 2023 07:58:48 -0400
Subject: [PATCH 27/29] improve color value text contrast

---
 packages/components/src/color-palette/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index a6e66888976571..2d6bc4ddc1db3d 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -64,7 +64,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 }
 
 .components-color-palette__custom-color-value {
-	color: $gray-600;
+	color: $gray-700;
 
 	&--is-hex {
 		text-transform: uppercase;

From 7435f08f2c3f37a4ff09ba84982845456a772aa5 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 25 May 2023 10:04:41 -0400
Subject: [PATCH 28/29] move CHANGELOG entry

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9b90f9207df22d..43df3cde91356f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
+
 ## 25.0.0 (2023-05-24)
 
 ### Breaking Changes
@@ -25,7 +29,6 @@
 ### Enhancements
 
 -   `Tooltip`: Update background color so tooltip boundaries are more visible in the site editor ([#50792](https://github.com/WordPress/gutenberg/pull/50792)).
--   `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
 
 ## 24.0.0 (2023-05-10)
 

From 0823d7d067fb96a45bba1d4ac679c546e678bd31 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 31 May 2023 08:17:39 -0400
Subject: [PATCH 29/29] remove duplicate check for cleared color value text

---
 packages/components/src/color-palette/test/index.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 5074e0d22e68c3..90254463ef7a76 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -223,7 +223,7 @@ describe( 'ColorPalette', () => {
 	it( 'should display the selected color name and value', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render( <ControlledColorPalette /> );
+		render( <ControlledColorPalette /> );
 
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
 
@@ -252,13 +252,6 @@ describe( 'ColorPalette', () => {
 		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect(
-			// Relying on implementation details here, but it's the only way I could come up with.
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			container.querySelector(
-				'.components-color-palette__custom-color-value'
-			)
-		).toHaveTextContent( '' );
 		expect(
 			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
 		).not.toBeInTheDocument();