Invert tab backgrounds - #632
Conversation
Flips active/inactive tab fills (active white, inactive gray-5) without changing default link styles on inactive tabs.
Inactive tabs were only getting the gray fill; keep a gray-40 border on all sides while the active tab still opens into the panel.
Adjacent 1px borders were stacking into a thicker seam; pull following tabs left by 1px and raise the active tab.
|
| button.tab { | ||
| background: var(--gray-5); | ||
| border-color: var(--gray-40); | ||
| margin-left: -1px; |
There was a problem hiding this comment.
Double-check that the focus rectangles aren't shifted by 1px.
There was a problem hiding this comment.
I would add an outline-offset: 2px; too. You can tab through the footer links on cf.gov in the mobile screen width to see what I mean. Those deal with the same overlapping borders issue. IIRC, the first item is technically 1px taller than the others when inspected, but visually they are the same height (because the first item "owns" two borders, whereas the rest only "own" one).
Raise :focus-visible above neighboring tabs and use a positive outline-offset so the ring isn’t eaten by the shared side border.
Drop gray/white fills and inactive borders; inverted now matches default tab chrome with no backgrounds.
Transparent fills were letting the list bottom border show through; cover that 1px so the active tab has no underline into the panel.
App bundles can let equal-specificity button/tab background rules win; force transparent fills on tablist--inverted.
|
Seeing faint line in this inverted variant. It's really obvious on mobile. 
|
|
@flacoman91 |
|
@natalia-fitzgerald I've updated it and the line shouldn't be visible. |
natalia-fitzgerald
left a comment
natalia-fitzgerald
left a comment
There was a problem hiding this comment.
@flacoman91 - Looks great!
3 participants
invert tab backgrounds for pages that need it, like CCDB
Fixed the faint line under active tabs (worse on mobile):
Root cause — heading-4 still added a 10px bottom margin at xs, so the tablist rule sat in a gap below the tab fills.
parent border-bottom didn’t cover cleanly under the active tab; switched to an inset box-shadow, opaque active fills, and zeroed that mobile margin.
Extras — focus ring outline-offset: 2px;
removed unused eslint-disables in SelectMulti.