Color Picker: Refine the look of "unset" color picker

[jasmussen]

Extracting from this comment, the checkerboard background currently in place for the Custom Color card indicates transparency, but it should probably lean towards indicating "unset" instead. Also:

We need to discriminate from "white" and "not set". Though perhaps that can be written in the place of the hex code.

There are the beginnings of a PR in try/polish-unset-color-indicator-further, but it isn't quite visually succesful:

It also opens the question: should the checkerboard backgroud remain in place for when a color with opacity is created?

[supernovia]

Hi! FWIW I think the checkerboard thing is confusing. I'm used to seeing that from photoshop and what not, but I'm not sure users know what to do with it. And, I was just keeping those thoughts to myself til one of our volunteers reached out with similar feedback: it's not clear what the checkerboard area is for. I'm gathering it's a preview, but would it make more sense to just use the preview we can see in the live edit area?

Also, when we put in colors for the text, background, links, link background, and then all of the custom colors and default palettes together, it gets kind of unruly. Here's what I'm seeing:

[supernovia]

Also, I've noticed when I set a color, say, for the text, the boxy area shows that as the background color with a different text color (like white). I'm not sure what that means. You can see it in the video here, which I filed for another issue. Ignore the sound and just watch for the boxes:

https://cloudup.com/cJD1MDyAEBZ

[jasmussen]

As a small update, things now look like this in trunk:

[supernovia]

What if instead of trying to indicate unset, it just said "Theme Default" or something, and/or showed that color?

[jasmussen]

Unset does seem like a bit of a complicated term. But it still feels important to indicate that no color is applied, it literally has not been defined. The checkerboard indicating transparency is also misleading since the block doesn't necessarily have a transparent background if otherwise is provided by theme CSS.

So we need a visual treatment that indicates that no user choice has yet been made. "Not set" doesn't seem better:

A strike-through also doesn't feel very clear, it adds noise and looks like an error:

This needs a bit more thought.

[jasmussen]

I'm going to close this one for now. The color in the itemgroup does look unset, even if the color in the expanded color panel looks transparent. But the color panel is undergoing its own iterations, so this one seems like it's drifting out of date.