pastilhasandClaude Opus 5
b14b1bf678
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>
26 lines
753 B
TypeScript
26 lines
753 B
TypeScript
import { cn } from 'helpers/cn';
|
|
|
|
type CheckMarkProps = {
|
|
className?: string | boolean | undefined;
|
|
};
|
|
|
|
export const CheckMark = ({ className }: CheckMarkProps) => {
|
|
return (
|
|
<div className={cn('inline-block h-8 w-8 rounded-full bg-success', className)}>
|
|
<svg className="m-auto mt-2 h-4 w-4 text-white" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth="1.5"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|