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.
This commit is contained in:
@@ -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'
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user