Simplify design

web-player/src/lib/components/player/Queue.svelte

@@ -7,7 +7,7 @@
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
+	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -17,7 +17,7 @@
 
 {#if queuePanel.open}
 	<aside
-		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
+		transition:fly={{ x: 24, duration: 200, easing: expoOut }}
 		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
@@ -29,8 +29,8 @@
 		</div>
 
 		{#if player.current.id}
-			<p class="mb-3 text-eyebrow text-fg-3">Reproduciendo</p>
-			<div class="mb-6 rounded-control bg-accent-tint p-2.5">
+			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
+			<div class="mb-6 rounded-control surface-active p-2.5">
 				<MediaIdentity
 					trackId={player.current.id}
 					title={player.current.title}
@@ -42,12 +42,12 @@
 		{/if}
 
 		<div class="mb-3 flex items-center justify-between gap-3">
-			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-3"> A continuación </span>
+			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-2"> A continuación </span>
 			{#if upcoming.length > 0}
 				<button
 					type="button"
 					onclick={() => player.clearUpcoming()}
-					class="shrink-0 text-xs text-fg-3 transition-colors hover:text-fg"
+					class="shrink-0 text-xs text-fg-2 transition-colors hover:text-fg"
 				>
 					Vaciar
 				</button>
@@ -68,13 +68,12 @@
 				>
 					{#snippet trailing()}
 						{#if track.duration}
-							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(track.duration)}</span
-							>
+							<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(track.duration)}</span>
 						{/if}
 					{/snippet}
 				</ListRow>
 			{:else}
-				<p class="px-2 py-6 text-center text-xs text-fg-3">No hay más canciones en la cola.</p>
+				<p class="px-2 py-6 text-center text-xs text-fg-2">No hay más canciones en la cola.</p>
 			{/each}
 		</div>
 	</aside>