From 13f10b54097c3a1b1ce241c923c7d2c4cd618e7c Mon Sep 17 00:00:00 2001 From: Mac Carrithers Date: Fri, 18 Sep 2026 21:44:04 -0600 Subject: [PATCH 1/3] Style the sidebar badge like the console's soft badge 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. --- astro.config.mjs | 2 +- src/styles/custom.css | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index f40ff033..8445daea 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -87,7 +87,7 @@ export default defineConfig({ label: 'CI', collapsed: true, badge: { - text: 'deprecated', + text: 'Deprecated', variant: 'caution', }, items: [{ autogenerate: { directory: 'ci' } }], diff --git a/src/styles/custom.css b/src/styles/custom.css index 509ee010..91e52549 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -82,3 +82,25 @@ h6 { .site-title img { height: 1.5rem; } + +/* Sidebar badges follow the console's soft badge recipe (packages/ui/src/badge.tsx) + with its warning color (apps/console/app/tokens.css): + one source color drives the text, a dimmer border, and a dimmer background. */ +.sidebar-content .sl-badge { + --badge-color: light-dark( + oklch(0.7517 0.1106 52.07), + oklch(0.8208 0.1259 74.91) + ); + margin-inline-start: 0.5rem; + border-radius: 9999px; + padding: 0.125rem 0.5rem; + font: 500 0.6875rem/1.4 var(--sl-font); + color: var(--badge-color); + border-color: color-mix(in oklab, var(--badge-color) 35%, transparent); + background: color-mix(in oklab, var(--badge-color) 12%, transparent); +} + +.sidebar-content .group-label { + display: flex; + align-items: center; +} From 23b471d4d344b91b66cc0d464571f7935b0521d9 Mon Sep 17 00:00:00 2001 From: Abhishek Doshi Date: Sat, 19 Sep 2026 15:00:55 +0530 Subject: [PATCH 2/3] Use the console's on-warning color for light-mode badge text --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. --- src/styles/custom.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 91e52549..7aa58db4 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -95,7 +95,9 @@ h6 { border-radius: 9999px; padding: 0.125rem 0.5rem; font: 500 0.6875rem/1.4 var(--sl-font); - color: var(--badge-color); + /* Light text uses the console's `--on-warning`: `--warning-500` on its own + tint over white is 2.1:1, under WCAG AA's 4.5:1 for small text. */ + color: light-dark(oklch(0.5264 0.1135 48.92), var(--badge-color)); border-color: color-mix(in oklab, var(--badge-color) 35%, transparent); background: color-mix(in oklab, var(--badge-color) 12%, transparent); } From 9636a706379aefa1a5a1d5092aa91e64f144bd2f Mon Sep 17 00:00:00 2001 From: Abhishek Doshi Date: Sat, 19 Sep 2026 15:03:15 +0530 Subject: [PATCH 3/3] Scope the warning badge color to caution badges 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. --- src/styles/custom.css | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 7aa58db4..012b5eb8 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -83,18 +83,23 @@ h6 { height: 1.5rem; } -/* Sidebar badges follow the console's soft badge recipe (packages/ui/src/badge.tsx) - with its warning color (apps/console/app/tokens.css): - one source color drives the text, a dimmer border, and a dimmer background. */ +/* Sidebar badges follow the console's soft badge recipe (packages/ui/src/badge.tsx): + a pill in the sans font, with one source color driving the text, a dimmer + border, and a dimmer background. */ .sidebar-content .sl-badge { - --badge-color: light-dark( - oklch(0.7517 0.1106 52.07), - oklch(0.8208 0.1259 74.91) - ); margin-inline-start: 0.5rem; border-radius: 9999px; padding: 0.125rem 0.5rem; font: 500 0.6875rem/1.4 var(--sl-font); +} + +/* Only `caution` badges take the console's warning color + (apps/console/app/tokens.css); other variants keep Starlight's colors. */ +.sidebar-content .sl-badge.caution { + --badge-color: light-dark( + oklch(0.7517 0.1106 52.07), + oklch(0.8208 0.1259 74.91) + ); /* Light text uses the console's `--on-warning`: `--warning-500` on its own tint over white is 2.1:1, under WCAG AA's 4.5:1 for small text. */ color: light-dark(oklch(0.5264 0.1135 48.92), var(--badge-color));