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

Make the secondary button adapt to shifting backgrounds

Browse Source 
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.
This commit is contained in:
Admin
2026-09-22 17:15:53 +02:00
parent 9064ef687c
commit 434b2c1305
3 changed files with 3 additions and 9 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 = {
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'
};
web-player/src/lib/theme/theme.css
+2 -6
View File
@@ -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);