From 2a7c4f969874b850e30170f3aef5b578677220b0 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Sat, 12 Sep 2026 22:26:09 +0200
Subject: Scope badges, titles, and one-off styles; add Button outline

ScoreBadge/StatusBadge carry their own color scales, no
bg-*/text-* globals. SectionTitle unifies category-name and
section-title dupes (h2/h3 via level prop). Grocery add-bar
buttons use Button, new outline variant for the secondary
action. save-status moves into its only page. Delete dead
globals and page overrides.
---
 src/lib/components/StatusBadge.svelte | 48 +++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 11 deletions(-)

(limited to 'src/lib/components/StatusBadge.svelte')

diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index 4c149d2..2bbdf5a 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -9,16 +9,6 @@
 		overdueDays = 0,
 	}: { status: RoutineStatus; overdueDays?: number } = $props();
 
-	const className = $derived(
-		status === 'ok'
-			? 'status bg-success text-white'
-			: status === 'due'
-				? 'status bg-accent-soft text-accent'
-				: status === 'late'
-					? 'status bg-accent text-white'
-					: 'status bg-danger text-white',
-	);
-
 	const icon = $derived(
 		status === 'ok'
 			? '✓'
@@ -36,5 +26,41 @@
 	);
 </script>
 
-<span class={className} role="img" aria-label={label} title={label}>{icon}</span
+<span class="status {status}" role="img" aria-label={label} title={label}
+	>{icon}</span
 >
+
+<style>
+	.status {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.ok {
+		background: var(--success);
+		color: var(--white);
+	}
+
+	.due {
+		background: var(--shadow-accent);
+		color: var(--accent);
+	}
+
+	.late {
+		background: var(--accent);
+		color: var(--white);
+	}
+
+	.veryLate {
+		background: var(--danger);
+		color: var(--white);
+	}
+</style>
-- 
cgit v1.3