From e56b40987327f5732bb56d9533d5cefaf6361cb1 Mon Sep 17 00:00:00 2001 From: TJ Date: Thu, 23 Apr 2026 08:41:59 -0700 Subject: [PATCH] fix(site): use highlight-orange for warning badge text and border (#24674) ## Summary Fixes the warning badge color in light mode by switching text and border tokens from `content-warning`/`border-warning` to `highlight-orange`. ## What changed The `warning` variant in `Badge` was the only colored badge variant not using the `highlight-*` token pattern: | Variant | Before | After | |---|---|---| | warning (text) | `text-content-warning` | `text-highlight-orange` | | warning (border) | `border-border-warning` | `border-highlight-orange` | In light mode, `content-warning` (HSL 27 96% 61%) produced a washed-out orange. `highlight-orange` (HSL 30 100% 32%) gives a darker, more legible result that matches the screenshot in the issue. > [!NOTE] > This PR was authored by Coder Agents. --- site/src/components/Badge/Badge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 417ddc24c5..487dd9cd34 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -18,7 +18,7 @@ const badgeVariants = cva( default: "border-surface-secondary bg-surface-secondary text-content-secondary shadow", warning: - "border-border-warning bg-surface-orange text-content-warning shadow", + "border-highlight-orange bg-surface-orange text-highlight-orange shadow", destructive: "border-border-destructive bg-surface-red text-highlight-red shadow", green: