Set global icon stroke width and remove per-icon strokeWidth props
This commit is contained in:
@@ -44,7 +44,7 @@
|
||||
</AccountMenu>
|
||||
{:else}
|
||||
<IconButton href="/auth/login" reload label="Iniciar sesión" shape="round" size="md">
|
||||
<LogIn class="size-icon-lg" strokeWidth={2} />
|
||||
<LogIn class="size-icon-lg" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
? 'bg-surface-2 text-fg'
|
||||
: 'text-fg-2 hover:bg-hover hover:text-fg'}"
|
||||
>
|
||||
<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
|
||||
<link.icon class="size-icon-md shrink-0" />
|
||||
<span class="flex-1 truncate">{link.label}</span>
|
||||
{#if link.count}
|
||||
<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
|
||||
@@ -68,7 +68,7 @@
|
||||
size="xs"
|
||||
onclick={() => createPlaylistModal.show()}
|
||||
>
|
||||
<Plus class="size-icon-sm text-fg-2" strokeWidth={1.25} />
|
||||
<Plus class="size-icon-sm text-fg-2" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -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"
|
||||
>
|
||||
<Plus class="size-3.5" strokeWidth={1.8} />
|
||||
<Plus class="size-3.5" />
|
||||
Crear tu primera lista
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
? 'text-fg'
|
||||
: 'text-fg-2'}"
|
||||
>
|
||||
<link.icon class="size-4" strokeWidth={1.6} />
|
||||
<link.icon class="size-4" />
|
||||
<span class="text-xs font-medium">{link.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
@@ -62,14 +62,14 @@
|
||||
size="xs"
|
||||
onclick={() => history.back()}
|
||||
>
|
||||
<ChevronLeft class="size-icon-sm" strokeWidth={1.9} />
|
||||
<ChevronLeft class="size-icon-sm" />
|
||||
</IconButton>
|
||||
|
||||
<form onsubmit={onSubmit} class="max-w-search min-w-0 flex-1">
|
||||
<label
|
||||
class="flex h-9.5 w-full items-center gap-2.5 rounded-control bg-surface-2 px-3.5 transition focus-within:bg-surface-hover"
|
||||
>
|
||||
<Search class="size-4 shrink-0 text-fg-2" strokeWidth={1.8} />
|
||||
<Search class="size-4 shrink-0 text-fg-2" />
|
||||
<input
|
||||
type="text"
|
||||
bind:this={searchInput}
|
||||
|
||||
@@ -57,11 +57,11 @@
|
||||
onclick={() => player.toggleMute()}
|
||||
>
|
||||
{#if player.muted || player.volume === 0}
|
||||
<VolumeX class="size-icon-sm" strokeWidth={1.8} />
|
||||
<VolumeX class="size-icon-sm" />
|
||||
{:else if player.volume < 50}
|
||||
<Volume1 class="size-icon-sm" strokeWidth={1.8} />
|
||||
<Volume1 class="size-icon-sm" />
|
||||
{:else}
|
||||
<Volume2 class="size-icon-sm" strokeWidth={1.8} />
|
||||
<Volume2 class="size-icon-sm" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
<Slider
|
||||
@@ -78,7 +78,7 @@
|
||||
pressed={queuePanel.open}
|
||||
onclick={() => queuePanel.toggle()}
|
||||
>
|
||||
<ListMusic class="size-icon-sm" strokeWidth={1.8} />
|
||||
<ListMusic class="size-icon-sm" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -56,11 +56,11 @@
|
||||
<IconButton
|
||||
label={isLiked ? 'Quitar de Me gusta' : 'Añadir a Me gusta'}
|
||||
tone="plain"
|
||||
size="xs"
|
||||
size="md"
|
||||
pressed={isLiked}
|
||||
onclick={toggleLike}
|
||||
>
|
||||
<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.25} />
|
||||
<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
aria-label="Aleatorio"
|
||||
class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-2'}"
|
||||
>
|
||||
<Shuffle class="size-4" strokeWidth={1.8} />
|
||||
<Shuffle class="size-4" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
aria-label="Repetir"
|
||||
class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-2'}"
|
||||
>
|
||||
<Repeat class="size-4" strokeWidth={1.8} />
|
||||
<Repeat class="size-4" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -68,6 +68,6 @@
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-fg-2'}" strokeWidth={1.3} />
|
||||
<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-fg-2'}" />
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}"
|
||||
>
|
||||
{#if index}
|
||||
<Hash size={16} strokeWidth={1.5} />
|
||||
<Hash size={16} />
|
||||
{/if}
|
||||
<span>Título</span>
|
||||
{#each columns as column (column)}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
>
|
||||
{#if tone === 'danger'}
|
||||
<span class="mb-4 grid size-10 place-items-center rounded-full bg-danger/12 text-danger-fg">
|
||||
<CircleAlert class="size-icon-md" strokeWidth={2} />
|
||||
<CircleAlert class="size-icon-md" />
|
||||
</span>
|
||||
{/if}
|
||||
<h2 class="text-display-3 text-fg">{title}</h2>
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
/>
|
||||
<Check
|
||||
class="pointer-events-none absolute size-3.5 text-ink opacity-0 transition peer-checked:opacity-100"
|
||||
strokeWidth={3}
|
||||
/>
|
||||
</span>
|
||||
<span class="cursor-pointer">{@render children()}</span>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<div class="flex flex-col items-center rounded-panel px-6 py-16 text-center {klass}">
|
||||
{#if Icon}
|
||||
<Icon class="size-icon-xl text-fg-2" strokeWidth={1.25} />
|
||||
<Icon class="size-icon-xl text-fg-2" />
|
||||
{/if}
|
||||
{#if title}
|
||||
<h3 class="mt-6 text-display-3 text-fg">
|
||||
|
||||
Reference in New Issue
Block a user