As part of the work that's been going on with both the new editor styling #18667 and also global styles #19255 #19611, the idea of iterating the color picker has come about. I thought it might be good to pull out that element and bring some ideas to the table to iterate.

Why change it?

Our color picker takes up a lot of interface space right now. This can really produce visual density if we have more than one. Another problem with our current implementation is browseability, it's harder than should be to see what is the default colour. As things grow, it could be great to explore whether what we have today works or we can review.

I have been observing some explorations in the block interface work that really can be brought back into the color picker throughout, so decided to explore just that.

It's worth saying these are just initial sketches and ideas over final mocks, let's have a discussion first before diving into that.

Pill pickers

The start of the color interface in my latest mocks for #19255 show this pill brought in from explorations over the new interface.

Above you can see a few states, with text and with an accordion.

Color picker

The actual color picker activates on clicking the color and by default shows the theme colors in my explorations:

If you click custom, then you get to explore deeper.

Notes

This assumes some new visual language and is based heavily on the PR work in #19344 so please view that with it in mind. The underlying patterns can be iterated on should that be needed as styling comes in.

At this point, I would love feedback as to if this feels good to explore and go further? I would also love to know what technical limits we have if any.