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

Unify web-player design tokens and componentize collection headers

Browse Source 
Migrates remaining one-off colors (bg-white/[N%], border-white/N, hardcoded
shadows/gradients) to the existing --mf-* tokens so light mode reacts
consistently everywhere, including a fix to --color-hover which was
hardcoded instead of pointing at --mf-surface-2. Extracts CollectionHeader
(album/playlist/mix/liked headers) and AccountMenu (TopBar/MobileHeader)
to remove five and two duplicated implementations respectively, and
normalizes inconsistent empty-state copy.
This commit is contained in:
Admin
2026-09-15 17:53:47 +02:00
parent 7861600081
commit f1756468bc
40 changed files with 463 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/player/Queue.svelte
+9 -9
View File
@@ -21,7 +21,7 @@
style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
>
<div class="mb-5 flex items-center justify-between">
<h2 class="font-display text-[14.5px] font-semibold tracking-[-0.02em] text-fg">En cola</h2>
<h2 class="font-display text-base font-semibold tracking-[-0.02em] text-fg">En cola</h2>
<button
type="button"
onclick={() => queuePanel.close()}
@@ -33,7 +33,7 @@
</div>
{#if player.current.id}
<p class="mb-2.75 text-[10.5px] font-semibold tracking-[0.12em] text-muted uppercase">
<p class="mb-2.75 text-xs font-semibold tracking-[0.12em] text-muted uppercase">
Reproduciendo
</p>
<div class="mb-6 flex items-center gap-3 rounded-xl bg-accent-tint p-2.5">
@@ -45,13 +45,13 @@
class="h-10 w-10 shrink-0 rounded-[9px]"
/>
<div class="min-w-0">
<div class="truncate text-[12.5px] font-semibold text-accent-soft">
<div class="truncate text-sm font-semibold text-accent-soft">
{player.current.title}
</div>
<ArtistLink
name={player.current.artist || '—'}
ownerUserId={player.current.ownerUserId}
class="mt-0.75 text-[11px] text-fg-3"
class="mt-0.75 text-xs text-fg-3"
/>
</div>
</div>
@@ -59,7 +59,7 @@
<div class="mb-2.75 flex items-center justify-between gap-3">
<span
class="min-w-0 flex-1 truncate text-[10.5px] font-semibold tracking-[0.12em] text-muted uppercase"
class="min-w-0 flex-1 truncate text-xs font-semibold tracking-[0.12em] text-muted uppercase"
>
A continuación
</span>
@@ -67,7 +67,7 @@
<button
type="button"
onclick={() => player.clearUpcoming()}
class="shrink-0 text-[11px] text-muted transition-colors hover:text-fg"
class="shrink-0 text-xs text-muted transition-colors hover:text-fg"
>
Vaciar
</button>
@@ -96,15 +96,15 @@
class="h-9 w-9 shrink-0 rounded-lg opacity-90"
/>
<div class="min-w-0 flex-1">
<div class="truncate text-[12.5px] font-medium text-fg">{track.title}</div>
<div class="truncate text-sm font-medium text-fg">{track.title}</div>
<ArtistLink
name={track.artist || '—'}
ownerUserId={track.ownerUserId}
class="mt-0.5 text-[11px] text-fg-3"
class="mt-0.5 text-xs text-fg-3"
/>
</div>
{#if track.duration}
<span class="shrink-0 text-[11px] text-muted tabular-nums"
<span class="shrink-0 text-xs text-muted tabular-nums"
>{fmtTime(track.duration)}</span
>
{/if}
web-player/src/lib/components/player/SeekBar.svelte
+2 -2
View File
@@ -28,7 +28,7 @@
</button>
{:else}
<div class="flex w-full max-w-135 items-center gap-2.75">
<span class="min-w-8 text-right text-[10.5px] text-fg-3 tabular-nums">
<span class="min-w-8 text-right text-xs text-fg-3 tabular-nums">
{fmtTime(player.progress)}
</span>
<button
@@ -41,7 +41,7 @@
<div class="h-full rounded-full bg-accent" style="width:{player.progressPercent}%"></div>
</div>
</button>
<span class="min-w-8 text-[10.5px] text-fg-3 tabular-nums">
<span class="min-w-8 text-xs text-fg-3 tabular-nums">
{fmtTime(player.current.duration)}
</span>
</div>
web-player/src/lib/components/player/TrackInfo.svelte
+4 -6
View File
@@ -35,26 +35,24 @@
src={player.current.coverUrl}
size="small"
alt={player.current.title}
class="h-11 w-11 shrink-0 rounded-[11px] shadow-[0_8px_20px_rgba(0,0,0,0.5)] md:h-12 md:w-12"
class="h-11 w-11 shrink-0 rounded-[11px] shadow-cover-xs md:h-12 md:w-12"
/>
{:else}
<div
class="h-11 w-11 shrink-0 rounded-[11px] bg-surface shadow-[0_8px_20px_rgba(0,0,0,0.5)] md:h-12 md:w-12"
></div>
<div class="h-11 w-11 shrink-0 rounded-[11px] bg-surface shadow-cover-xs md:h-12 md:w-12"></div>
{/if}
<div class="min-w-0 flex-1">
<div class="flex min-w-0 items-center gap-1.5">
{#if player.current.explicit}
<ExplicitBadge />
{/if}
<span class="truncate text-[13px] font-semibold tracking-[-0.01em] text-fg"
<span class="truncate text-sm font-semibold tracking-[-0.01em] text-fg"
>{player.current.title}</span
>
</div>
<ArtistLink
name={player.current.artist || '—'}
ownerUserId={player.current.ownerUserId}
class="mt-0.5 text-[11.5px] text-fg-3"
class="mt-0.5 text-xs text-fg-3"
/>
</div>
{#if !compact}