[Tab] Add support for tones

[infernova]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Expand the sgds-tab visual library by implementing tone variants. I referenced the tones used by sgds-spinner to get a rough gauge for which tone would fit SGDS' current visual vocabulary.

New Tones

Neutral

Inverse

Fixed Dark

Fixed Light

Code Implementation

The proposed code implementation is quite complex as the CSS has to account for two variants as well as hover/focus states so it would be easier to review if I just submitted a PR

Motivation and context

In Product Portal currently, we have a need to implement sgds-tab using a fixed-dark/inverse tone but that is not implemented so we substituted sgds-tab with sgds-button. However, sgds-button has some undesired CSS interactions when users click on the tab.

Current implementation using sgds-button

CSS issue on click

[clukhei]

I think this should be a new component called segmented button instead of tabs ? @anzteng