[alpha] Active button states

[PKulkoRaccoonGang]

In the alpha version, we have a corresponding design token for each button state. At the moment, you can observe the problem associated with the active state of the buttons.

Tasks

Beta Give feedback

1. Fix design tokens for button active state
2. Make sure all other states (focus, hover, disable) work properly

[PKulkoRaccoonGang]

In the current style implementation for the Button components, we have the following structure for the OpenEdx theme:

.btn-primary {
   --pgn-btn-color: var(--pgn-color-btn-text-primary);
   --pgn-btn-bg: var(--pgn-color-btn-bg-primary);
   --pgn-btn-border-color: var(--pgn-color-btn-border-primary);
   --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-primary);
   --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-primary);
   --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-primary);
   --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-primary);
   --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-primary);
   --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-primary);
   --pgn-btn-active-color: var(--pgn-color-btn-active-text-primary);
   --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-primary);
   --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-primary);
   --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-primary);
   --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-primary);
   --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-primary);
   --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-primary);

   box-shadow: var(--pgn-elevation-btn-box-shadow-base);
}

The above CSS structure has separate design tokens for each of the states (hover, focus, active). The states are not combined (there are no focus-hover or active-hover options). For example, the behavior of a standard hover is the same as a focus hover.

While investigating problems with the Button component in the Brand OpenEdx theme, I noticed a different implementation of the "state logic" that is present in Buttons in the OpenEdx theme. For example, a button with an outline-brand variant has a hover state (which is displayed as a red background) and also a hover state when using focus (the background of the outline-brand button does not change and is always red).
These features of Button mapping in the OpenEdx and Brand OpenEdx themes conflict with the tokens design structure, the idea of which is to override existing variables (OpenEdx themes).
Based on the previous arguments, I propose to unify the logic of button states between OpenEdx and Brand OpenEdx themes.

@adamstankiewicz what do you think?

[PKulkoRaccoonGang]

PR: edx/brand-edx.org#75