fix(ui): put every colored badge on one light shade, dropping the green exception

Green sat a step darker than its siblings because green-700 measures 4.4991
against its tint — imperceptibly short of AA, but short. Carrying that as a
one-variant exception meant an odd shade number in the map, and the only ways to
let green back to 700 were to lower the gate for all eleven variants or to waive
it in the spec, which is the same exception wearing a different hat.

Move all seven to 800 instead. One rule, no exception, and the whole set clears
the bar with room: 6.39–7.83 on light, against 4.61–6.49 before — orange and
yellow had been sitting close enough that a later tint tweak would have pushed
them under. Dark is unchanged.

Three visual baselines were quietly stale: the earlier 600→700 move changed blue
text that the pixel comparison tolerated, since its YIQ metric under-weights a
blue-channel shift with little luminance change. Regenerated; two clean runs
confirm they are deterministic.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Sergey Kozyrenko
2026-07-21 14:31:32 +07:00
co-authored by Claude Fable 5
parent 26189c65e0
commit 1d98b73660
4 changed files with 6 additions and 6 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

+6 -6
View File
@@ -12,18 +12,18 @@ const badgeVariants = cva(
},
variants: {
variant: {
blue: 'border-blue-500/20 bg-blue-500/10 text-blue-700 hover:bg-blue-500/20 dark:text-blue-400',
blue: 'border-blue-500/20 bg-blue-500/10 text-blue-800 hover:bg-blue-500/20 dark:text-blue-400',
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90 dark:bg-destructive/80 dark:hover:bg-destructive/70',
green: 'border-green-500/20 bg-green-500/10 text-green-800 hover:bg-green-500/20 dark:text-green-400',
orange: 'border-orange-500/20 bg-orange-500/10 text-orange-700 hover:bg-orange-500/20 dark:text-orange-400',
orange: 'border-orange-500/20 bg-orange-500/10 text-orange-800 hover:bg-orange-500/20 dark:text-orange-400',
outline: 'text-foreground',
pink: 'border-pink-500/20 bg-pink-500/10 text-pink-700 hover:bg-pink-500/20 dark:text-pink-400',
purple: 'border-purple-500/20 bg-purple-500/10 text-purple-700 hover:bg-purple-500/20 dark:text-purple-400',
red: 'border-red-500/20 bg-red-500/10 text-red-700 hover:bg-red-500/20 dark:text-red-400',
pink: 'border-pink-500/20 bg-pink-500/10 text-pink-800 hover:bg-pink-500/20 dark:text-pink-400',
purple: 'border-purple-500/20 bg-purple-500/10 text-purple-800 hover:bg-purple-500/20 dark:text-purple-400',
red: 'border-red-500/20 bg-red-500/10 text-red-800 hover:bg-red-500/20 dark:text-red-400',
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
yellow: 'border-yellow-500/20 bg-yellow-500/10 text-yellow-700 hover:bg-yellow-500/20 dark:text-yellow-400',
yellow: 'border-yellow-500/20 bg-yellow-500/10 text-yellow-800 hover:bg-yellow-500/20 dark:text-yellow-400',
},
},
},