web-player: buttons (Button, IconButton, PlayButton)

Button: subtle variants (primary/secondary, left unchanged per the
user's call), glass (formerly secondaryOnGlow, with its own
font-normal), accent, strong (cta-strong/ink, replacing the `!`
overrides on the Home hero), danger. Uses the --color-btn* tokens
instead of bg-[var(--mf-btn-...)]. Radius unified to rounded-control.

IconButton: adds shape (square/round), size (xs/sm/md/lg), tone
(muted/subtle/plain), pressed (aria-pressed + text-accent),
href/reload (links), surface (permanent background + hover to
surface-hover instead of the generic `hover` alias, which matched
surface-2 and gave no contrast).

New PlayButton: a single place for the play/pause SVGs, strong/glass
variants, as="span" for non-interactive overlays. Replaces
TransportControls' main button, the MixTile overlay, and the "Top
result" circle in Explore.

Migrated to IconButton: close queue, "Create playlist" (Sidebar),
Like (TrackInfo, with pressed), queue (PlayerExtras), back (TopBar),
login (MobileHeader), and the row actions in tables (remove/add, size
xs). BackLink uses size-icon-sm and drops a duplicate hover.

Decision (not blocking): remove TopBar's decorative "forward" button
and PlayerExtras' decorative AlignJustify icon (visually dead code).
TransportControls' buttons (shuffle/prev/next/repeat) are
deliberately left unmigrated: they currently have no background or
hit-box of their own, and IconButton always applies a fixed-size
box — migrating them would have added a visible hover pill that
couldn't be verified without Docker this session.

Verified with npm run check/build.

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

@@ -1,22 +1,19 @@
 <script lang="ts">
 	import VolumeControl from './VolumeControl.svelte';
+	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import AlignJustify from '@lucide/svelte/icons/align-justify';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 </script>
 
-<div class="hidden w-64 shrink-0 items-center justify-end gap-3.5 sm:flex">
-	<span aria-hidden="true" class="text-fg-3">
-		<AlignJustify class="h-3.75 w-3.75" strokeWidth={1.8} />
-	</span>
+<div class="hidden w-(--mf-player-side-w) shrink-0 items-center justify-end gap-3.5 sm:flex">
 	<VolumeControl />
-	<button
-		type="button"
+	<IconButton
+		label="Cola de reproducción"
+		tone="plain"
+		size="xs"
+		pressed={queuePanel.open}
 		onclick={() => queuePanel.toggle()}
-		aria-pressed={queuePanel.open}
-		aria-label="Cola de reproducción"
-		class="transition-colors hover:text-fg {queuePanel.open ? 'text-fg' : 'text-fg-2'}"
 	>
-		<ListMusic class="h-4 w-4" strokeWidth={1.8} />
-	</button>
+		<ListMusic class="size-icon-sm" strokeWidth={1.8} />
+	</IconButton>
 </div>

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

@@ -3,6 +3,7 @@
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
+	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import { fmtTime } from '$lib/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
@@ -22,14 +23,9 @@
 	>
 		<div class="mb-5 flex items-center justify-between">
 			<h2 class="font-display text-base font-medium tracking-tight text-fg">En cola</h2>
-			<button
-				type="button"
-				onclick={() => queuePanel.close()}
-				aria-label="Cerrar cola"
-				class="text-fg-3 transition-colors hover:text-fg"
-			>
-				<X class="h-4 w-4" />
-			</button>
+			<IconButton label="Cerrar cola" tone="plain" size="xs" onclick={() => queuePanel.close()}>
+				<X class="size-icon-md" />
+			</IconButton>
 		</div>
 
 		{#if player.current.id}

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

@@ -4,6 +4,7 @@
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
+	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import Heart from '@lucide/svelte/icons/heart';
 
 	interface Props {
@@ -52,14 +53,14 @@
 		/>
 	</div>
 	{#if !compact}
-		<button
-			type="button"
+		<IconButton
+			label={isLiked ? 'Quitar de Me gusta' : 'Añadir a Me gusta'}
+			tone="plain"
+			size="xs"
+			pressed={isLiked}
 			onclick={toggleLike}
-			aria-label={isLiked ? 'Quitar de Me gusta' : 'Añadir a Me gusta'}
-			aria-pressed={isLiked}
-			class="shrink-0 transition hover:opacity-80 {isLiked ? 'text-accent' : 'text-fg-3'}"
 		>
-			<Heart class="h-4 w-4" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.7} />
-		</button>
+			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.7} />
+		</IconButton>
 	{/if}
 </div>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
+	import PlayButton from '$lib/components/ui/PlayButton.svelte';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import Repeat from '@lucide/svelte/icons/repeat';
 
@@ -36,23 +37,11 @@
 		</svg>
 	</button>
 
-	<button
-		type="button"
+	<PlayButton
+		playing={player.playing}
 		onclick={() => player.toggle()}
-		aria-label={player.playing ? 'Pausar' : 'Reproducir'}
-		class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-cta-strong text-ink transition duration-150 hover:brightness-95"
-	>
-		{#if player.playing}
-			<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor">
-				<rect x="3" y="1" width="3" height="13" rx="1" />
-				<rect x="9" y="1" width="3" height="13" rx="1" />
-			</svg>
-		{:else}
-			<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor">
-				<path d="M3 1.5v12l10-6z" />
-			</svg>
-		{/if}
-	</button>
+		label={player.playing ? 'Pausar' : 'Reproducir'}
+	/>
 
 	<button type="button" onclick={() => player.next()} aria-label="Siguiente" class={sideClass}>
 		<svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor">