From 434b2c1305c929f06b5dc92aa34a2b1ce5bf886c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:15:53 +0200
Subject: [PATCH] Make the secondary button adapt to shifting backgrounds

secondary used a flat, static tint that only worked over a plain
surface, so it looked out of place on the hero's hue-shifting gradient.
Add a backdrop blur (no border, per feedback) so it always reads
against whatever's actually behind it. Gave the button its own
background tokens instead of aliasing --mf-surface-2, and dropped the
now-unused --color-btn-glass tokens left over from the removed glass
variant.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/theme.css                        | 8 ++------
 web-player/src/routes/layout.css                          | 2 --
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 3217b15..d25f4e1 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-btn backdrop-blur-md text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index ec2380d..07e79ec 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,10 +14,8 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg: var(--mf-surface-2);
+	--mf-btn-bg: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
-	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -82,10 +80,8 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg: var(--mf-surface-2);
+	--mf-btn-bg: rgba(0, 0, 0, 0.07);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
-	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 8c8ee99..425fe11 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -32,8 +32,6 @@
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
 	--color-btn: var(--mf-btn-bg);
 	--color-btn-hover: var(--mf-btn-bg-hover);
-	--color-btn-glass: var(--mf-btn-secondary-bg);
-	--color-btn-glass-hover: var(--mf-btn-secondary-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;