Web Player Refactor #2
@@ -35,14 +35,13 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
|
const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
|
||||||
const glass =
|
const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
|
||||||
'font-normal border border-hairline bg-btn-glass backdrop-blur-md text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
|
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
primary: subtle,
|
primary: subtle,
|
||||||
secondary: subtle,
|
secondary: subtle,
|
||||||
glass,
|
glass,
|
||||||
accent: 'bg-accent-btn text-accent-muted hover:bg-accent-btn-hover',
|
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
|
||||||
strong: 'bg-cta-strong text-ink hover:brightness-95',
|
strong: 'bg-cta-strong text-ink hover:brightness-95',
|
||||||
danger: 'bg-danger text-on-art hover:brightness-110'
|
danger: 'bg-danger text-on-art hover:brightness-110'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -16,8 +16,8 @@
|
|||||||
--mf-surface-hover: rgba(255, 255, 255, 0.06);
|
--mf-surface-hover: rgba(255, 255, 255, 0.06);
|
||||||
--mf-btn-bg: var(--mf-surface-2);
|
--mf-btn-bg: var(--mf-surface-2);
|
||||||
--mf-btn-bg-hover: var(--mf-surface-hover);
|
--mf-btn-bg-hover: var(--mf-surface-hover);
|
||||||
--mf-btn-secondary-bg: rgba(255, 255, 255, 0.03);
|
--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
|
||||||
--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.05);
|
--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
|
||||||
|
|
||||||
--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);
|
||||||
@@ -84,8 +84,8 @@
|
|||||||
--mf-surface-hover: #e8eceb;
|
--mf-surface-hover: #e8eceb;
|
||||||
--mf-btn-bg: var(--mf-surface-2);
|
--mf-btn-bg: var(--mf-surface-2);
|
||||||
--mf-btn-bg-hover: var(--mf-surface-hover);
|
--mf-btn-bg-hover: var(--mf-surface-hover);
|
||||||
--mf-btn-secondary-bg: rgba(0, 0, 0, 0.055);
|
--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
|
||||||
--mf-btn-secondary-bg-hover: 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: rgba(0, 0, 0, 0.18);
|
||||||
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
|
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
|
||||||
|
|||||||
@@ -20,7 +20,6 @@
|
|||||||
--color-muted: var(--mf-text-4);
|
--color-muted: var(--mf-text-4);
|
||||||
--color-accent: var(--mf-accent);
|
--color-accent: var(--mf-accent);
|
||||||
--color-accent-soft: var(--mf-accent-title);
|
--color-accent-soft: var(--mf-accent-title);
|
||||||
--color-accent-muted: var(--mf-accent-muted);
|
|
||||||
--color-accent-tint: var(--mf-accent-soft-bg);
|
--color-accent-tint: var(--mf-accent-soft-bg);
|
||||||
--color-accent-btn: var(--mf-accent-btn-bg);
|
--color-accent-btn: var(--mf-accent-btn-bg);
|
||||||
--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
|
--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
|
||||||
|
|||||||
Reference in New Issue
Block a user