Custom color picker

[hitaspdotnet]

Description

Custom Color Picker

What is the purpose of this pull request?

• New feature
• Documentation update
• Bug fix
• Refactor
• Release
• Other

[drfarrell]

I put in a number of style changes to the color-picker to generally tighten the UI and make it feel more on-brand.

A couple of larger comments.

1. HEX code values are generally preferred vs RGB and HSL – we'll need to accommodate the different input styles here like how Figma does. That probably means using a different input style depending on how many inputs you need. Some examples:

2. Style generator feature
It seems like when you select an element, you also render a 50-950 color spread (very cool) which is useful for generating palettes, but perhaps not for being able to select colors along the 50-950 spectrum as fixed values.

I'm not sure if @hitaspdotnet you were planning on using the color spectrum generator in the lower left corner or what your plans were for that, but I think the goal with having the tokens below the custom color-picker would be to make it easy for the user to select from a pre-defined palette, more-so than use the color picker to define that palette on the right side. I know we're still working on this, just writing it down in case you had a plan.

The goal for the color swatches below the custom color picker would be for them to be the available global-level Tailwind tokens from the codebase.

3. Token name in color input
When a token is selected, it would be nice to use that token-name in the color input on the properties panel, not necessarily the hard-coded value if it isn't custom.

This can be a separate PR if we'd like.

[Kitenite]

Looks and works great! Baller