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/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte

@@ -54,7 +54,7 @@
 							update()}
 				>
 					<input type="hidden" name="trackId" value={track.id} />
-					<IconButton type="submit" label="Quitar del álbum" size="sm" revealOnHover>
+					<IconButton type="submit" label="Quitar del álbum" size="xs" revealOnHover>
 						<X class="h-3.5 w-3.5" />
 					</IconButton>
 				</form>

web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte

@@ -55,7 +55,7 @@
 							update()}
 				>
 					<input type="hidden" name="trackId" value={track.id} />
-					<IconButton type="submit" label="Añadir al álbum" size="sm" revealOnHover>
+					<IconButton type="submit" label="Añadir al álbum" size="xs" revealOnHover>
 						<Plus class="h-3.5 w-3.5" />
 					</IconButton>
 				</form>

web-player/src/routes/(app)/explore/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Music from '@lucide/svelte/icons/music';
-	import Play from '@lucide/svelte/icons/play';
 	import { player } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/albums';
 	import { fmtTime, fmtPlays } from '$lib/format';
@@ -11,6 +10,7 @@
 	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import Avatar from '$lib/components/ui/Avatar.svelte';
+	import PlayButton from '$lib/components/ui/PlayButton.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
 	import SearchResultRow from '$lib/components/ui/SearchResultRow.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
@@ -339,11 +339,7 @@
 					{/if}
 				</div>
 
-				<span
-					class="grid h-11.5 w-11.5 shrink-0 place-items-center rounded-full bg-cta-strong text-ink transition group-hover/top:brightness-110"
-				>
-					<Play class="h-4 w-4" fill="currentColor" strokeWidth={0} />
-				</span>
+				<PlayButton as="span" size="lg" label="Reproducir" class="group-hover/top:brightness-110" />
 			{/snippet}
 
 			{#if topResult.kind === 'track'}

web-player/src/routes/(app)/library/+page.svelte

@@ -84,7 +84,7 @@
 								update()}
 					>
 						<input type="hidden" name="trackId" value={track.id} />
-						<IconButton type="submit" label="Borrar canción" size="sm" revealOnHover>
+						<IconButton type="submit" label="Borrar canción" size="xs" revealOnHover>
 							<X class="h-3.5 w-3.5" />
 						</IconButton>
 					</form>

web-player/src/routes/(app)/liked/+page.svelte

@@ -98,7 +98,7 @@
 					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 					<IconButton
 						label="Quitar de Me gusta"
-						size="sm"
+						size="xs"
 						revealOnHover
 						onclick={() => liked.toggle(track)}
 					>

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -62,7 +62,7 @@
 						update()}
 			>
 				<input type="hidden" name="trackId" value={track.id} />
-				<IconButton type="submit" label="Quitar de la playlist" size="sm" revealOnHover>
+				<IconButton type="submit" label="Quitar de la playlist" size="xs" revealOnHover>
 					<X class="h-3.5 w-3.5" />
 				</IconButton>
 			</form>

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

@@ -150,18 +150,12 @@
 				</p>
 				<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
 					{#if spotlight}
-						<Button
-							variant="accent"
-							class="!bg-cta-strong !text-ink hover:!brightness-95"
-							onclick={playSpotlight}
-						>
+						<Button variant="strong" onclick={playSpotlight}>
 							{heroPlaying ? 'Pausar' : 'Reanudar'}
 							{spotlight.name}
 						</Button>
 					{/if}
-					<Button href="/explore" variant="secondaryOnGlow" class="!font-normal"
-						>Explorar música</Button
-					>
+					<Button href="/explore" variant="glass">Explorar música</Button>
 				</div>
 			</div>
 
@@ -274,7 +268,7 @@
 					</p>
 					<div class="mt-5 flex gap-2.5">
 						<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
-						<Button variant="secondaryOnGlow" onclick={shuffleSpotlight}>Aleatorio</Button>
+						<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
 					</div>
 				</div>
 				<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">