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

Drop backdrop-blur on secondary for a consistent hue-tied tint

Browse Source 
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.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-09-22 17:34:34 +02:00
co-authored by Claude Sonnet 5
parent df70290631
commit 626283ba50
3 changed files with 1 additions and 4 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-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', 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/theme.css
-2
View File
@@ -14,7 +14,6 @@
--mf-surface: rgba(255, 255, 255, 0.022); --mf-surface: rgba(255, 255, 255, 0.022);
--mf-surface-2: rgba(255, 255, 255, 0.045); --mf-surface-2: rgba(255, 255, 255, 0.045);
--mf-surface-hover: rgba(255, 255, 255, 0.06); --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: rgba(255, 255, 255, 0.04);
--mf-border-strong: rgba(255, 255, 255, 0.09); --mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -79,7 +78,6 @@
--mf-surface: rgba(0, 0, 0, 0.035); --mf-surface: rgba(0, 0, 0, 0.035);
--mf-surface-2: rgba(0, 0, 0, 0.06); --mf-surface-2: rgba(0, 0, 0, 0.06);
--mf-surface-hover: #e8eceb; --mf-surface-hover: #e8eceb;
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-scrollbar: rgba(0, 0, 0, 0.18); --mf-scrollbar: rgba(0, 0, 0, 0.18);
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32); --mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
web-player/src/routes/layout.css
-1
View File
@@ -30,7 +30,6 @@
--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-hover: var(--mf-btn-bg-hover);
--radius-tag: 0.25rem; --radius-tag: 0.25rem;
--radius-thumb: 0.5rem; --radius-thumb: 0.5rem;