Button component's transparent variant active state is not visible.

[satyamyadav]

Description

On transparent button (Button with appearance="transparent") when we click and then if we move out from button the background remains same so the active and focus states could not be differentiated.

Steps to reproduce

• Open the example http://localhost:5000/?path=/docs/components-button-transparent-button--transparent-button .
• Click on the Button (Re-evaluate).
• Observe the background colour.

Expected result

• When the Button is in Focus + Active state the background should be of Active state and not focus state.
• Background should be of colour var(--secondary) when we click and hold mouse on the button or apply active and focus states from developer console.

Actual result

• Background color becomes rgba(229, 229, 229, 0.2) .

Suggested solution

• Changing the sequence of the definition of the states in css can fix it as active will be later one and will be applied while both active and focus states are enabled. https://github.com/innovaccer/design-system/blob/master/css/src/components/button.css#L198
• One more reliable solution will be to add the style (background) for the combination of active and focus states.

[indremak]

Hi, I can take a look at it. Could you assign me?