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/routes/projects/[id]/+page.svelte                    | 14 ++------------
 .../[projectId]/routine/[routineId]/+page.svelte         | 16 +++-------------
 2 files changed, 5 insertions(+), 25 deletions(-)

(limited to 'src/routes/projects')

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index b48a331..8d62a39 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -11,6 +11,7 @@
 		parseIntervalToDays,
 		type RoutineState,
 	} from '$lib/shared/routine-metrics';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import { formatDayMonth } from '$lib/shared/temporal';
 
 	let { data, form } = $props();
@@ -44,7 +45,7 @@
 
 	{#if data.healthSeries.length > 0}
 		<section>
-			<h2 class="section-title">Santé</h2>
+			<SectionTitle>Santé</SectionTitle>
 			<div class="form-card chart-card">
 				<HealthChart
 					series={data.healthSeries}
@@ -187,17 +188,6 @@
 </main>
 
 <style>
-	.section-title {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.5rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
-	}
-
 	.chart-card {
 		align-items: stretch;
 	}
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 55185cc..ea292ae 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -11,6 +11,7 @@
 		computeHealthSeries,
 	} from '$lib/shared/routine-metrics';
 	import { formatDayMonth, formatDayMonthYear } from '$lib/shared/temporal';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	let { data, form } = $props();
 	let name = $state('');
 	let frequency = $state('');
@@ -125,7 +126,7 @@
 		</form>
 	{/if}
 
-	<h2 class="section-title">Santé</h2>
+	<SectionTitle>Santé</SectionTitle>
 	<div class="form-card chart-card">
 		<HealthChart
 			{series}
@@ -150,7 +151,7 @@
 		{/if}
 	</div>
 
-	<h2 class="section-title">Historique</h2>
+	<SectionTitle>Historique</SectionTitle>
 	{#if !data.routine.archived}
 		<form
 			class="form-card form-card--compact add-completion"
@@ -216,17 +217,6 @@
 		font-family: inherit;
 	}
 
-	.section-title {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.5rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
-	}
-
 	.archived-badge {
 		margin: 0 0 1rem;
 		color: var(--text-secondary);
-- 
cgit v1.3