Tabs: update styling to more closely match previous implementation

[chad1008]

Replaces #57121

What?

Updates the styling on Tabs to match the legacy TabPanel component

Why?

To avoid being overly opinionated, Tabs is set up to render a vanilla button element, allowing consumers to opt for a Button component if they wish, via the render prop.

This caused a few styles to be lost, such as the hover color and the alignment of the text on tabs when the tab is wider than its contents.

How?

Add the hover color and necessary layout attributes directly to the default tab element.

Testing Instructions

1. Launch Storybook
2. Add a flex-grow:1 style to each of the Tabs.Tab components in the Default story (making them wide enough for text alignment to be noticeable)
3. Confirm that the correct accent color is applied to the text when the tab is hovered
4. Confirm that the text is properly left-aligned

[ciampo]

Pinging @WordPress/gutenberg-design folks specifically about the text aligning — should we align text in the tab buttons to the left by default (like we do on the legacy TabPanel), or should we keep the text center aligned (like currently on Tabs) ?

[chad1008]

should we align text in the tab buttons to the left by default (like we do on the legacy TabPanel), or should we keep the text center aligned (like currently on Tabs) ?

Throwing out one additional wrinkle I've just come across:

If we decide we want center aligned text on tabs, we should consider how that would look on a vertically oriented tablist, like the one we currently render in the Editor Preferences Modal. I kind of like the centered text on horizontal tabs, but I don't think it works as well vertically. I'm glad we have brilliant design experts to make these calls 😆

[jasmussen]

folks specifically about the text aligning — should we align text in the tab buttons to the left by default (like we do on the legacy TabPanel), or should we keep the text center aligned (like currently on Tabs) ?

I'd left-align still. It's intentional for here:

[ciampo]

🚀