Extract Button primitive, migrate all call sites

Variants primary/accent/ghost/done with scoped styles.
Disabled handling unified; block/size/style props cover
login stretch, done-lg, save-check positioning.
Delete btn-* globals and dead page overrides.

2 files changed, 7 insertions, 28 deletions

diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte
index 2b92a35..a7f3c0e 100644
--- a/src/routes/groceries/catalog/+page.svelte
+++ b/src/routes/groceries/catalog/+page.svelte
@@ -2,6 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { SvelteSet } from 'svelte/reactivity';
 	import GroceryRow from '$lib/components/GroceryRow.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
 
 	let { data, form } = $props();
@@ -45,13 +46,9 @@
 					<option value={cat.id}>{cat.name}</option>
 				{/each}
 			</select>
-			<button
-				class="btn-primary"
-				type="submit"
-				disabled={selectedIds.size === 0}
+			<Button disabled={selectedIds.size === 0}
+				>Mettre à jour ({selectedIds.size})</Button
 			>
-				Mettre à jour ({selectedIds.size})
-			</button>
 		</form>
 	</div>
 {/if}
@@ -118,19 +115,6 @@
 		min-width: 0;
 	}
 
-	.bulk-bar .btn-primary {
-		padding: 0.75rem 1rem;
-		align-self: center;
-		white-space: nowrap;
-	}
-
-	.bulk-bar .btn-primary:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		transform: none;
-		box-shadow: none;
-	}
-
 	.error {
 		margin-bottom: 1rem;
 	}
diff --git a/src/routes/groceries/categories/+page.svelte b/src/routes/groceries/categories/+page.svelte
index af85adf..3d6d5b3 100644
--- a/src/routes/groceries/categories/+page.svelte
+++ b/src/routes/groceries/categories/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { Category } from '$lib/server/services/types';
+	import Button from '$lib/components/Button.svelte';
 
 	let { data, form } = $props();
 	let name = $state('');
@@ -46,7 +47,7 @@
 			placeholder="Nouvelle catégorie..."
 			autocomplete="off"
 		/>
-		<button class="btn-accent" type="submit" aria-label="Ajouter">+</button>
+		<Button variant="accent" ariaLabel="Ajouter">+</Button>
 	</form>
 
 	{#if form?.error}
@@ -81,15 +82,9 @@
 				>
 					<span class="drag-handle">⋮⋮</span>
 					<span class="cat-name">{cat.name}</span>
-					<button
-						class="btn-ghost"
-						name="id"
-						value={cat.id}
-						type="submit"
-						aria-label="Supprimer"
+					<Button variant="ghost" name="id" value={cat.id} ariaLabel="Supprimer"
+						>&times;</Button
 					>
-						&times;
-					</button>
 				</li>
 			{/each}
 		</ul>