ColorPalette: Ensure text label contrast checking works with CSS variables

packages/components/CHANGELOG.md

@@ -11,6 +11,7 @@
 -   `Dropdown`: deprecate `position`  prop, use `popoverProps` instead ([46865](https://github.com/WordPress/gutenberg/pull/46865)).
 -   `Button`: improve padding for buttons with icon and text. ([46764](https://github.com/WordPress/gutenberg/pull/46764)).
 -   `ColorPalette`: Use computed color when css variable is passed to `ColorPicker` ([47181](https://github.com/WordPress/gutenberg/pull/47181)).
+-   `ColorPalette`: ensure text label contrast checking works with CSS variables ([#47373](https://github.com/WordPress/gutenberg/pull/47373)).
 
 ### Internal
 

packages/components/src/color-palette/index.tsx

@@ -5,12 +5,19 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import mixPlugin from 'colord/plugins/mix';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useRef, useMemo, forwardRef } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	forwardRef,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,12 +42,13 @@ import type { WordPressComponentProps } from '../ui/context';
 import type { DropdownProps } from '../dropdown/types';
 import {
 	extractColorNameFromCurrentValue,
+	getCompositeBackgroundColor,
 	isMultiplePaletteArray,
 	normalizeColorValue,
 	showTransparentBackground,
 } from './utils';
 
-extend( [ namesPlugin, a11yPlugin ] );
+extend( [ namesPlugin, a11yPlugin, mixPlugin ] );
 
 function SinglePalette( {
 	className,
@@ -185,8 +193,21 @@ function UnforwardedColorPalette(
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = props;
+	const [ normalizedColorValue, setNormalizedColorValue ] = useState( value );
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
+	const customColorPaletteCallbackRef = useCallback(
+		( ref: HTMLElement | null ) => {
+			if ( ref ) {
+				customColorPaletteRef.current = ref;
+				setNormalizedColorValue(
+					normalizeColorValue( value, customColorPaletteRef )
+				);
+			}
+		},
+		[ value ]
+	);
+
 	const hasMultipleColorOrigins = isMultiplePaletteArray( colors );
 	const buttonLabelName = useMemo(
 		() =>
@@ -201,15 +222,18 @@ function UnforwardedColorPalette(
 	const renderCustomColorPicker = () => (
 		<DropdownContentWrapper paddingSize="none">
 			<ColorPicker
-				color={ normalizeColorValue( value, customColorPaletteRef ) }
+				color={ normalizedColorValue }
 				onChange={ ( color ) => onChange( color ) }
 				enableAlpha={ enableAlpha }
 			/>
 		</DropdownContentWrapper>
 	);
 
-	const colordColor = colord( value ?? '' );
-
+	const colordColor = colord( normalizedColorValue ?? '' );
+	const compositeColor = getCompositeBackgroundColor(
+		colord( '#fff' ),
+		colordColor
+	);
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
 		: value ?? '';
@@ -246,7 +270,7 @@ function UnforwardedColorPalette(
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Flex
 							as={ 'button' }
-							ref={ customColorPaletteRef }
+							ref={ customColorPaletteCallbackRef }
 							justify="space-between"
 							align="flex-start"
 							className="components-color-palette__custom-color"
@@ -260,8 +284,10 @@ function UnforwardedColorPalette(
 									: {
 											background: value,
 											color:
-												colordColor.contrast() >
-												colordColor.contrast( '#000' )
+												compositeColor.contrast() >
+												compositeColor.contrast(
+													'#000'
+												)
 													? '#fff'
 													: '#000',
 									  }

packages/components/src/color-palette/utils.ts

@@ -2,9 +2,11 @@
  * External dependencies
  */
 import type { RefObject } from 'react';
+import type { Colord } from 'colord';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import mixPlugin from 'colord/plugins/mix';
 
 /**
  * WordPress dependencies
@@ -16,7 +18,7 @@ import { __ } from '@wordpress/i18n';
  */
 import type { ColorObject, ColorPaletteProps, PaletteObject } from './types';
 
-extend( [ namesPlugin, a11yPlugin ] );
+extend( [ namesPlugin, a11yPlugin, mixPlugin ] );
 
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
@@ -96,3 +98,14 @@ export const normalizeColorValue = (
 		? colord( computedBackgroundColor ).toHex()
 		: value;
 };
+
+// Composite with background color behind when the front background color is transparent
+// to get the actual background color.
+export const getCompositeBackgroundColor = (
+	behindColor: Colord,
+	frontColor: Colord
+) => {
+	return frontColor.alpha() < 1
+		? behindColor.mix( frontColor.alpha( 1 ), frontColor.alpha() )
+		: frontColor;
+};