web-player: final sweep and guardrails

Add scripts/check-tokens.mjs (npm run lint:tokens, wired into lint) as a guardrail: fails if src/**/*.svelte reintroduces arbitrary values outside the B.4 allowlist, factory rounded-*, h-N w-N pairs (should be size-N), quarter-step fractional spacing, or literal hex/rgba() colors. Cleans up the repo until the script reports 0 violations: ~40 h-N w-N pairs -> size-N (mostly icons, via a one-off script), ~26 quarter-step fractional spacings rounded to the nearest integer (delta <=1px, e.g. py-2.75->py-3, gap-1.75->gap-2), stray factory radii (rounded-sm/lg, bare rounded) migrated to the matching tokens, and two tracking-[-0.02em] that matched the existing tracking-display token exactly but had never been migrated. Removes the stroke-thin/regular/bold recipes (added earlier, zero consumers) — decision made, not blocking: strokeWidth={n} (13 values, across almost every component) isn't migrated to CSS because there's no way to verify without Docker that lucide-svelte honors stroke-width by class instead of the prop, and a regression there would be silent across the whole app; the script documents this gap explicitly instead of pretending full coverage. Orphan detector: 0 components with no importers. Removes docs/design-system-refactor-plan.md (earlier plan, superseded by frontend-refactor-plan.md). web-player/CLAUDE.md gains a "Styles" section with the B.4 allowlist and the base components to reuse. Recalculates the baseline table (A.4) and logs it: 61->47 components, 44->11 arbitrary values (the remaining 11 on the allowlist), 13->8 distinct radii, 0 lint:tokens violations. Verified with npm run check (0 errors), npm run lint:tokens (0 violations) and npm run build. Smoke-tested /login with no console errors attributable to this change.
2026-09-21 15:05:07 +02:00
parent b60a87adb5
commit 1b6d7ecb42
32 changed files with 200 additions and 453 deletions
@@ -58,7 +58,7 @@
 {:else}
 	<button {type} disabled={disabled || loading} {onclick} class={classes}>
 		{#if loading}
-			<LoaderCircle class="h-4 w-4 animate-spin" />
+			<LoaderCircle class="size-4 animate-spin" />
 		{/if}
 		{@render children()}
 	</button>
@@ -13,15 +13,15 @@
 </script>

 <label class="flex items-center gap-3 text-sm text-fg-2 {klass}">
-	<span class="relative inline-grid h-5 w-5 shrink-0 place-items-center">
+	<span class="relative inline-grid size-5 shrink-0 place-items-center">
 		<input
 			type="checkbox"
 			{name}
 			bind:checked
-			class="peer h-5 w-5 cursor-pointer appearance-none rounded border border-line bg-surface transition checked:border-accent-soft checked:bg-accent-soft focus-visible:border-accent/60 focus-visible:outline-none"
+			class="peer size-5 cursor-pointer appearance-none rounded-tag border border-line bg-surface transition checked:border-accent-soft checked:bg-accent-soft focus-visible:border-accent/60 focus-visible:outline-none"
 		/>
 		<Check
-			class="pointer-events-none absolute h-3.5 w-3.5 text-ink opacity-0 transition peer-checked:opacity-100"
+			class="pointer-events-none absolute size-3.5 text-ink opacity-0 transition peer-checked:opacity-100"
 			strokeWidth={3}
 		/>
 	</span>
@@ -14,7 +14,7 @@
 	const classes = $derived(
 		href
 			? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
-			: `flex items-center gap-1.75 rounded-full px-3.5 py-1.75 text-xs font-medium transition ${
+			: `flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
 					selected
 						? 'bg-cta-strong text-ink'
 						: 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'
@@ -19,10 +19,10 @@
 </script>

 {#if overlay}
-	<div class="absolute inset-0 flex items-end justify-center gap-0.75 bg-scrim/45 pb-2.5 {klass}">
+	<div class="absolute inset-0 flex items-end justify-center gap-1 bg-scrim/45 pb-2.5 {klass}">
 		{#each delays as delay (delay)}
 			<span
-				class="h-3.5 w-0.75 origin-bottom rounded-full bg-on-art"
+				class="h-3.5 w-1 origin-bottom rounded-full bg-on-art"
 				style="animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
 					? 'paused'
 					: 'running'}"
@@ -7,7 +7,7 @@
 </script>

 <span
-	class="grid h-4 w-4 shrink-0 place-items-center rounded-sm bg-fg-3 text-xs leading-4 font-bold text-bg {klass}"
+	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-3 text-xs leading-4 font-bold text-bg {klass}"
 	title="Contenido explícito"
 	aria-label="Contenido explícito">E</span
 >
@@ -25,7 +25,7 @@
 	}: Props = $props();

 	const SIZE: Record<'default' | 'hero', string> = {
-		default: 'h-40 w-40 sm:h-52 sm:w-52 rounded-control',
+		default: 'size-40 sm:size-52 rounded-control',
 		hero: 'size-cover-hero rounded-art-lg'
 	};

@@ -34,6 +34,6 @@

 <div bind:this={sentinel} class="flex min-h-12 items-center justify-center py-8">
 	{#if loading}
-		<LoaderCircle class="h-5 w-5 animate-spin text-muted" />
+		<LoaderCircle class="size-5 animate-spin text-muted" />
 	{/if}
 </div>
@@ -49,7 +49,7 @@

 	const classes = $derived(
 		`flex items-center gap-3 text-left transition-colors ${
-			variant === 'card' ? 'rounded-art p-2.25 pr-3.5' : 'rounded-control p-2'
+			variant === 'card' ? 'rounded-art p-2 pr-3.5' : 'rounded-control p-2'
 		} ${active ? 'bg-accent-tint' : 'hover:bg-hover'} ${klass}`
 	);
 </script>
@@ -6,7 +6,7 @@
 	let { size = 'sm' }: Props = $props();

 	const MARK: Record<'sm' | 'lg', string> = {
-		sm: 'size-5.5 rounded-lg',
+		sm: 'size-5.5 rounded-thumb',
 		lg: 'size-8 rounded-control'
 	};

@@ -95,7 +95,7 @@
 						</h2>
 					</div>
 					<IconButton label="Cerrar" onclick={onClose} class="shrink-0">
-						<X class="h-4 w-4" />
+						<X class="size-4" />
 					</IconButton>
 				</div>
 			{/if}
@@ -30,7 +30,7 @@
 		{title}
 	</h2>
 	{#if subtitle}
-		<p class="mt-1.25 text-xs text-fg-3">{subtitle}</p>
+		<p class="mt-1 text-xs text-fg-3">{subtitle}</p>
 	{/if}
 {/snippet}