chore: checkbox light mode

[deboer-tim]

What does this PR do?

Add entries to the color registry for checkbox, with support for light mode. Light mode colors are the same for now since I couldn't find a precedent, except for unchecked.

Took this opportunity to add focus (hover) states since they were missing and didn't match other UI elements. For unchecked the outline becomes purple, for all other states it's one step lighter for dark mode and darker for light mode.

Screenshot / video of UI

Screen.Recording.2024-05-10.at.11.44.10.AM.mov

What issues does this PR fix or reference?

Part of #4914.

How to test this PR?

View checkboxes on main pages; tests added.

• Tests are covering the bug fix or the new feature

[ekidneyrh]

Spent some time on this this morning. I was having a look at the contrast and was thinking maybe it would be a good idea to simplify the colours and have just two main colours - one for hover and one for the default. By using less colours the hover stands out some more as we can lighten it two steps without messing the contrast. Not all the colours previous could be lightened without the contrast going below an AA rating.

I also changed the disable colour to match the +/- button here: #6929 (comment)

Checkbox.pdf

WDYT?

[deboer-tim]

I really like the simplification (especially getting rid of dusty purple) and have only looked at dark mode so far, but in context I find the colors too bright and somewhat distracting. The purple are lighter than the purples we use in most places, and disabled looks too close to a stop button.

I'm not a designer, but I tried playing with these pulling colors from elsewhere, and he's what I came up with.

Original:

Proposed:

Proposed with darker colors:
purple 500/600 to match Buttons (could be one step brighter IMHO), unchecked gray-400 (same as start/stop/delete buttons), and charcoal-300 (just matching what was there before).

[ekidneyrh]

Just checking the contrast, I was trying to use AAA rating colours but AA can suffice. I think purple 400 and 500 would work better as purple-600 is too low, and I would stick with the gray-700 for the disabled tho just bc the charcoal-300 is a fail.

I think the disabled checkbox in context with the other checkboxes on the page would be a signifier to the user what it is. If it's the only one on the page, the hover with the X would let them know it's not selectable. If it's an issue you're concerned with, we could change that box to a different disabled one, such as:

We could also just swap the unchecked focused and unfocused colours could make it less distracting.

[deboer-tim]

Updated with these colors. My preference would still be a darker disabled color (I think a non-AAA would actually be a good thing here, because we don't want disabled to stand out as much as the ones you can select), but if you can approve lets merge and we can respond later if there is feedback.