Tab Design Changes

[scurker]

A series of design changes are needed for the Tab and TabPanel components in order to come into alignment with the updated designs.

Light Mode Screenshots

(from top to bottom) inert, hover, and focus states  Horizontal layout  Vertical layout  Please note there is a numeric badge indicator displayed in the designs, that is not ready to implemented yet.

Dark Mode Screenshot (TBD)

No screenshot available

Implementation Details

The overall padding on the tabs has changed. The <Tab thin> size should have 8px top/bottom and 16px left/right. The non-thin size should have all around 16px padding.

• Remove outer borders around Tab component
• Light mode: Tab list bottom border should remain as --gray-20
• Dark mode: Tab list bottom border should remain as --accent-dark
• Shift overline border to an underline border (in horizontal variant)
• Remove border from TabPanel component and update the padding to the tab panel:
  • All of the "tab panel" sizes should be able to be overridden with a variable, but otherwise default to the below values
  • Tab Orientation Vertical: --space-smaller Top, --space-largest on all other sides
  • Tab Orientation Horizontal: --space-small left/right, --space-large top/bottom
• Remove underline from text with in-active Tab components
• Font-weight changes during hover state and
• Font color changes for the current tag
• Keep existing accent colors for light/dark mode