From cbbde957737e0f616c00e824ab23a5c191ed9ace Mon Sep 17 00:00:00 2001 From: XShine555 Date: Wed, 23 Sep 2026 21:55:00 +0200 Subject: [PATCH] Set global icon stroke width and remove per-icon strokeWidth props --- web-player/CLAUDE.md | 2 +- web-player/src/lib/components/layout/MobileHeader.svelte | 2 +- web-player/src/lib/components/layout/Sidebar.svelte | 6 +++--- web-player/src/lib/components/layout/TabsBar.svelte | 2 +- web-player/src/lib/components/layout/TopBar.svelte | 4 ++-- web-player/src/lib/components/player/PlayerBar.svelte | 8 ++++---- web-player/src/lib/components/player/TrackInfo.svelte | 4 ++-- .../src/lib/components/player/TransportControls.svelte | 4 ++-- .../src/lib/components/ui/forms/ImageDropzone.svelte | 2 +- web-player/src/lib/components/ui/media/TrackList.svelte | 2 +- web-player/src/lib/components/ui/overlay/Dialog.svelte | 2 +- .../src/lib/components/ui/primitives/Checkbox.svelte | 1 - .../src/lib/components/ui/primitives/EmptyState.svelte | 2 +- web-player/src/routes/(app)/albums/+page.svelte | 2 +- web-player/src/routes/(app)/liked/+page.svelte | 2 +- web-player/src/routes/(app)/upload/+page.svelte | 8 ++++---- web-player/src/routes/layout.css | 2 +- 17 files changed, 27 insertions(+), 28 deletions(-) diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md index fc1f190..153300d 100644 --- a/web-player/CLAUDE.md +++ b/web-player/CLAUDE.md @@ -55,7 +55,7 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili - **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. - **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in `scripts/check-tokens.mjs` (the stagger variable `--i`, tile hue, menu position, progress width, `text-[clamp(…)]`, `leading-[…]` on login's display type, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `my-`/`py-[Ndvh]` for vertical centering, `transition-[filter]` on genre tiles, and `bg-[image:var(--mf-*)]`). Everything else should become a token. - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`. -- Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass. +- **Icon stroke:** one global rule (`svg.lucide { stroke-width: 1.25 }` in `layout.css`) sets the stroke for every icon. Never pass `strokeWidth` to an icon, since any CSS rule overrides the SVG attribute and it would do nothing. For a different stroke on one icon, use a Tailwind `stroke-*` utility. ## Motion diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte index 26f9750..98c3062 100644 --- a/web-player/src/lib/components/layout/MobileHeader.svelte +++ b/web-player/src/lib/components/layout/MobileHeader.svelte @@ -44,7 +44,7 @@ {:else} - + {/if} diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte index 562c24d..b1322e0 100644 --- a/web-player/src/lib/components/layout/Sidebar.svelte +++ b/web-player/src/lib/components/layout/Sidebar.svelte @@ -48,7 +48,7 @@ ? 'bg-surface-2 text-fg' : 'text-fg-2 hover:bg-hover hover:text-fg'}" > - + {link.label} {#if link.count} {link.count} @@ -68,7 +68,7 @@ size="xs" onclick={() => createPlaylistModal.show()} > - + {/if} @@ -93,7 +93,7 @@ onclick={() => createPlaylistModal.show()} class="flex items-center gap-2 rounded-control px-3 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg-2" > - + Crear tu primera lista {/each} diff --git a/web-player/src/lib/components/layout/TabsBar.svelte b/web-player/src/lib/components/layout/TabsBar.svelte index 9bf19b0..4d79360 100644 --- a/web-player/src/lib/components/layout/TabsBar.svelte +++ b/web-player/src/lib/components/layout/TabsBar.svelte @@ -30,7 +30,7 @@ ? 'text-fg' : 'text-fg-2'}" > - + {link.label} {/each} diff --git a/web-player/src/lib/components/layout/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte index 897f2cb..b81907f 100644 --- a/web-player/src/lib/components/layout/TopBar.svelte +++ b/web-player/src/lib/components/layout/TopBar.svelte @@ -62,14 +62,14 @@ size="xs" onclick={() => history.back()} > - +
diff --git a/web-player/src/lib/components/ui/media/TrackList.svelte b/web-player/src/lib/components/ui/media/TrackList.svelte index 083b80b..24d53c5 100644 --- a/web-player/src/lib/components/ui/media/TrackList.svelte +++ b/web-player/src/lib/components/ui/media/TrackList.svelte @@ -95,7 +95,7 @@ style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}" > {#if index} - + {/if} Título {#each columns as column (column)} diff --git a/web-player/src/lib/components/ui/overlay/Dialog.svelte b/web-player/src/lib/components/ui/overlay/Dialog.svelte index e6e0d72..db14898 100644 --- a/web-player/src/lib/components/ui/overlay/Dialog.svelte +++ b/web-player/src/lib/components/ui/overlay/Dialog.svelte @@ -24,7 +24,7 @@ > {#if tone === 'danger'} - + {/if}

{title}

diff --git a/web-player/src/lib/components/ui/primitives/Checkbox.svelte b/web-player/src/lib/components/ui/primitives/Checkbox.svelte index 46ded56..08a8df9 100644 --- a/web-player/src/lib/components/ui/primitives/Checkbox.svelte +++ b/web-player/src/lib/components/ui/primitives/Checkbox.svelte @@ -22,7 +22,6 @@ /> {@render children()} diff --git a/web-player/src/lib/components/ui/primitives/EmptyState.svelte b/web-player/src/lib/components/ui/primitives/EmptyState.svelte index bef42bf..eba8f0f 100644 --- a/web-player/src/lib/components/ui/primitives/EmptyState.svelte +++ b/web-player/src/lib/components/ui/primitives/EmptyState.svelte @@ -15,7 +15,7 @@
{#if Icon} - + {/if} {#if title}

diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte index aaf0870..8acc28c 100644 --- a/web-player/src/routes/(app)/albums/+page.svelte +++ b/web-player/src/routes/(app)/albums/+page.svelte @@ -27,7 +27,7 @@ {#snippet actions()} {#if items.length > 0} {/if} diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte index 0a110db..b511784 100644 --- a/web-player/src/routes/(app)/liked/+page.svelte +++ b/web-player/src/routes/(app)/liked/+page.svelte @@ -39,7 +39,7 @@
- +
{/snippet} {#snippet actions()} diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte index 28e907d..45d423a 100644 --- a/web-player/src/routes/(app)/upload/+page.svelte +++ b/web-player/src/routes/(app)/upload/+page.svelte @@ -130,7 +130,7 @@ : 'bg-accent-btn text-accent-soft'}" > {#if stepStates[i] === 'done'} - + {:else} {i + 1} {/if} @@ -146,7 +146,7 @@ {#if status === 'done'} - +

¡Subida!

@@ -207,9 +207,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 0ba001c..80cfea5 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -261,7 +261,7 @@ @layer base { svg.lucide { - stroke-width: 1.8; + stroke-width: 1.5; } }