NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace secondary button's backdrop-blur with an equivalent fixed color

Browse Source 
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.
This commit is contained in:
Admin
2026-09-22 17:50:59 +02:00
parent b82fca0bc2
commit d6bff15f11
3 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/ui/primitives/Button.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
const variants = { const variants = {
primary: 'bg-cta-strong text-ink hover:brightness-95', 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', accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
danger: 'bg-danger text-on-art hover:brightness-110' danger: 'bg-danger text-on-art hover:brightness-110'
}; };
web-player/src/lib/theme/tokens.ts
+1
View File
@@ -55,6 +55,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
'--mf-ambient': light '--mf-ambient': light
? 'none' ? '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%)`, : `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 '--mf-hero-bg': light
? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})` ? `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%)`, : `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%)`,
web-player/src/routes/layout.css
+6
View File
@@ -30,6 +30,12 @@
--color-on-art-2: var(--mf-on-art-2); --color-on-art-2: var(--mf-on-art-2);
--color-danger: oklch(63.7% 0.15 25.331); --color-danger: oklch(63.7% 0.15 25.331);
--color-danger-fg: oklch(88.5% 0.062 18.334); --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-tag: 0.25rem;
--radius-thumb: 0.5rem; --radius-thumb: 0.5rem;