From 601c26d43628beae3a66106d7a0f8234f7d29cc8 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Mon, 30 Mar 2026 14:24:34 +0500
Subject: [PATCH] fix(ui): theme token consistency, seek bar a11y, colour
 polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add --color-success variable to all three themes
- Replace hard-coded amber/green Tailwind colours with CSS variables:
    Pro badge + discount badge: bg-amber-400/15 → bg-(--color-brand)/15
    Saved confirmation:         text-green-400 → text-(--color-success)
    Catalogue flash messages:   emerald/yellow → success/brand tokens
    Login hover border:         border-zinc-600 → border-(--color-brand)/50
- Seek bar in mini-player now has aria-label (player_seek_label)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/app.css                       | 6 +++++-
 ui/src/routes/+layout.svelte         | 1 +
 ui/src/routes/catalogue/+page.svelte | 4 ++--
 ui/src/routes/login/+page.svelte     | 4 ++--
 ui/src/routes/profile/+page.svelte   | 8 ++++----
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ui/src/app.css b/ui/src/app.css
index 95dfd0c..bdcb4b3 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -9,7 +9,8 @@
 	--color-muted: #a1a1aa;       /* zinc-400 */
 	--color-text: #f4f4f5;        /* zinc-100 */
 	--color-border: #3f3f46;      /* zinc-700 */
-	--color-danger: #f87171;      /* red-400 */
+	--color-danger:  #f87171;      /* red-400 */
+	--color-success: #4ade80;      /* green-400 */
 }
 
 /* ── Amber theme (default) — same as @theme above, explicit for clarity ── */
@@ -23,6 +24,7 @@
 	--color-text:      #f4f4f5;
 	--color-border:    #3f3f46;
 	--color-danger:    #f87171;
+	--color-success:   #4ade80;
 }
 
 /* ── Slate theme — indigo/slate dark ─────────────────────────────────── */
@@ -36,6 +38,7 @@
 	--color-text:      #f1f5f9;   /* slate-100 */
 	--color-border:    #334155;   /* slate-700 */
 	--color-danger:    #f87171;   /* red-400 */
+	--color-success:   #4ade80;   /* green-400 */
 }
 
 /* ── Rose theme — dark pink ───────────────────────────────────────────── */
@@ -49,6 +52,7 @@
 	--color-text:      #f4f4f5;   /* zinc-100 */
 	--color-border:    #3f2d36;   /* custom rose border */
 	--color-danger:    #f87171;   /* red-400 */
+	--color-success:   #4ade80;   /* green-400 */
 }
 
 html {
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index a14563a..93606f2 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -601,6 +601,7 @@
 			<div class="px-0">
 				<input
 					type="range"
+					aria-label={m.player_seek_label()}
 					min="0"
 					max={audioStore.duration || 0}
 					value={audioStore.currentTime}
diff --git a/ui/src/routes/catalogue/+page.svelte b/ui/src/routes/catalogue/+page.svelte
index 8cd9ae2..c0106ad 100644
--- a/ui/src/routes/catalogue/+page.svelte
+++ b/ui/src/routes/catalogue/+page.svelte
@@ -242,11 +242,11 @@
 <!-- Admin flash messages -->
 {#if form}
 	{#if form.status === 'queued'}
-		<div class="mb-4 px-4 py-3 rounded bg-emerald-900/40 border border-emerald-700 text-emerald-300 text-sm">
+		<div class="mb-4 px-4 py-3 rounded bg-(--color-success)/10 border border-(--color-success)/40 text-(--color-success) text-sm">
 			{m.catalogue_scrape_queued_flash()}
 		</div>
 	{:else if form.status === 'busy'}
-		<div class="mb-4 px-4 py-3 rounded bg-yellow-900/40 border border-yellow-700 text-yellow-300 text-sm">
+		<div class="mb-4 px-4 py-3 rounded bg-(--color-brand)/10 border border-(--color-brand)/40 text-(--color-brand) text-sm">
 			{m.catalogue_scrape_busy_flash()}
 		</div>
 	{:else if form.status === 'error'}
diff --git a/ui/src/routes/login/+page.svelte b/ui/src/routes/login/+page.svelte
index f66a634..b24e411 100644
--- a/ui/src/routes/login/+page.svelte
+++ b/ui/src/routes/login/+page.svelte
@@ -34,7 +34,7 @@
 				href="/auth/google"
 				class="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-lg
 					bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm font-medium
-					hover:bg-(--color-surface-3) hover:border-zinc-600 transition-colors"
+					hover:bg-(--color-surface-3) hover:border-(--color-brand)/50 transition-colors"
 			>
 				<svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
 					<path
@@ -62,7 +62,7 @@
 				href="/auth/github"
 				class="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-lg
 					bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm font-medium
-					hover:bg-(--color-surface-3) hover:border-zinc-600 transition-colors"
+					hover:bg-(--color-surface-3) hover:border-(--color-brand)/50 transition-colors"
 			>
 				<svg class="w-5 h-5 shrink-0 fill-(--color-text)" viewBox="0 0 24 24" aria-hidden="true">
 					<path
diff --git a/ui/src/routes/profile/+page.svelte b/ui/src/routes/profile/+page.svelte
index b2febfe..b068ab8 100644
--- a/ui/src/routes/profile/+page.svelte
+++ b/ui/src/routes/profile/+page.svelte
@@ -288,7 +288,7 @@
 		<div class="flex items-center justify-between gap-3 flex-wrap">
 			<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_subscription_heading()}</h2>
 			{#if data.isPro}
-				<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-400/15 text-amber-400 border border-amber-400/30 tracking-wide uppercase">
+				<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-(--color-brand)/15 text-(--color-brand) border border-(--color-brand)/30 tracking-wide uppercase">
 					<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
 					</svg>
@@ -339,7 +339,7 @@
 						class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-(--color-brand) text-(--color-brand) font-semibold text-sm hover:bg-(--color-brand)/10 transition-colors"
 					>
 						{m.profile_upgrade_annual()}
-						<span class="text-xs font-bold px-1.5 py-0.5 rounded bg-amber-400/15 text-amber-400 border border-amber-400/30">–33%</span>
+						<span class="text-xs font-bold px-1.5 py-0.5 rounded bg-(--color-brand)/15 text-(--color-brand) border border-(--color-brand)/30">–33%</span>
 					</a>
 				</div>
 			</div>
@@ -416,7 +416,7 @@
 				{settingsSaving ? m.profile_saving() : m.profile_save_settings()}
 			</button>
 			{#if settingsSaved}
-				<span class="text-sm text-green-400">{m.profile_saved()}</span>
+				<span class="text-sm text-(--color-success)">{m.profile_saved()}</span>
 			{/if}
 		</div>
 	</section>
@@ -502,7 +502,7 @@
 				{settingsSaving ? m.profile_saving() : m.profile_save_settings()}
 			</button>
 			{#if settingsSaved}
-				<span class="text-sm text-green-400">{m.profile_saved()}</span>
+				<span class="text-sm text-(--color-success)">{m.profile_saved()}</span>
 			{/if}
 		</div>
 	</section>