fix(ui): restore success and warning badge contrast (#47828)

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

After the colour system migration, `Badge` success and warning variants
use semantic `text-brand` / `text-warning` (and soft `border-brand` /
`border-warning` tokens). In light mode those fills sit around mid–high
lightness, so the badges look flat and the text is hard to read.

Call sites that never migrated — e.g. Compute badges (`SMALL`) and table
constraint tokens (`PRIMARY`) — still use the darker scale tokens and
look fine.

## What is the new behavior?

Success and warning badges again use the darker scale tokens, matching
those working call sites:

- success: `text-brand-600` + `border-brand-500`
- warning: `text-warning-600` + `border-warning-500`

| Before | After |
| --- | --- |
| <img width="791" height="288" alt="Tables Database Chisel Toolshed
Supabase"
src="https://github.com/user-attachments/assets/99659555-bf78-42d7-af93-415cdc8e858c"
/> | <img width="791" height="288" alt="82859"
src="https://github.com/user-attachments/assets/368d4a8e-d7cf-4bf6-b896-89f29eca982d"
/> |

## To test

On the staging preview in **light mode**:

- Any `Badge variant="success"` — e.g. “New”, “Enabled”, “Healthy”,
branch badges
- Any `Badge variant="warning"` — e.g. beta / warning status badges
- Compare with Compute size badges and Database → Tables → Columns →
Constraints (`PRIMARY`) — contrast should now feel similar

Spot-check **dark mode** to confirm badges still look correct.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated warning and success badges with refined text and border colors
for improved visual consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Danny White authored and GitHub committed 2026-07-16 00:09:22 +10:00
1 parent 805aee289e
commit df69219859
1 file changed
+2 -2
@@ -9,8 +9,8 @@ const badgeVariants = cva(
variants: {
variant: {
default: 'bg-surface-75 text-foreground-light border border-strong',
warning: 'bg-warning/10 text-warning border border-border-warning',
success: 'bg-brand/10 text-brand border border-border-brand',
warning: 'bg-warning/10 text-warning-600 border border-warning-500',
success: 'bg-brand/10 text-brand-600 border border-brand-500',
destructive: 'bg-destructive/10 text-destructive border border-border-destructive',
// Secondary is invisible
secondary: