From b82fca0bc249535653419e6f45380d5af403679f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:34:34 +0200
Subject: [PATCH] Drop backdrop-blur on secondary for a consistent hue-tied
 tint

Sampling whatever's behind the button via backdrop-filter meant two
secondary buttons could render differently depending on what happened
to be nearby (e.g. dark album art bleeding into the blur), so
"Explorar musica" and "Aleatorio" ended up visibly different colors
despite being the same variant. Replace it with a fixed, hue-tied
translucent tint (bg-accent-tint, the same token family accent already
uses) so every secondary button computes to the identical color, ties
into the same dynamic accent hue as the rest of the app, and reads as
a softer sibling of the accent button instead of an unrelated gray.

Hover now steps up to bg-accent-btn (same hue family, stronger) instead
of a flat, hue-agnostic gray. Removed the now-unused --mf-btn-bg-hover/
--color-btn-hover tokens.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/theme.css                        | 2 --
 web-player/src/routes/layout.css                          | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index f85d018..ea89644 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-elevated/45 backdrop-blur-lg text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-accent-tint text-fg-2 hover:bg-accent-btn 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 bdd79e8..c397b6e 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,7 +14,6 @@
 	--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-hover: var(--mf-surface-hover);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -79,7 +78,6 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--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 24d2a6c..7191475 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -30,7 +30,6 @@
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
-	--color-btn-hover: var(--mf-btn-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;