New Component: Color Picker

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

There are MULTIPLE ways to tackle this, but the main thing is the color input does not yet have great cross-browser support:
https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/

As such, we should provide a solution to work around this. In addition to providing this like a standard component, we would have immediate use for it on the Theme Generator for hex color values.

A few suggestions:

• It must support hex colors, if nothing else
• Ideally it would be great to support all color values - hex, rgb, rgba, hsl, etc
• We might can use a color input within the component, similar to a Slide Toggle uses checkbox
• UI should support embed directly on the page, as well as Menu popups (similar to the native input)

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

As usual the Mantine version should provide great inspiration for the feature set:
https://mantine.dev/core/color-picker/

[ghost]

Are you thinking something like:
https://vuetifyjs.com/en/components/color-pickers/#examples

Or something like:
https://element-plus.org/en-US/component/color-picker.html#alpha

Or maybe one of these:
https://casesandberg.github.io/react-color/

Let me know your thoughts, I think I would enjoy working on this

[ghost]

Just my two cents here, the one from vuetify, and the chrome one from react color seem to be the best by far in terms of looks and functionality.

[endigo9740]

Rather than getting too creative here, I've opted for stying the native color input as part of the forms.css element styles. Vendor specific styles exist to help control the styling on these, so I was able to provide something pretty nice by default. This responds to the theme rounded-token setting.

Before vs After: