feat(Button): consume Penta tokens and update examples by adamviktora · Pull Request #9934 · patternfly/patternfly-react

hey @jeff-phillips-18! With v6/penta, we introduced tokens (global vars) for colors and borders and stuff that we're currently calling "clicked" (you can see here, just look for --clicked) as a sort of catch-all for the variation of a token when something is selected, active, expanded/open, etc. This state in the button isn't terribly prescriptive, and could be used for any of those cases.

One issue with calling it "active" is we have modifiers classes for certain things to apply the hover/focus/active styling when the thing isn't actually hovered/focused/active. Eg, in a typeahead select, the text input in the toggle has actual focus, so when you're using the keyboard to navigate the open menu items, we apply .pf-m-focus to force the :focus styling on those items to mimic tabbing through menu items with actual browser focus. We're trying to reserve the active/focus/etc naming for when that prop/class represents that particular state, and are calling something "clicked" to represent the catch-all states.

Screenshot 2024-01-05 at 12 37 03 PM

Does that make sense or do you think we should reconsider anything? Naming things is hard, so your feedback is much appreciated!