Tabs: underline hover darkens the label, no bar
A second bar on the hairline competed with the selected tab's accent bar.
Hover now only moves the label from text-secondary to text-primary, so the
one mark on the line always means the selected tab.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G1ZNNE7MSJecXRqkEApUJp
diff --git a/_components/tabs.md b/_components/tabs.md
index 81e9669..4a30328 100644
--- a/_components/tabs.md
+++ b/_components/tabs.md
@@ -17,9 +17,9 @@ nothing else.
## Underline
Mono labels standing on a hairline; the selected one is marked by an accent
-bar as wide as its label, and hovering draws the same bar in text-secondary.
-For primary section navigation — a project's own tabs, never a filter. This is
-the default; no `data-variant` needed.
+bar as wide as its label, and hovering darkens the label. For primary section
+navigation — a project's own tabs, never a filter. This is the default; no
+`data-variant` needed.
<figure class="example">
<figcaption>Underline</figcaption>
diff --git a/_sass/components/tabs.css b/_sass/components/tabs.css
index 5df491f..b227bf6 100644
--- a/_sass/components/tabs.css
+++ b/_sass/components/tabs.css
@@ -25,15 +25,14 @@
}
/* Underline. Mono labels standing on the hairline, flush with the content
- edge, with a 2px bar drawn over the hairline under the label: accent for
- the selected tab, text-secondary on hover. Hover is a bar rather than a
- surface tint because a tint of the stock is ~1.1:1 against the card and
- all but invisible; text-secondary is the label's own resting ink, 6:1 or
- better on both surfaces in both themes, and the neutral bar reads apart
- from the accent one by hue. The bar is a
- pseudo-element, not a border, so it lies flat instead of inheriting the
- button's radius and curling up at the ends. Scoped away from segmented,
- which shares the element but none of this shape. */
+ edge, with a 2px accent bar drawn over the hairline under the selected
+ label. Hover only darkens the label to text-primary, the ink the selected
+ tab wears, so the one mark on the line always means "you are here". A
+ surface tint was tried and dropped: a tint of the stock is ~1.1:1 against
+ the card and all but invisible. The bar is a pseudo-element, not a
+ border, so it lies flat instead of inheriting the button's radius and
+ curling up at the ends. Scoped away from segmented, which shares the
+ element but none of this shape. */
[role="tablist"]:not([data-variant="segmented"]) [role="tab"] {
position: relative;
padding: var(--gl-space-3xs) 0;
@@ -61,9 +60,6 @@
[role="tablist"]:not([data-variant="segmented"]) [role="tab"]:hover {
color: var(--gl-color-text-primary);
}
-[role="tablist"]:not([data-variant="segmented"]) [role="tab"]:hover::after {
- background: var(--gl-color-text-secondary);
-}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"][aria-selected="true"] {
color: var(--gl-color-text-primary);
}