From 3881e4d8eacfff9bbb7a8e15b9aa68a9ac6800a7 Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Tue, 11 Aug 2026 10:14:53 +0200
Subject: [PATCH] fix(frontend): make destructive default and subtle buttons
 read red

Both variants were neutral until the pointer arrived, then filled solid red: nothing
marked the button as destructive until you were already on it. They now carry red text
at rest, with a faded red border on default and a light red wash on hover, which is
what the legacy red border style in the same file had always done.

Three call sites passed color="red" alongside a design-system variant. getStyleClass
returns before colour is read for accent, accent-secondary, default and subtle, so the
delete-migration control, its modal confirm and the import-database button had all been
rendering neutral. They pass destructive now.

The dropdown variant strips the button's own border, and matched border-border-light
literally -- a class the destructive style no longer contains.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/DBManagerDrawer.svelte            | 3 ++-
 frontend/src/lib/components/common/button/Button.svelte       | 4 +++-
 frontend/src/lib/components/common/button/model.ts            | 4 ++--
 .../workspaceSettings/DataTableMigrationsButton.svelte        | 4 ++--
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/DBManagerDrawer.svelte b/frontend/src/lib/components/DBManagerDrawer.svelte
index 4cac116f06..13bb2b3d90 100644
--- a/frontend/src/lib/components/DBManagerDrawer.svelte
+++ b/frontend/src/lib/components/DBManagerDrawer.svelte
@@ -323,7 +323,8 @@
 			<Button
 				disabled={!importSource}
 				loading={importLoading}
-				color="red"
+				variant="default"
+				destructive
 				on:click={handleImportDatabase}
 			>
 				Import {importBehavior === 'schema_and_data' ? 'schemas and data' : 'schemas'} into current database
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 2081e12e29..2426e7e04f 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -191,7 +191,9 @@
 				((typeof dropdownItems === 'function' && dropdownItems().length > 0) ||
 					dropdownItems.length > 0)
 			) {
-				style = style.replace('border border-border-light', '')
+				// The border colour differs between the plain and destructive styles, so match
+				// whichever resting border the variant declared rather than one literal class.
+				style = style.replace(/\bborder border-[^\s]+/, '')
 			}
 			return style
 		}
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index 8126ef8667..b9653e83df 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -194,9 +194,9 @@ export namespace ButtonType {
 		accent:
 			'bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
 		default:
-			'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+			'border border-red-600/30 hover:border-red-600/60 dark:border-red-400/30 dark:hover:border-red-400/60 bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
 		subtle:
-			'bg-transparent hover:bg-red-500 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
+			'bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
 	}
 
 	export const VariantSpacingClasses: Record<ButtonType.Size, string> = {
diff --git a/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte b/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
index bb908a433c..2a09bb1af0 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
@@ -481,7 +481,7 @@
 								variant="subtle"
 								size="xs"
 								iconOnly
-								color="red"
+								destructive
 								startIcon={{ icon: Trash2 }}
 								title="Delete migration"
 								disabled={busy}
@@ -566,7 +566,7 @@
 			</Button>
 			<Button
 				variant="default"
-				color="red"
+				destructive
 				size="sm"
 				disabled={busy}
 				on:click={() => {