Design: Restyle classifier dark mode buttons

[seanmiller26]

Package

Is your feature request related to a problem? Please describe.

We've had feedback from testing suggesting that the buttons do not stand out enough in dark mode.

Describe the solution you'd like

Current FEM usage:

Restyle the buttons to have more contrast against the background and better inform users when they are either active or inactive. The active buttons are now filled with a lighter grey than the background. The main question is how much of a higher grey value should we use?

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[seanmiller26]

This brings up a good point about how we use opactity on the inactive buttons. When inspecting it shows the font and border color as white, but it clearly is not.

@mcbouslog how does this work, exactly?

[mcbouslog]

The task nav buttons are defined in the classifier library (DoneAndTalk component link) which use the react-components library Primary Button. The Primary Button has custom themes per color (i.e. gold, blue, green, and teal - link to files here) and I think if we want to change the disabled styling we'd do so in the color themes, like for blue here.

Here's the related storybook - Primary Button storybook.

[seanmiller26]

A quick accessibility check finds that according to the WCAG color and contrast requirements:

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

And since we are already are using the disabled mouse icon on hover and a status label of 'disabled,' we are covering all of the other requirements.

[mcbouslog]

I didn't know such cases have no contrast requirements, that's interesting and good to know! Thanks and sounds good to me.