Changes on the design

web-player/src/lib/components/layout/Sidebar.svelte

@@ -34,10 +34,6 @@
 	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 theme-transition lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
-	<a href="/" class="px-3 pb-3">
-		<Logo size="sm" />
-	</a>
-
 	<nav class="flex flex-col gap-1">
 		{#each navLinks as link (link.href)}
 			{@const active = isActive(link.href)}
@@ -48,7 +44,7 @@
 					? 'bg-surface-2 text-fg'
 					: 'text-fg-2 hover:bg-hover hover:text-fg'}"
 			>
-				<link.icon class="size-4.5 shrink-0" strokeWidth={1.5} />
+				<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
 				<span class="flex-1 truncate">{link.label}</span>
 				{#if link.count}
 					<span class="text-xs text-muted tabular-nums">{link.count}</span>
@@ -68,12 +64,12 @@
 					size="xs"
 					onclick={() => createPlaylistModal.show()}
 				>
-					<Plus class="size-icon-sm" strokeWidth={1.25} />
+					<Plus class="size-icon-sm text-muted" strokeWidth={1.25} />
 				</IconButton>
 			{/if}
 		</div>
 
-		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-4.5">
+		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-icon-md">
 			{#each playlists as playlist (playlist.id)}
 				{@const active = page.url.pathname === `/playlists/${playlist.id}`}
 				<ListRow

web-player/src/lib/components/ui/primitives/Button.svelte

@@ -3,7 +3,7 @@
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 
 	interface Props {
-		variant?: 'primary' | 'secondary' | 'glass' | 'accent' | 'strong' | 'danger';
+		variant?: 'primary' | 'secondary' | 'accent' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		type?: 'button' | 'submit';
 		href?: string;
@@ -34,15 +34,10 @@
 		lg: 'px-6 py-3.5 text-sm'
 	};
 
-	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 variants = {
-		primary: subtle,
+		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: subtle,
+		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
-		glass,
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
-		strong: 'bg-cta-strong text-ink hover:brightness-95',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 

web-player/src/lib/components/ui/primitives/Logo.svelte

@@ -17,6 +17,6 @@
 </script>
 
 <span class="flex items-center gap-3">
-	<span class="{MARK[size]} bg-[image:var(--mf-logo-grad)]"></span>
+	<span class="{MARK[size]} bg-(image:--mf-logo-grad)"></span>
 	<span class={TEXT[size]}>Musify</span>
 </span>

web-player/src/routes/(app)/albums/[id]/+page.svelte

@@ -2,10 +2,6 @@
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import X from '@lucide/svelte/icons/x';
 	import Plus from '@lucide/svelte/icons/plus';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
-	import SquarePencil from '@lucide/svelte/icons/square-pen';
-	import Trash from '@lucide/svelte/icons/trash';
 	import Page from '$lib/components/ui/layout/Page.svelte';
 	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
 	import Modal from '$lib/components/ui/overlay/Modal.svelte';
@@ -76,20 +72,16 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>
 			{#if isOwner}
 				<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-					<SquarePencil class="size-4" strokeWidth={1.5} />
 					Editar
 				</Button>
 				<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
-					<Trash class="size-4" strokeWidth={1.5} />
 					Eliminar
 				</Button>
 			{/if}

web-player/src/routes/(app)/mixes/[id]/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import {
 		player,
@@ -75,10 +73,8 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={() => playAllOrToggle(queue)} disabled={queue.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>

web-player/src/routes/(app)/playlists/[id]/+page.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import X from '@lucide/svelte/icons/x';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
-	import SquarePencil from '@lucide/svelte/icons/square-pen';
-	import Trash from '@lucide/svelte/icons/trash';
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import Page from '$lib/components/ui/layout/Page.svelte';
 	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
@@ -66,19 +62,15 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>
 			<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-				<SquarePencil class="size-4" strokeWidth={1.5} />
 				Editar
 			</Button>
 			<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
-				<Trash class="size-4" strokeWidth={1.5} />
 				Eliminar
 			</Button>
 		{/snippet}

web-player/src/routes/+page.svelte

@@ -151,12 +151,12 @@
 				</p>
 				<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
 					{#if spotlight}
-						<Button variant="strong" onclick={playSpotlight}>
+						<Button variant="primary" onclick={playSpotlight}>
 							{heroPlaying ? 'Pausar' : 'Reanudar'}
 							{spotlight.name}
 						</Button>
 					{/if}
-					<Button href="/explore" variant="glass">Explorar música</Button>
+					<Button href="/explore" variant="secondary">Explorar música</Button>
 				</div>
 			</div>
 
@@ -242,7 +242,7 @@
 						</p>
 						<div class="mt-5 flex gap-2.5">
 							<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
-							<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
+							<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
 						</div>
 					</div>
 					<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
@@ -314,7 +314,7 @@
 							trackId={track.id}
 						>
 							{#snippet leading()}
-								<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
+								<span class="flex h-3.5 w-icon-md shrink-0 items-end justify-center">
 									{#if isCurrent}
 										<EqBars size={13} paused={!player.playing} />
 									{:else}