Use function to get the composite background color

Author: t-hamano

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

@@ -43,6 +43,7 @@ import type { WordPressComponentProps } from '../ui/context';
 import type { DropdownProps } from '../dropdown/types';
 import {
 	extractColorNameFromCurrentValue,
+	getCompositeBackgroundColor,
 	isMultiplePaletteArray,
 	normalizeColorValue,
 	showTransparentBackground,
@@ -227,14 +228,10 @@ function UnforwardedColorPalette(
 	);
 
 	const colordColor = colord( normalizedColorValue ?? '' );
-	const mixedColor =
-		colordColor.alpha() < 1
-			? colord( '#fff' ).mix(
-					colordColor.alpha( 1 ),
-					colordColor.alpha()
-			  )
-			: colordColor;
-
+	const compositeColor = getCompositeBackgroundColor(
+		colord( '#fff' ),
+		colordColor
+	);
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
 		: value ?? '';
@@ -285,8 +282,10 @@ function UnforwardedColorPalette(
 									: {
 											background: value,
 											color:
-												mixedColor.contrast() >
-												mixedColor.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;
+};