Implement clickable color swatches to copy color props to clipboard

[Brian-Pob]

Closes #467

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[argyleink]

there's a few nits in there, like removing console logs or commented out stuff. all in all this is super clean!

the color conversions are a bit noisy and there's good color libs, but i think it's totally fine for this to have it's own functions in place. IF you wanted, no pressure here, to pull in say colorjs to do the conversion work, it'd also be cool to add a couple other color functions to the options: oklch and p3 (rounded 1 or 2 decimal places) as more modern syntax offerings.

nice tooltip solution 👍🏻
would have been fun to use [popover], but needs a little bit better browser support (it's like about to drop in FF), and I dont think this use case really necessitates a rewrite to use it (:top-layer).

just a few little things and i think this is g2g. thanks a bunch, folks will love it!

[argyleink]

this is a good moment to leverage event bubbling, for 1 listener instead of 1 on each swatch!? down to refactor it a bit? shouldnt effect the rest of the code, mostly removes this loop and adds a click guard for clicks on other stuff in the parent. thoughts? 😅

[Brian-Pob]

I would be down to implement it. I'll brush up on event bubbling and how to implement it properly.

[argyleink]

i dont think this needs a refactor, this is more of a comment:
I personally would have used a

and for these 2 , which then would make listening for user inputs only 1 listener on each fieldset and the added bonus you can disable a fieldset which disables the children. slightly simpler to manage i think, but would need some css updates to remove the styling of the html elements.

all in all, what you have here is accessible to keyboard and screen reader, so no refactor needed 👍🏻

[argyleink]