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/ScoreBadge.svelte | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

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

diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte
index 6384667..ae11918 100644
--- a/src/lib/components/ScoreBadge.svelte
+++ b/src/lib/components/ScoreBadge.svelte
@@ -1,13 +1,32 @@
 <script lang="ts">
 	let { score }: { score: number } = $props();
 
-	const className = $derived(
-		score >= 80
-			? 'score bg-success'
-			: score >= 50
-				? 'score bg-accent'
-				: 'score bg-danger',
-	);
+	const level = $derived(score >= 80 ? 'high' : score >= 50 ? 'mid' : 'low');
 </script>
 
-<span class={className}>{score}</span>
+<span class="score {level}">{score}</span>
+
+<style>
+	.score {
+		flex-shrink: 0;
+		min-width: 2.75rem;
+		padding: 0.25rem 0.5rem;
+		border-radius: 9999px;
+		text-align: center;
+		font-size: 0.875rem;
+		font-weight: 700;
+		color: var(--white);
+	}
+
+	.high {
+		background: var(--success);
+	}
+
+	.mid {
+		background: var(--accent);
+	}
+
+	.low {
+		background: var(--danger);
+	}
+</style>
-- 
cgit v1.3