Bad UX for Checkbox Button on mobile browser

[Juchar]

Bug description:

Using the checkbox buttons on a mobile browser (Chrome Browser 67.0.3396.87 on Android) if you uncheck/check a button it will not show the proper styling as it seems to be still hovered.

This is resulting in really bad UX (imho) due to the fact that for the overall user the button still seems to be unchecked (this is especially annoying for outlined buttons and button groups).

You can see the difference between checked and unchecked in the below screenshots on the checkbox button (or at least you can see that there is nearly no difference):

Reproduction:

You can check this by simply accessing the demo here using a mobile browser:
http://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

Version of Bootstrap:

Bootstrap: 4.1.0

[mdo]

@ffoodd Does this roll up into you color efforts? Not sure how much I'd change here at this point right now.

[ffoodd]

@mdo Not really. Here it concerns our button-variant() mixin, which only darken() / lighten() the background for active state based on the theme color.

I implemented the darken VS lighten thing to ensure contrasts are improved (and I can see it hasn't been backported to v4, should it?), but the color itself depends on the amount of difference (currently 10%).

Two ideas here:

1. either we increase the amount of difference,
2. or we use our tints and shades instead of lighten() and darken() (which I think was part of Colors rewrite #30622 by @MartijnCuppens).

[mdo]

Thoughts on closing this out as a stale won't fix?

We've improved some of the coloring (especially in v5), but honestly the best approach here would be visible indicators other than color changes (either showing the form control or adding some inline images). I wouldn't be opposed to see a PR from someone to do the latter, but I don't see much of a need to push this forward.