Style the sidebar badge like the console's soft badge - #680
Conversation
Starlight's sidebar badge is a square mono-font chip that sits flush against the group label and hangs below its baseline. Port the console's soft badge recipe (one source color driving text, border, and background) with its warning token, and flex-center the group label so the badge lines up with the text and caret.
AbhishekDoshi26
left a comment
AbhishekDoshi26
left a comment
There was a problem hiding this comment.
Nice cleanup. The pill reads much better than the square chip, the label, badge and caret now share a center line (measured to within 0.01px), and I checked that light-dark() follows the site's theme toggle, which sets color-scheme along with data-theme. The port is faithful to softSurfaceClasses and the console's --warning-500 values.
One blocker: the light-mode badge text fails contrast. --warning-500 (#e69a6b) on its own 12% tint over the white sidebar is 2.08:1. WCAG AA needs 4.5:1 for 11px text, and production is currently at 6.36:1, so this is a regression. Dark mode is fine at 8.61:1. All three numbers were measured with computed styles in the browser.
The console's tokens already include the fix: --on-warning (oklch(0.5264 0.1135 48.92)) is its text-safe warning color for light surfaces. Using it for the text in light mode only gives 5.11:1, while the border and fill keep the soft recipe and dark mode stays unchanged. I tested the suggestion inline below in both themes. (The console's own "Needs attention" soft badge in plan-card.tsx has the same 2:1 problem, which may be worth passing along.)
Non-blocking: .sidebar-content .sl-badge applies the warning color to every sidebar badge. Only CI has one today, but scoping it to .sl-badge.caution would stop a future note or success badge from rendering orange.
CI is green.
--warning-500 text on its own 12% tint over the white sidebar measured 2.08:1, below WCAG AA's 4.5:1 for 11px text (production was 6.36:1). The console's --on-warning token brings light mode to 5.11:1. The border and fill keep the soft recipe, and dark mode is unchanged at 8.61:1.
The soft badge shape (pill, sans font, spacing) still applies to every sidebar badge, but only `caution` badges take the console's warning color, so a future note or success badge keeps Starlight's variant colors instead of rendering orange.
2 participants
The CI group's "deprecated" badge rendered as Starlight's default: a square mono-font chip flush against the label and hanging below its baseline, so the padding read as space inside the badge.
This ports the console's soft badge recipe from
packages/ui/src/badge.tsx: one source color drives the text, a 35% border, and a 12% background, using the console's warning token values vialight-dark(). The badge is now a pill in the sans font at 11px, with a gap after the label, and the group label is flex-centered so the badge lines up with the text and caret. The label is capitalized to match console badge casing.Verified in both themes on the dev server.
cc @AbhishekDoshi26