Checkbox tick colour wrong in many themes

[Kevin Broadey]

Go to ​http://jqueryui.com/themeroller, scroll down to the Controlgroup sample and click on the "Insurance" checkbox. The tick comes and goes in black as you click, which is what you'd expect. (Though, to be really picky, I'd want to see it turn grey on the button-down event before going blank on button-up, but I digress...)

Now use the Gallery to try different themes. In some cases you can't see the tick because its in the same colour as the background. For example...

UI lightness: icon background is a dark yellow and the tick cannot be seen

UI darkness: tick is barely-visible grey on white, and changes to white-on-white on hover. Turns black on button-down in transition from ticked to unticked.

Start: barely-visible blue on white, changing to very visible blue on white on hover.

Le Frog: white-on-white at all times

Dark Hive: barely-visible grey-on-white, changing to white-on-white on hover. Strong black on button-down on transition from ticked to unticked.

At this point I stopped checking!

Tested on a MacBook Pro 2016 running macOS Sierra 10.12.3. Google Chrome 56.0.2924.87 Firefox 51.0.1 Safari 10.0.3

[Kevin Broadey]

Experimenting with the Themeroller editor:-

1. The background of the "tick" icon box is set by Clickable: active state > text.
2. The hover colour for the tick is set by Clickable: hover state > icon.
3. The tick colour on button-down when transitioning from ticked to unticked is set by "Clickable: active state" icon.
4. The normal tick colour is set by "Clickable: default state" icon.

The fundamental flaw is in using the active text colour for the icon box background. This is almost always going to fail in themes where the background colour is darker than the text colour. If you look at the Button examples for the "UI darkness theme" then you'll see what I mean: the button background is dark (set by Clickable: default state > background) so the text and icon (Clickable: default state > text and > icon respectively, which seems eminently reasonable) is light. However, Clickable: active state: background is also dark so Clickable: active state: text has to be light, making it the wrong choice for the tick's background.

I think the background needs to be set from Clickable: active state > border. This would make it consistent with what you're doing with radio buttons.

[Kevin Broadey]

No. Setting the background colour is the wrong fix. The tick needs to be in the Clickable: active state colour, not the default state colour. The HTML for the checkboxradio checkbox item is this. Note that we have ui-button and ui-state-active in the class list for <label> while ui-icon is in the first enclosed <span>.

<label for="messages-totems-newsfeed" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"></span>
<span class="ui-checkboxradio-icon-space"> </span>
Newsfeed
</label>

Now look at the jquery-ui.css file from themeroller. It contains this:-

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
        background-image: url("images/ui-icons_222222_256x240.png");
}
...
.ui-button .ui-icon {
        background-image: url("images/ui-icons_cccccc_256x240.png");
}

The second of these rules is firing because it matches as closely as ".ui-state-active .ui-icon" but is appears later. The ".ui-button:active .ui-icon" does not fire because the ":active" pseudo-class isn't present. The correct fix is to use:-

.ui-state-active .ui-icon,
.ui-button.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
        background-image: url("images/ui-icons_222222_256x240.png");
}

This will sort out any other non-button elements that use .ui-button styling.

[Kevin Broadey]

Demonstration of bug and fix:-

​https://jsfiddle.net/kmbro/yo2991ut/

[Kevin Broadey]

Looking for other uses of .ui-button:active, this looks suspicious:-

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
        border: 1px solid #e86838;
        background: #d85828 url("images/ui-bg_inset-soft_30_d85828_1x100.png") 50% 50% repeat-x;
        font-weight: bold;
        color: #ffffff;
}

Do we need .ui-button .ui-state-active in the selector list too?

[Scott González]

Duplicate of #15085.