ColorPalette utils: do not normalize undefined color values

packages/components/CHANGELOG.md

@@ -60,6 +60,7 @@
 ### Bug Fixes
 
 -   `TimePicker`: use ToggleGroupControl for AM/PM toggle ([#64800](https://github.com/WordPress/gutenberg/pull/64800)).
+-   `ColorPalette` utils: do not normalize undefined color values ([#64969](https://github.com/WordPress/gutenberg/pull/64969)).
 
 ### Internal
 

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

@@ -26,18 +26,37 @@ describe( 'ColorPalette: Utils', () => {
 	} );
 
 	describe( 'normalizeColorValue', () => {
-		test( 'should return the value as is if the color value is not a CSS variable', () => {
+		test( 'should return the value if the value argument is not a CSS variable', () => {
 			const element = document.createElement( 'div' );
 			expect( normalizeColorValue( '#ff0000', element ) ).toBe(
 				'#ff0000'
 			);
 		} );
-		test( 'should return the background color computed from a element if the color value is a CSS variable', () => {
+		test( 'should return the background color computed from an element if the value argument is a CSS variable', () => {
 			const element = document.createElement( 'div' );
 			element.style.backgroundColor = '#ff0000';
 			expect( normalizeColorValue( 'var(--red)', element ) ).toBe(
 				'#ff0000'
 			);
 		} );
+		test( 'should return the background color computed from an element if the value argument is a color mix', () => {
+			const element = document.createElement( 'div' );
+			element.style.backgroundColor = '#ff0000';
+			expect(
+				normalizeColorValue(
+					'color-mix(in oklab, #a71e14, white)',
+					element
+				)
+			).toBe( '#ff0000' );
+		} );
+		test( 'should return the value if the value argument is undefined', () => {
+			const element = document.createElement( 'div' );
+			expect( normalizeColorValue( undefined, element ) ).toBe(
+				undefined
+			);
+		} );
+		test( 'should return the value if the element argument is null', () => {
+			expect( normalizeColorValue( '#ff0000', null ) ).toBe( '#ff0000' );
+		} );
 	} );
 } );

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

@@ -92,9 +92,7 @@ export const normalizeColorValue = (
 	value: string | undefined,
 	element: HTMLElement | null
 ) => {
-	const valueIsSimpleColor = value ? isSimpleCSSColor( value ) : false;
-
-	if ( valueIsSimpleColor || element === null ) {
+	if ( ! value || ! element || isSimpleCSSColor( value ) ) {
 		return value;
 	}