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
change
commit df639e9e668c35fa33e68e1841a41ed45b22068a
author Claude <noreply@anthropic.com>
date
parent 25cea295
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);
 }