From eb18242f5a655a14fba2a678e693e557c6a715e8 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 6 Mar 2026 22:47:24 +0100
Subject: [PATCH] style: unify color system and add retro card shadows

Replace hardcoded colors (gray-500, #b44, red-300/red-50/red-600,
green-600) with CSS variables for theme consistency. Add --destructive,
--error-*, --success-*, and --card-shadow variables to :root. Soften
default card borders from --border to --border-subtle and add 8-bit
style hard-offset shadows with hover effects. Apply accent-color for
themed checkboxes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app.css                             | 9 +++++++++
 src/lib/components/Layout/Toast.svelte  | 2 +-
 src/lib/components/NoteCard.svelte      | 4 ++--
 src/lib/components/NoteGrid.svelte      | 2 +-
 src/lib/components/SyncIndicator.svelte | 2 +-
 src/routes/login/+page.svelte           | 4 ++--
 src/routes/setup/+page.svelte           | 4 ++--
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app.css b/src/app.css
index f6e7fa3..80921a2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -12,10 +12,19 @@
 	--text-muted: #6b6272;
 	--border: #1a1a2e;
 	--border-subtle: #d4cabb;
+	--destructive: #a63d2f;
+	--error-bg: #f5e0db;
+	--error-border: #d4a69e;
+	--error-text: #8b2e1f;
+	--success-bg: #dce8d4;
+	--success-text: #3a5a2e;
+	--card-shadow: 2px 2px 0px var(--border-subtle);
+	--card-shadow-hover: 3px 3px 0px var(--primary);
 }
 
 body {
 	font-family: 'JetBrains Mono', monospace;
+	accent-color: var(--primary);
 }
 
 body::before {
diff --git a/src/lib/components/Layout/Toast.svelte b/src/lib/components/Layout/Toast.svelte
index e17656e..8b7883f 100644
--- a/src/lib/components/Layout/Toast.svelte
+++ b/src/lib/components/Layout/Toast.svelte
@@ -5,7 +5,7 @@
 <div class="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-2">
 	{#each $toasts as toast (toast.id)}
 		<div
-			class="flex items-center gap-3 rounded-sm border border-[var(--border)] px-4 py-3 {toast.type === 'error' ? 'bg-red-600 text-white' : toast.type === 'success' ? 'bg-green-600 text-white' : 'bg-[var(--text)] text-[var(--bg-base)]'}"
+			class="flex items-center gap-3 rounded-sm border px-4 py-3 shadow-[var(--card-shadow)] {toast.type === 'error' ? 'border-[var(--error-border)] bg-[var(--error-bg)] text-[var(--error-text)]' : toast.type === 'success' ? 'border-[var(--border-subtle)] bg-[var(--success-bg)] text-[var(--success-text)]' : 'border-[var(--border)] bg-[var(--text)] text-[var(--bg-base)]'}"
 		>
 			<span class="text-sm">{toast.text}</span>
 			{#if toast.action}
diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index 030fe98..5690c5d 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -66,7 +66,7 @@
 </script>
 
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border)] p-4 transition-colors hover:border-[var(--primary)]"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)]"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
@@ -130,7 +130,7 @@
 				title="Delete forever"
 				data-testid="delete-forever-btn"
 			>
-				<Trash2 class="h-4 w-4 text-[#b44]" />
+				<Trash2 class="h-4 w-4 text-[var(--destructive)]" />
 			</button>
 		{:else}
 			<button
diff --git a/src/lib/components/NoteGrid.svelte b/src/lib/components/NoteGrid.svelte
index e4c7ac3..8d4c22d 100644
--- a/src/lib/components/NoteGrid.svelte
+++ b/src/lib/components/NoteGrid.svelte
@@ -13,7 +13,7 @@
 
 {#if notes.length > 0}
 	{#if label}
-		<p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500">{label}</p>
+		<p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">{label}</p>
 	{/if}
 	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" data-testid="note-grid">
 		{#each notes as note (note.id)}
diff --git a/src/lib/components/SyncIndicator.svelte b/src/lib/components/SyncIndicator.svelte
index 93c07a2..42c3f6d 100644
--- a/src/lib/components/SyncIndicator.svelte
+++ b/src/lib/components/SyncIndicator.svelte
@@ -52,6 +52,6 @@
 	{:else if displayStatus === 'offline'}
 		<CloudOff class="h-5 w-5 text-[var(--text-muted)]" />
 	{:else}
-		<CloudAlert class="h-5 w-5 text-[#b44]" />
+		<CloudAlert class="h-5 w-5 text-[var(--destructive)]" />
 	{/if}
 </div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 0e8648f..33277ce 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -36,7 +36,7 @@
 </svelte:head>
 
 <div class="flex min-h-screen items-center justify-center bg-[var(--bg-base)]">
-	<div class="w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-8">
+	<div class="w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-8 shadow-[var(--card-shadow)]">
 		<div class="mb-6 text-center">
 			<span class="text-5xl">🥨</span>
 			<h1 class="font-['Press_Start_2P'] text-xl text-[var(--primary)]">Crumbs</h1>
@@ -45,7 +45,7 @@
 
 		<form onsubmit={handleLogin}>
 			{#if errorMsg}
-				<div class="mb-4 rounded-sm border border-red-300 bg-red-50 p-3 text-sm text-red-600" data-testid="error-message">
+				<div class="mb-4 rounded-sm border border-[var(--error-border)] bg-[var(--error-bg)] p-3 text-sm text-[var(--error-text)]" data-testid="error-message">
 					{errorMsg}
 				</div>
 			{/if}
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index 51fd338..dc4fa80 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -48,7 +48,7 @@
 </svelte:head>
 
 <div class="flex min-h-screen items-center justify-center bg-[var(--bg-base)]">
-	<div class="w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-8">
+	<div class="w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-8 shadow-[var(--card-shadow)]">
 		<div class="mb-6 text-center">
 			<span class="text-5xl">🥨</span>
 			<h1 class="font-['Press_Start_2P'] text-xl text-[var(--primary)]">Welcome to Crumbs</h1>
@@ -57,7 +57,7 @@
 
 		<form onsubmit={handleSetup}>
 			{#if errorMsg}
-				<div class="mb-4 rounded-sm border border-red-300 bg-red-50 p-3 text-sm text-red-600" data-testid="error-message">
+				<div class="mb-4 rounded-sm border border-[var(--error-border)] bg-[var(--error-bg)] p-3 text-sm text-[var(--error-text)]" data-testid="error-message">
 					{errorMsg}
 				</div>
 			{/if}