USWDS - Bug: Button Specificity Problem about uswds

[mahoneycm]

Hello there @justingiovanetti ! As long as I understand correctly, I am unable to reproduce this bug.

After changing the background color of usa-button, I was able to add a variant class and see the variant's color take hold.

I wanted to note that there is no primary variant as suggested in your instructions. The base usa-button will use the primary color token. If you were to add say, usa-button--secondary to use your project's secondary color token, you should see the update as expected.

While we're on the topic of theme tokens, you can update the value of tokens like primary and secondary in your project theme settings by updating the token value. After updating these values the button variants will reflect your chosen colors without having to write any custom scss! You can find a list of the color tokens available to you and their default values on our Settings page.

If I've misunderstood or if you have any further questions, just let me know! Thanks.

[justingiovanetti]

@mahoneycm thank you for the response. My apologies for the reference to "primary." As you are correct, it's not a class.

The above aside, my initial report still stands. To help clarify the problem, I've included an example demo below. The demo demonstrates (1) the problem, (2) various workarounds, and (3) a proper solution.
https://justfront-end.github.io/USWDS-Button-Issue/USWDS-Button-Issue.html

In addition to the demo, the following is a further elaboration.

“After changing the background color of usa-button, I was able to add a variant class and see the variant's color take hold.”

That’s not the problem.

By variant, I’m referring to the provided variations of the button. Whether it’s at the preprocessed “tokens” level or talking about the additionally applied classes, it’s a variation. The wiring of the base button to use secondary, warm accent, or cool accent as a token is just wiring details, it’s not the concern.

It’s also not an issue of writing custom scss.

The problem is with the specificity of the CSS.

We shouldn’t need to set up a build system, run Node, set up an npm/yarn managed project, run Sass, and the numerous additional steps to change a button color.

To be clear, it’s not about how quickly one can get all that setup, it’s about the quality of the produced css. The current implementation produces a brittle structure.

https://justfront-end.github.io/USWDS-Button-Issue/USWDS-Button-Issue.html