Bug fixes to ColorPickerInput

[2metres]

User-Facing Changes
Input now can recieve and validate color strings + minor styling pass to bring into alignment with our UI

Screen.Recording.2024-01-03.at.11.24.50.am.mov

Description
Previously the input displayed in the sidebar was readonly and only clicking the swatch would let you change the color. Now the inputs and UI picker are all connected

Resolves FG-4534

[2metres]

This is less than ideal. Could use help unwravelling the useColorPickerControl hook

[snosenzo]

Why not just use:

Suggested change

	value={editedValue ? `#${editedValue.replace("#", "")}` : editedValue}
	value={editedValue.startsWith("#") ? editedValue : `#${editedValue}`}

?

Alternatively you could always strip out # when setting the editedValue in useColorPickerControl and have it as a decorator maybe?

[2metres]

So we need to return undefined when empty so using starts with doesn't work. I tried moving this into the reducer but i couldn't get it to work

[bryfox]

we need to return undefined when empty

It looks like editedValue is typed as a string, so I don't understand this bit.

I see you're also now returning displayValue (which makes sense if the intent is to offload the hex display to the calling component); that sounds to me like the value you'd want to display as a text label?