ColorPalette: Improve color name readability

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -78,45 +78,52 @@ 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-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -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: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-10>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-13 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-12 {
+  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;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -157,30 +164,39 @@ 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-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="Flex"
-                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+                  data-wp-component="VStack"
                 >
-                  <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 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"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    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);"
+                  />
+                  <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>
-                </button>
+                    <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
                 class="components-circular-option-picker"

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

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';
@@ -37,7 +37,6 @@ import {
 	extractColorNameFromCurrentValue,
 	isMultiplePaletteArray,
 	normalizeColorValue,
-	showTransparentBackground,
 } from './utils';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -219,21 +218,18 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
+	const isHex = value?.startsWith( '#' );
 
-	const colordColor = colord( normalizedColorValue ?? '' );
-
-	const valueWithoutLeadingHash = value?.startsWith( '#' )
-		? value.substring( 1 )
-		: value ?? '';
-
-	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+	// 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,
-				valueWithoutLeadingHash
+				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
 		  )
 		: __( 'Custom color picker.' );
 
@@ -257,43 +253,48 @@ function UnforwardedColorPalette(
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					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',
-									  }
-							}
+						<VStack
+							className="components-color-palette__custom-color-wrapper"
+							spacing={ 0 }
 						>
-							<FlexItem
-								isBlock
-								as={ Truncate }
-								className="components-color-palette__custom-color-name"
-							>
-								{ buttonLabelName }
-							</FlexItem>
-							<FlexItem
-								as="span"
-								className="components-color-palette__custom-color-value"
+							<button
+								ref={ customColorPaletteCallbackRef }
+								className="components-color-palette__custom-color-button"
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								aria-label={ customColorAccessibleLabel }
+								style={ {
+									background: value,
+								} }
+							/>
+							<VStack
+								className="components-color-palette__custom-color-text-wrapper"
+								spacing={ 0.5 }
 							>
-								{ valueWithoutLeadingHash }
-							</FlexItem>
-						</Flex>
+								<Truncate className="components-color-palette__custom-color-name">
+									{ value
+										? 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',
+										{
+											'components-color-palette__custom-color-value--is-hex':
+												isHex,
+										}
+									) }
+								>
+									{ displayValue }
+								</Truncate>
+							</VStack>
+						</VStack>
 					) }
 				/>
 			) }

packages/components/src/color-palette/style.scss

@@ -1,41 +1,79 @@
-.components-color-palette__custom-color {
+$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;
-	border-radius: $radius-block-ui;
 	height: $grid-unit-80;
-	padding: $grid-unit-15;
-	font-family: inherit;
 	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;
-	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;
+	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;
 	}
+
+	&::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 {
+	padding: $grid-unit-15 $grid-unit-20;
+	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	position: relative;
+	font-size: $default-font-size;
+
+	// 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 {
-	text-align: left;
+	color: $components-color-foreground;
+	margin: 0 $border-width;
 }
 
 .components-color-palette__custom-color-value {
-	margin-left: $grid-unit-20;
-	text-transform: uppercase;
+	color: $gray-700;
+
+	&--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;
+	}
 }