refactor(button): refactor CSS vars - #1030

Maybe in the description you could put "Hover, Focus and Active State Variables" so that we know which variable applies to which states?

And then add a description above this hover variable describing that it applies to focus and active for Background Color

My concern with adding that is that I haven't been adding it to other components where I'm consolidating variables, and it isn't in components that were already written that way where vars are reused and consolidated. I can just add it here, or we can go back and add it everywhere. Do you think it's worth doing? I think it's fine just to read the CSS and figure it out but maybe I'm biased :)

I do like how we have this comment up above:

  // Hover/focus/active state variables
  --pf-c-button--hover--BorderWidth: var(--pf-global--BorderWidth--md);	  --pf-c-button--hover--BorderWidth: var(--pf-global--BorderWidth--md);

Maybe the // Hover/focus/active state variables comment above is sufficient to provide devs enough of a clue that for this component --hover-- refers to hover, focus and active, and any variable further down with --hover-- could be assumed to address those states too? That's assuming that "hover" for hover/focus/active is consistent throughout the css for the component.

Is that cool with you @christiemolloy? I updated the comment for the first hover var to state that the state vars are shared and represented as a "hover" var for each button variation.

That sounds good! Ill update the issue #1036

And then since the states dont change variables, you could make a note of the fact that these variables carry over to H,F,A