Checkbox tick colour wrong in many themes

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.

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>.

#!text/html
<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.

Demonstration of bug and fix:-

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

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?

Duplicate of #15085.