green that means "healthy" becomes the success token
Fifteen sites across thirteen files where a raw green stood in for a semantic state: connection dots, health lights, completed-job ticks, the copied-to-clipboard check, the installed badge, the checksum-matched line. All of them meant "on / connected / succeeded", and matched each other only because several people happened to pick the same palette number. The values do move: --success is #16a34a where green-500 was #22c55e and emerald-500 #10b981. That is the point — one token, so a theme can change its mind once, and under plain.css (the leak-detection theme, which greys --success to #404040) these now go colourless instead of staying green. Left alone, deliberately: the confetti palette and the Start button in start-confetti-button, the duck-avatar debug HUD, MetricCard's up/down delta ramp, CommandBlock's check on its hardcoded dark block, the react-email template, and the plain.css comment that names the anti-pattern. Reds are untouched — that is a separate pass, so some ternaries now read bg-success : bg-red-500 until it happens. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -221,7 +221,7 @@ const CredentialStatus = ({ status, isVerifying }: { status: VerifyStatus; isVer
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
|
||||
<div className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.valid ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
<div className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.valid ? 'bg-success' : 'bg-red-500'}`} />
|
||||
<span className={`text-sm ${status.valid ? 'text-duck-dark dark:text-foreground' : 'text-red-500'}`}>
|
||||
{status.valid ? 'Credentials valid' : (status.error ?? 'Invalid credentials')}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user