web-player/docs/frontend-refactor-plan.md

@@ -772,7 +772,7 @@ Tareas:
 
 | Parte | Estado | Commit | Notas / decisiones tomadas |
 | ----- | ------ | ------ | -------------------------- |
-| P0    | ⬜     |        |                            |
+| P0    | ✅     | (pendiente) | Button primary/secondary se mantienen iguales (decisión del usuario) |
 | P1    | ⬜     |        |                            |
 | P2    | ⬜     |        |                            |
 | P3    | ⬜     |        |                            |

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

@@ -81,7 +81,7 @@
 					type="button"
 					onclick={() => createPlaylistModal.show()}
 					aria-label="Crear playlist"
-					class="text-base text-muted transition-colors hover:text-fg"
+					class="text-muted transition-colors hover:text-fg"
 				>
 					<Plus class="h-3.5 w-3.5" strokeWidth={1.25} />
 				</button>

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

@@ -26,7 +26,7 @@
 				type="button"
 				onclick={() => queuePanel.close()}
 				aria-label="Cerrar cola"
-				class="text-base text-fg-3 transition-colors hover:text-fg"
+				class="text-fg-3 transition-colors hover:text-fg"
 			>
 				<X class="h-4 w-4" />
 			</button>

web-player/src/lib/components/ui/Badge.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		tone?: 'neutral' | 'accent' | 'danger';
-		class?: string;
-		children: Snippet;
-	}
-
-	let { tone = 'neutral', class: klass = '', children }: Props = $props();
-
-	const tones = {
-		neutral: 'bg-surface-2 text-fg',
-		accent: 'bg-accent/20 text-accent',
-		danger: 'bg-danger/10 text-danger-fg'
-	};
-</script>
-
-<span
-	class="shrink-0 rounded-full px-2 py-0.5 text-sm leading-none font-semibold {tones[tone]} {klass}"
->
-	{@render children()}
-</span>

web-player/src/lib/components/ui/MediaCard.svelte

@@ -25,7 +25,7 @@
 	{oncontextmenu}
 >
 	{@render art(mediaCardArt)}
-	<div class="mt-2.5 truncate text-fg">{title}</div>
+	<div class="mt-2.5 truncate text-sm text-fg">{title}</div>
 	{#if subtitle}
 		<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>
 	{/if}

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

@@ -79,7 +79,7 @@
 	<h2 class="text-lg font-semibold tracking-tight text-fg">
 		¿Eliminar «{album.title}»?
 	</h2>
-	<p class="mt-2 text-base text-fg-3">
+	<p class="mt-2.5 text-sm leading-[1.65] text-fg-2">
 		Esta acción no se puede deshacer. Las canciones que contiene seguirán en tu biblioteca.
 	</p>
 	<div class="mt-6 flex items-center justify-end gap-3">

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

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Heart from '@lucide/svelte/icons/heart';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
 	import X from '@lucide/svelte/icons/x';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';

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

@@ -286,11 +286,11 @@
 								e.preventDefault();
 								playSpotlightTrack(i);
 							}}
-							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors hover:bg-hover {isTargetCurrent(
+							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors {isTargetCurrent(
 								target
 							)
 								? 'bg-accent-tint'
-								: ''}"
+								: 'hover:bg-hover'}"
 						>
 							<span class="w-5 shrink-0  text-center text-xs text-muted tabular-nums"
 								>{i + 1}</span