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

web-player: base design system tokens

Browse Source 
Add, additively (no component migration yet), the tokens from
section B.1 of the refactor plan: radii (tag/thumb), cover and icon
sizes, container widths, typographic tracking/leading, button colors
(--color-btn*), typography @utility recipes (text-display-*,
text-eyebrow, text-body, text-count), icon stroke
(stroke-thin/regular/bold), surfaces/grids (glass-bar, grid-cards*,
theme-transition), and the .animate-enter stagger via --i. Add
layout variables (--mf-player-side-w, --mf-menu-w, --mf-submenu-w,
--mf-range-*) and semantic z-index in theme.css. Clean up unused
color utilities (--color-accent-dim/glow/hair/line/muted,
--color-on-accent) and remove --mf-sidebar-bg (no importers) from
theme.css and tokens.ts. Scrollbar moves to tokens with a light-mode
variant.

Verified with npm run build (Tailwind compiles the @utility recipes
with responsive variants inside @apply).
This commit is contained in:
Admin
2026-09-20 22:21:04 +02:00
parent 96c75a32c8
commit 11789e78fe
5 changed files with 137 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/ui/Button.svelte
+1 -1
View File
@@ -44,7 +44,7 @@
secondary: subtleButton,
secondaryOnGlow: subtleButtonOnGlow,
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
danger: 'bg-danger text-on-accent hover:brightness-110'
danger: 'bg-danger text-on-art hover:brightness-110'
};
const classes = $derived(
web-player/src/lib/theme/theme.css
+20 -2
View File
@@ -4,7 +4,6 @@
page never flashes unstyled before hydration. See theme/tokens.ts. */
--mf-bg: oklch(0.068 0.008 145);
--mf-elevated: oklch(0.11 0.012 145);
--mf-sidebar-bg: linear-gradient(180deg, oklch(0.095 0.012 145), oklch(0.068 0.007 145));
--mf-panel-bg: oklch(0.09 0.01 145 / 0.28);
--mf-bar-bg: oklch(0.105 0.012 145 / 0.9);
--mf-hairline: oklch(0.62 0.03 145 / 0.08);
@@ -82,6 +81,23 @@
--mf-nav-h: 66px;
--mf-player-h: 78px;
--mf-safe-b: env(safe-area-inset-bottom, 0px);
--mf-player-side-w: 16rem;
--mf-menu-w: 15rem;
--mf-submenu-w: 16rem;
--mf-range-h: 3.5px;
--mf-range-thumb: 11px;
--mf-volume-w: 84px;
--mf-scrollbar: rgba(255, 255, 255, 0.18);
--mf-scrollbar-hover: rgba(255, 255, 255, 0.32);
--z-raised: 10;
--z-sticky: 20;
--z-backdrop: 30;
--z-menu: 40;
--z-submenu: 50;
--z-modal: 60;
--z-grain: 80;
}
/* PlayerBar switches from its compact row to the full layout at `sm` (640px). */
@@ -110,7 +126,6 @@
:root[data-theme='light'] {
--mf-bg: oklch(0.97 0.006 90);
--mf-elevated: oklch(0.99 0.003 90);
--mf-sidebar-bg: oklch(0.97 0.006 90); /*linear-gradient(180deg, oklch(0.985 0.004 90), oklch(0.965 0.006 90));*/
--mf-panel-bg: oklch(0.97 0.006 90 / 0.7);
--mf-bar-bg: oklch(0.97 0.006 90 / 0.9);
--mf-hairline: rgba(0, 0, 0, 0.08);
@@ -128,6 +143,9 @@
--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);
--mf-border: rgba(0, 0, 0, 0.08);
--mf-border-strong: rgba(0, 0, 0, 0.14);
--mf-track: rgba(0, 0, 0, 0.12);
web-player/src/lib/theme/tokens.ts
-3
View File
@@ -67,9 +67,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
'--mf-bg': light ? `oklch(0.97 0.006 ${H})` : `oklch(0.068 0.008 ${H})`,
'--mf-elevated': light ? `oklch(0.99 0.003 ${H})` : `oklch(0.11 0.012 ${H})`,
'--mf-sidebar-bg': light
? `linear-gradient(180deg, oklch(0.985 0.004 ${H}), oklch(0.965 0.006 ${H}))`
: `linear-gradient(180deg, oklch(0.095 0.012 ${H}), oklch(0.068 0.007 ${H}))`,
'--mf-panel-bg': light ? `oklch(0.97 0.006 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
'--mf-bar-bg': light ? `oklch(0.97 0.006 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,