From 2ff0749d5d2d4734a83fc89abc13732a2e180c91 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 13 Jan 2022 23:01:45 +0000
Subject: [PATCH] Add: Hoover and Selected states to the palette editor.

---
 packages/components/src/palette-edit/index.js  | 10 +++++++++-
 packages/components/src/palette-edit/styles.js |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index 0c4cbf88f6181c..add171b7ed1438 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -39,6 +39,7 @@ import {
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { COLORS } from '../utils';
 
 const DEFAULT_COLOR = '#000';
 
@@ -79,7 +80,14 @@ function Option( {
 		<PaletteItem
 			as="div"
 			onClick={ onStartEditing }
-			{ ...( isEditing ? focusOutsideProps : {} ) }
+			{ ...( isEditing
+				? {
+						...focusOutsideProps,
+						style: {
+							border: `1px solid ${ COLORS.blue.wordpress[ 700 ] }`,
+						},
+				  }
+				: { style: { cursor: 'pointer' } } ) }
 		>
 			<HStack justify="flex-start">
 				<FlexItem>
diff --git a/packages/components/src/palette-edit/styles.js b/packages/components/src/palette-edit/styles.js
index a04991da03a686..27caf83be0319e 100644
--- a/packages/components/src/palette-edit/styles.js
+++ b/packages/components/src/palette-edit/styles.js
@@ -30,7 +30,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.controlBorderRadius }};
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -52,6 +52,9 @@ export const NameContainer = styled.div`
 	margin-right: ${ space( 2 ) };
 	white-space: nowrap;
 	overflow: hidden;
+	${ PaletteItem }:hover & {
+		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+	}
 `;
 
 export const PaletteHeading = styled( Heading )`