Vertical ATabs using incorrect hover and dark theme colors

[sabrinamokerji]

Hover state

When I look at the Magnetic components, they don't actually have a state with the side border gray in light theme like magna-react is using. The hover state shows the side border to use a lighter shade of blue, along with the text using this same color.

https://magnetic.cisco.com/0a43ab5cd/p/89dccd-tab/b/4152be

https://www.figma.com/file/oVZWatImEIbl1c8sjdGxi0/branch/yU3qYkj6T2kfN4XYtUkEeD/%F0%9F%A7%B2--Magnetic-Design-Library?node-id=5259%3A38450&t=zahj6Vlx6kJKoqYX-0

Dark theme colors

Magnetic has the active tab styled in blue in dark theme, but magna shows it in light gray:

https://www.figma.com/file/oVZWatImEIbl1c8sjdGxi0/branch/yU3qYkj6T2kfN4XYtUkEeD/%F0%9F%A7%B2--Magnetic-Design-Library?node-id=33305%3A352429&t=ekz0nyiAsgaSC86N-0

Magnetic:

Magna-react:

Expected behavior

~- The selected state should be applied as soon as the user clicks the tab. They shouldn't have to double-click.~

• The hover state styling should also have a lighter blue border instead of gray.
• Dark theme colors should match Magnetic.

Environment (please complete the following information):

Version: 1.0.0-beta.25

Additional context

If it helps, here is the commit I made to switch from AStepper to ATabs - https://github.com/advthreat/incident-manager/commit/34b30f486d91d16d7ff04c44bbd738db482e8bda

Staging branch: https://securex-ui-incidents-int-git-127-response-ui.securex-preview.app/incidents/incident-57652431-59b2-4642-acd8-6879db32b224/response

[sabrinamokerji]

@rwharrisjr It looks like my typo with tabkey needing to be tabKey fixed the weird "sometimes active" state (https://github.com/advthreat/incident-manager/pull/400#pullrequestreview-1328832942). So this issue should only still concern the hover and dark theme styles 👍

[rwharrisjr]

The dark theme appears to be correct, blue when the tab is selected, and gray on hover From the figma, the hover color is:

Adjusting the light theme to make light blue on hover.

[sabrinamokerji]

@rwharrisjr I meant that the active text color in dark theme is incorrect, not the border. The active text color is supposed to be the same blue as the border in dark theme, but magna leaves it gray