ColorPalette: Labels do not change when CSS variables are used

[t-hamano]

Description

Related: #39386

In #39386, name and color are now displayed on the palette when a color is selected from the color palette.
It works correctly when the color has a HEX value, but the label is not rendered correctly when the color has a CSS variable.

I would expect that the label is probably not updated correctly at this point:

gutenberg/packages/components/src/color-palette/index.js

Lines 183 to 191 in 8b14921

	const buttonLabelName = useMemo(
	() =>
	extractColorNameFromCurrentValue(
	value,
	colors,
	showMultiplePalettes
	),
	[ value, colors, showMultiplePalettes ]
	);

Step-by-step reproduction instructions

On Block Theme

Define theme.json as follows:

See Code

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "red",
					"color": "var(--wp--custom--color--r)",
					"name": "Red"
				},
				{
					"slug": "green",
					"color": "var(--wp--custom--color--g)",
					"name": "Green"
				},
				{
					"slug": "blue",
					"color": "var(--wp--custom--color--b)",
					"name": "Blue"
				}
			]
		},
		"custom": {
			"color": {
				"r": "red",
				"g": "green",
				"b": "blue"
			}
		}
	}
}

On Classic Theme

Define functions.php as follows:

See Code

<?php
add_action(
	'after_setup_theme',
	function() {
		add_theme_support(
			'editor-color-palette',
			array(
				array(
					'name'  => 'Red',
					'slug'  => 'red',
					'color' => 'var(--color-red)',
				),
				array(
					'name'  => 'green',
					'slug'  => 'green',
					'color' => 'var(--color-green)',
				),
				array(
					'name'  => 'blue',
					'slug'  => 'blue',
					'color' => 'var(--color-blue)',
				),
			)
		);
	}
);

function custom_enqueue_scripts() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css'	);
	wp_add_inline_style(
		'custom-style',
		":root {
			--color-red: red;
			--color-green: green;
			--color-blue: blue;
		}"
	);
}
add_action( 'enqueue_block_editor_assets', 'custom_enqueue_scripts' );

Screenshots, screen recording, code snippet

On Block Theme

block-theme.mp4

On Classic Theme

classic-theme.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes