The Table component has a few visual design updates to align with upcoming features.
Style Changes
Add zebra striping to rows.
Every table body odd row should a background color of var(--gray-10) for light mode and var(--gray-90) for dark mode.
Cell bottom border color changes to var(--gray-20), no changes to dark mode
Heading color should utilize the same primitive color as the secondary button in their respective mode
Table cell top/bottom padding changes to 16px, left/right padding 24px for both body and header cells
Header cells border width is reduced to 1px for both horizontal and vertical layouts
Sortable Table Headers
Background/border colors should remain the same as non-sorted cells with the only indication being the sort direction icon (this is removing any existing styles that change the colors)
The hover state should have a 1px inner focus ring with the same color as the secondary button's focus ring in the respective mode
The Table component has a few visual design updates to align with upcoming features.
Style Changes
zebrastriping to rows.var(--gray-10)for light mode andvar(--gray-90)for dark mode.var(--gray-20), no changes to dark modeSortable Table Headers