Make the glass button variant more transparent and soften accent text

The secondary/glass Button variant used a flat, fairly opaque black or
white tint with no blur, so it didn't read as glass and clashed with
the hue-shifting hero background. Add a backdrop blur and a hairline
border (matching the app's existing glass-bar/glass-panel treatment)
and lower the tint opacity.

Wire up the already-computed but unused --mf-accent-muted token as
--color-accent-muted, and use it for the accent Button variant's text
instead of the higher-chroma --color-accent-soft, so it reads softer.
This commit is contained in:
2026-09-22 16:42:56 +02:00
parent 717e939038
commit a9bfcbbe2f
3 changed files with 8 additions and 6 deletions
@@ -35,13 +35,14 @@
};
const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
const glass =
'font-normal border border-hairline bg-btn-glass backdrop-blur-md text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
const variants = {
primary: subtle,
secondary: subtle,
glass,
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
accent: 'bg-accent-btn text-accent-muted hover:bg-accent-btn-hover',
strong: 'bg-cta-strong text-ink hover:brightness-95',
danger: 'bg-danger text-on-art hover:brightness-110'
};