From d6bff15f119f581800150597e94b55b5a93c866b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:50:59 +0200
Subject: [PATCH] Replace secondary button's backdrop-blur with an equivalent
 fixed color

backdrop-blur samples whatever is actually behind the element, so two
secondary buttons with identical classes could render differently
depending on nearby content (e.g. dark album art bleeding into the
blur near the spotlight card). Replace it with a fixed color-mix that
reproduces the same result mathematically instead of sampling pixels:
45% --mf-elevated over the hero/spotlight surface's own tint color
(16% --mf-hero-tint over --mf-bg, the same ratio hero-surface itself
uses), computed via CSS color-mix() rather than a backdrop-filter.

Verified against the previous blur version: both now compute to the
identical color(srgb 0.9329 0.9611 0.9332), matching what the blurred
button rendered against the same hero background, but fixed so every
secondary button is now guaranteed pixel-identical regardless of what
happens to be nearby.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/tokens.ts                        | 1 +
 web-player/src/routes/layout.css                          | 6 ++++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index ea89644..3217b15 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-accent-tint text-fg-2 hover:bg-accent-btn hover:text-fg',
+		secondary: 'bg-btn 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/tokens.ts b/web-player/src/lib/theme/tokens.ts
index faa255e..266cec8 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -55,6 +55,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
+		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
 			? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})`
 			: `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`,
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 7191475..9a6cb67 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -30,6 +30,12 @@
 	--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: color-mix(
+		in srgb,
+		var(--mf-elevated) 45%,
+		color-mix(in srgb, var(--mf-hero-tint) 16%, var(--mf-bg))
+	);
+	--color-btn-hover: var(--mf-btn-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;