From 5c1e0821e762c2dd098a01b2bb6231c7f8568736 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 7 Sep 2026 19:55:08 +0200
Subject: Extract duplicated styles into shared molecules and color atoms

Move .score, .status, .add-bar and .btn-accent molecules into app.css
and replace BEM color modifiers with bare atoms (bg-success, bg-accent,
bg-danger, bg-accent-soft, text-accent, text-white). Rename the
category-specific cat-add-bar to add-bar and the groceries page's
sticky autocomplete bar to grocery-add-bar to avoid the collision.
Cuts dcd duplicate lines from 1288 to 780.
---
 src/routes/+page.svelte                            |  68 +------------
 src/routes/groceries/+page.svelte                  |  14 +--
 src/routes/groceries/categories/+page.svelte       |  39 +-------
 src/routes/projects/[id]/+page.svelte              | 106 ++-------------------
 .../[projectId]/routine/[routineId]/+page.svelte   |  66 ++-----------
 5 files changed, 27 insertions(+), 266 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4d4777a..fd987ff 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,9 +6,9 @@
 	let name = $state('');
 
 	function scoreClass(score: number): string {
-		if (score >= 80) return 'score score--good';
-		if (score >= 50) return 'score score--mid';
-		return 'score score--bad';
+		if (score >= 80) return 'score bg-success';
+		if (score >= 50) return 'score bg-accent';
+		return 'score bg-danger';
 	}
 </script>
 
@@ -18,7 +18,7 @@
 		<span class={scoreClass(data.globalScore)}>{data.globalScore}</span>
 	</header>
 
-	<form class="cat-add-bar" method="POST" action="?/addProject" use:enhance>
+	<form class="add-bar" method="POST" action="?/addProject" use:enhance>
 		<input
 			class="form-input"
 			type="text"
@@ -73,66 +73,6 @@
 		color: var(--accent);
 	}
 
-	.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);
-	}
-
-	.score--good {
-		background: var(--success);
-	}
-
-	.score--mid {
-		background: var(--accent);
-	}
-
-	.score--bad {
-		background: var(--danger);
-	}
-
-	.cat-add-bar {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.75rem 0;
-	}
-
-	.cat-add-bar input {
-		flex: 1;
-		background: var(--surface);
-	}
-
-	.btn-accent {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--accent);
-		color: var(--white);
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.btn-accent:hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
 	.empty {
 		margin-top: 1rem;
 		padding: 2rem;
diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte
index a159209..df1b97b 100644
--- a/src/routes/groceries/+page.svelte
+++ b/src/routes/groceries/+page.svelte
@@ -65,7 +65,7 @@
 	}
 </script>
 
-<div class="add-bar">
+<div class="grocery-add-bar">
 	<FuzzyAutocomplete
 		items={data.catalog}
 		bind:value={name}
@@ -123,7 +123,7 @@
 </main>
 
 <style>
-	.add-bar {
+	.grocery-add-bar {
 		display: flex;
 		gap: 0.5rem;
 		padding: 0.5rem 1rem;
@@ -134,7 +134,7 @@
 		z-index: 10;
 	}
 
-	.add-bar button {
+	.grocery-add-bar button {
 		width: 3rem;
 		height: 3rem;
 		flex-shrink: 0;
@@ -151,25 +151,25 @@
 		transition: all 0.2s ease;
 	}
 
-	.add-bar > button:nth-of-type(1) {
+	.grocery-add-bar > button:nth-of-type(1) {
 		background: var(--accent);
 		color: var(--white);
 		box-shadow: 0 1px 2px var(--shadow);
 	}
 
-	.add-bar > button:nth-of-type(1):hover {
+	.grocery-add-bar > button:nth-of-type(1):hover {
 		background: var(--accent-hover);
 		transform: translateY(-1px);
 		box-shadow: 0 4px 8px var(--shadow-accent-lg);
 	}
 
-	.add-bar > button:nth-of-type(2) {
+	.grocery-add-bar > button:nth-of-type(2) {
 		background: var(--surface);
 		color: var(--text-secondary);
 		border: 1.5px solid var(--border);
 	}
 
-	.add-bar > button:nth-of-type(2):hover {
+	.grocery-add-bar > button:nth-of-type(2):hover {
 		border-color: var(--accent);
 		color: var(--text);
 	}
diff --git a/src/routes/groceries/categories/+page.svelte b/src/routes/groceries/categories/+page.svelte
index 267a287..48de2da 100644
--- a/src/routes/groceries/categories/+page.svelte
+++ b/src/routes/groceries/categories/+page.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <main>
-	<form class="cat-add-bar" method="POST" action="?/add" use:enhance>
+	<form class="add-bar" method="POST" action="?/add" use:enhance>
 		<input
 			class="form-input"
 			type="text"
@@ -120,43 +120,6 @@
 		margin-bottom: 0.5rem;
 	}
 
-	.cat-add-bar {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.75rem 0;
-	}
-
-	.cat-add-bar input {
-		flex: 1;
-		background: var(--surface);
-	}
-
-	.btn-accent {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--accent);
-		color: var(--white);
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.btn-accent:hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
 	.empty {
 		margin-top: 1rem;
 		padding: 2rem;
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 608bbbb..c69d066 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -36,16 +36,16 @@
 	}
 
 	function scoreClass(score: number): string {
-		if (score >= 80) return 'score score--good';
-		if (score >= 50) return 'score score--mid';
-		return 'score score--bad';
+		if (score >= 80) return 'score bg-success';
+		if (score >= 50) return 'score bg-accent';
+		return 'score bg-danger';
 	}
 
 	function statusClass(status: RoutineState['status']): string {
-		if (status === 'ok') return 'status status--ok';
-		if (status === 'due') return 'status status--due';
-		if (status === 'late') return 'status status--late';
-		return 'status status--very-late';
+		if (status === 'ok') return 'status bg-success text-white';
+		if (status === 'due') return 'status bg-accent-soft text-accent';
+		if (status === 'late') return 'status bg-accent text-white';
+		return 'status bg-danger text-white';
 	}
 </script>
 
@@ -56,7 +56,7 @@
 	</header>
 
 	<form
-		class="cat-add-bar"
+		class="add-bar"
 		method="POST"
 		action="?/addRoutine"
 		use:enhance={() => {
@@ -272,35 +272,6 @@
 		border-color: var(--danger);
 	}
 
-	.status {
-		flex-shrink: 0;
-		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-
-	.status--ok {
-		background: var(--success);
-		color: var(--white);
-	}
-
-	.status--due {
-		background: var(--shadow-accent);
-		color: var(--accent);
-	}
-
-	.status--late {
-		background: var(--accent);
-		color: var(--white);
-	}
-
-	.status--very-late {
-		background: var(--danger);
-		color: var(--white);
-	}
-
 	.btn-done {
 		flex-shrink: 0;
 		padding: 0.5rem 0.875rem;
@@ -318,67 +289,6 @@
 		transform: translateY(-1px);
 	}
 
-	.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);
-	}
-
-	.score--good {
-		background: var(--success);
-	}
-
-	.score--mid {
-		background: var(--accent);
-	}
-
-	.score--bad {
-		background: var(--danger);
-	}
-
-	.cat-add-bar {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.75rem 0;
-	}
-
-	.cat-add-bar input:first-child {
-		flex: 1;
-		background: var(--surface);
-		min-width: 0;
-	}
-
-	.btn-accent {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--accent);
-		color: var(--white);
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.btn-accent:hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
 	.page-footer {
 		margin-top: 2rem;
 		display: flex;
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index ab0774c..d57ed79 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -70,16 +70,16 @@
 	});
 
 	function scoreClass(score: number): string {
-		if (score >= 80) return 'score score--good';
-		if (score >= 50) return 'score score--mid';
-		return 'score score--bad';
+		if (score >= 80) return 'score bg-success';
+		if (score >= 50) return 'score bg-accent';
+		return 'score bg-danger';
 	}
 
 	function statusClass(status: RoutineState['status']): string {
-		if (status === 'ok') return 'status status--ok';
-		if (status === 'due') return 'status status--due';
-		if (status === 'late') return 'status status--late';
-		return 'status status--very-late';
+		if (status === 'ok') return 'status bg-success text-white';
+		if (status === 'due') return 'status bg-accent-soft text-accent';
+		if (status === 'late') return 'status bg-accent text-white';
+		return 'status bg-danger text-white';
 	}
 </script>
 
@@ -346,58 +346,6 @@
 		color: var(--text-secondary);
 	}
 
-	.status {
-		flex-shrink: 0;
-		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-
-	.status--ok {
-		background: var(--success);
-		color: var(--white);
-	}
-
-	.status--due {
-		background: var(--shadow-accent);
-		color: var(--accent);
-	}
-
-	.status--late {
-		background: var(--accent);
-		color: var(--white);
-	}
-
-	.status--very-late {
-		background: var(--danger);
-		color: var(--white);
-	}
-
-	.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);
-	}
-
-	.score--good {
-		background: var(--success);
-	}
-
-	.score--mid {
-		background: var(--accent);
-	}
-
-	.score--bad {
-		background: var(--danger);
-	}
-
 	.add-completion {
 		flex-direction: row;
 		align-items: center;
-- 
cgit v1.3