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/Button.svelte       | 23 +++++++++++++++-
 src/lib/components/ScoreBadge.svelte   | 35 +++++++++++++++++++------
 src/lib/components/SectionTitle.svelte | 23 ++++++++++++++++
 src/lib/components/StatusBadge.svelte  | 48 ++++++++++++++++++++++++++--------
 4 files changed, 109 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/SectionTitle.svelte

(limited to 'src/lib/components')

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 30e9fc2..27b9b7f 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -15,7 +15,7 @@
 		onclick,
 		children,
 	}: {
-		variant?: 'primary' | 'accent' | 'ghost' | 'done';
+		variant?: 'primary' | 'accent' | 'ghost' | 'done' | 'outline';
 		type?: 'button' | 'submit' | 'reset';
 		disabled?: boolean;
 		name?: string;
@@ -143,6 +143,27 @@
 		font-size: 0.9375rem;
 	}
 
+	.outline {
+		width: 3rem;
+		height: 3rem;
+		flex-shrink: 0;
+		padding: 0;
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--text-secondary);
+		border: 1.5px solid var(--border);
+		font-size: 1.25rem;
+		font-weight: 500;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.outline:hover:not(:disabled) {
+		border-color: var(--accent);
+		color: var(--text);
+	}
+
 	.block {
 		align-self: stretch;
 		width: 100%;
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>
diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte
new file mode 100644
index 0000000..be77a46
--- /dev/null
+++ b/src/lib/components/SectionTitle.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { level = 2, children }: { level?: 2 | 3; children: Snippet } = $props();
+</script>
+
+<svelte:element this={level === 2 ? 'h2' : 'h3'}>
+	{@render children()}
+</svelte:element>
+
+<style>
+	h2,
+	h3 {
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--accent);
+		margin: 1.25rem 0 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 3px solid var(--accent);
+	}
+</style>
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