mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
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:
|
||||
|
||||
Reference in new issue
Block a user