Global Styles: Use text and button background color for color indicators

WordPress · Mar 1, 2024 · d3213df · d3213df
1 parent a1070a1
commit d3213df
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -58,17 +58,34 @@ export function useStylesPreviewColors() {
 	const [ headingColor = textColor ] = useGlobalStyle(
 		'elements.h1.color.text'
 	);
+	const [ linkColor = headingColor ] = useGlobalStyle(
+		'elements.link.color.text'
+	);
+
+	const [ buttonBackgroundColor = linkColor ] = useGlobalStyle(
+		'elements.button.color.background'
+	);
 	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
 
 	const paletteColors = ( themeColors ?? [] )
 		.concat( customColors ?? [] )
 		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
+
+	const textColorObject = paletteColors.filter(
+		( { color } ) => color === textColor
+	);
+	const buttonBackgroundColorObject = paletteColors.filter(
+		( { color } ) => color === buttonBackgroundColor
+	);
+
+	const highlightedColors = textColorObject
+		.concat( buttonBackgroundColorObject )
+		.concat( paletteColors )
 		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
+			// we exclude these background color because it is already visible in the preview.
+			( { color } ) => color !== backgroundColor
 		)
 		.slice( 0, 2 );
 

diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -174,7 +174,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 								{ highlightedColors.map(
 									( { slug, color }, index ) => (
 										<motion.div
-											key={ slug }
+											key={ slug + index }
 											style={ {
 												boxShadow:
 													'inset 0 0 0 1px #0003',

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -215,7 +215,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 									{ highlightedColors.map(
 										( { slug, color }, index ) => (
 											<motion.div
-												key={ slug }
+												key={ slug + index }
 												style={ {
 													height:
 														normalizedColorSwatchSize *