diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx index 93961db4..75cacd70 100644 --- a/canvas/src/components/ConfirmDialog.tsx +++ b/canvas/src/components/ConfirmDialog.tsx @@ -91,12 +91,15 @@ export function ConfirmDialog({ if (!open || !mounted) return null; + // Hover goes DARKER, not lighter — lighter shades on white text drop + // contrast below AA on the accent and red ramps. Darker hovers stay + // readable in both light and dark themes. const confirmColors = confirmVariant === "danger" - ? "bg-red-600 hover:bg-red-500 text-white" + ? "bg-red-600 hover:bg-red-700 text-white" : confirmVariant === "warning" - ? "bg-amber-600 hover:bg-amber-500 text-white" - : "bg-accent-strong hover:bg-accent text-white"; + ? "bg-amber-600 hover:bg-amber-700 text-white" + : "bg-accent hover:bg-accent-strong text-white"; // Render via Portal so the fixed-position dialog escapes any containing block // (e.g. parents with transform, filter, will-change that break position:fixed). @@ -123,7 +126,7 @@ export function ConfirmDialog({ @@ -131,7 +134,7 @@ export function ConfirmDialog({