Description
Come up with changes/different styles for the toggled/active styling, which currently relies on use of color
Motivation & Context
The active class (when it conveys the toggled/pressed state of a control - not required for just regular non-toggle-able controls) should have a much stronger differentiation with the non-active class for cases like button toggles, custom checkboxes/radio buttons, dropdown triggers.
The same arguably also applies to disabled controls - they need to visually be differentiated from operable/active controls, without relying just on shading/tinting (OR the shading/tinting needs to have a difference of 3:1 to the regular state).
If we're only going by a change of background, as is currently the case, the difference between the non-active and active background should be at least a ratio of 3:1 (see the second note in https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html ... which, incidentally, i wrote)
This approach (making the active style darker for dark controls, lighter for light controls) gets very limiting, as there simply aren't enough shading/tinting options for all our colours to reliably get to a 3:1 ratio, both for disabled and for active (toggled) state.
This branch explores some options. It's not meant as a mergeable PR at this point, but for initial exploration
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Checklist
-
I have read the contributing guidelines -
My code follows the code style of the project (using npm run lint) -
My change introduces changes to the documentation -
I have updated the documentation accordingly -
I have added tests to cover my changes -
All new and existing tests passed