Tabs: draw the underline hover bar in text-secondary
text-tertiary cleared 3:1 but still wasn't discernible as a 2px bar.
text-secondary is the resting label's own ink, 6.2:1 or better on both
surfaces in both themes.
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 dcd1b75..81e9669 100644
--- a/_components/tabs.md
+++ b/_components/tabs.md
@@ -17,7 +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-tertiary. 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 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.
<figure class="example">
<figcaption>Underline</figcaption>
diff --git a/_sass/components/tabs.css b/_sass/components/tabs.css
index 26d72e7..5df491f 100644
--- a/_sass/components/tabs.css
+++ b/_sass/components/tabs.css
@@ -26,10 +26,11 @@
/* 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-tertiary on hover. Hover is a bar rather than a
+ 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-tertiary holds 3.5:1 against both surfaces, and
- the two bars differ in hue as well as position. The bar is a
+ 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. */
@@ -61,7 +62,7 @@
color: var(--gl-color-text-primary);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"]:hover::after {
- background: var(--gl-color-text-tertiary);
+ background: var(--gl-color-text-secondary);
}
[role="tablist"]:not([data-variant="segmented"]) [role="tab"][aria-selected="true"] {
color: var(--gl-color-text-primary);