From bd07b1134ee04bffad161c7cf0578bcb2b572275 Mon Sep 17 00:00:00 2001 From: XShine555 Date: Thu, 24 Sep 2026 11:56:09 +0200 Subject: [PATCH] web-player: fix icon size guardrail and add larger icon tokens --- web-player/CLAUDE.md | 2 +- web-player/scripts/check-tokens.mjs | 2 +- .../src/lib/components/ui/primitives/InfiniteScroll.svelte | 2 +- web-player/src/routes/(app)/upload/+page.svelte | 6 +++--- web-player/src/routes/layout.css | 2 ++ 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md index 1345cec..8d01658 100644 --- a/web-player/CLAUDE.md +++ b/web-player/CLAUDE.md @@ -63,7 +63,7 @@ npm run lint:tokens # scripts/check-tokens.mjs, the design system guardrail The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utility` recipes) and in `src/lib/theme/` (`theme.css` for the static neutrals, `tokens.ts` for the dynamic tokens that depend on the user's hue). `scripts/check-tokens.mjs` (run as `npm run lint:tokens`, part of `lint`) fails on a stock radius, an `h-N w-N` pair, fractional quarter spacing, a literal hex/`rgba()`, or an arbitrary `-[…]` value outside its whitelist, so check that script before adding one. - **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills and circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or a bare `rounded`. -- **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs` through `size-cover-hero`). +- **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl/2xl/3xl`; covers: `size-cover-xs` through `size-cover-hero`). - **Typography:** use the recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, with tracking through `tracking-display`/`tracking-eyebrow` rather than a loose `tracking-[…]`. - **Spacing:** stick to the Tailwind scale in `.5` steps and avoid quarters like `.25`/`.75`, unless the semantic token calls for it (for example `mb-4.5` in `SectionHeading`). - **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth. diff --git a/web-player/scripts/check-tokens.mjs b/web-player/scripts/check-tokens.mjs index 19a9164..4f2e14e 100644 --- a/web-player/scripts/check-tokens.mjs +++ b/web-player/scripts/check-tokens.mjs @@ -45,7 +45,7 @@ for (const file of files) { } for (const icon of icons) { - const tag = line.match(new RegExp(`<${icon}\s[^>]*`)); + const tag = line.match(new RegExp(`<${icon}\\s[^>]*`)); if (!tag) continue; if (ICON_PIXEL_SIZE.test(tag[0])) { violations.push(`${file}:${lineNo} — icono con size={N}: usa una clase size-icon-*`); diff --git a/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte index 7074c58..49ba340 100644 --- a/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte +++ b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte @@ -42,7 +42,7 @@
{#if loading} - + {:else if error}
No se pudo cargar más. diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte index 37122bf..05716c6 100644 --- a/web-player/src/routes/(app)/upload/+page.svelte +++ b/web-player/src/routes/(app)/upload/+page.svelte @@ -149,7 +149,7 @@ {#if status === 'done'} - +

¡Subida!

@@ -210,9 +210,9 @@ aria-label="Seleccionar archivo de audio" /> {#if audioName === ''} - + {:else} - + {/if} {#if audioName === ''}

diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css index 98e3f0e..c6d0ea4 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -57,6 +57,8 @@ --spacing-icon-md: 1.125rem; --spacing-icon-lg: 1.25rem; --spacing-icon-xl: 2.25rem; + --spacing-icon-2xl: 1.75rem; + --spacing-icon-3xl: 2.5rem; --spacing-section: 2.875rem; --container-prose-sm: 26rem;