refactor: sweep call sites onto design-system utilities + bug fixes
Replace inline class clusters with the design-system utilities and tokens established in the prior two commits. No behavior changes intended beyond two real bug fixes. Bug fixes: - SampleList.svelte: 'border-border-subtle bg-background-40' was a silent no-op (both classes mis-spelled). Now 'border-subtle bg-background/40' applies as intended. - FontList.svelte: 'h-[44px]' → 'h-11' (44px = 2.75rem = spacing-11, no need for arbitrary value). Sweeps: - TypographyMenu: popover + floating bar now use surface-popover / surface-floating + shadow-popover. - FontList + FilterGroup: tertiary list buttons use the new Button layout="block-list-row" variant; skeleton fills use the skeleton-fill utility. - Footer / BreadcrumbHeader: surface-floating absorbs the bg-surface/blur/border cluster. Footer bumped to z-20 with a comment explaining the stacking against SidebarContainer (z-40/50). - FontSampler: surface-card + hover shadow-stamp-card token. - SliderArea: surface-canvas, flex-center, shadow-floating-panel tokens (light + dark variants). - Sidebar / Header / ButtonGroup / Layout / SidebarContainer: bg-surface dark:bg-dark-bg → surface-canvas (8 sites); SidebarContainer mobile panel uses shadow-overlay. - Loader / Thumb: flex items-center justify-center → flex-center; Thumb durations → duration-fast. - ComboControl: trigger uses surface-card-elevated when open, popover uses surface-card-elevated, label cluster → text-label-mono, flex-center for the trigger interior. - Slider: shadow-sm → shadow-rest, duration-150 → duration-fast. - text-secondary → text-subtle across Input, Slider, ComboControl (matches the rename in the styles commit). - Link: reverted earlier surface-floating attempt — Link's original bg-surface/80 backdrop-blur pattern was thinner than surface-floating (no border, smaller blur), and the Footer was overlaying its own border-subtle on top, fighting the utility. Kept the original style.
This commit is contained in:
Ilia Mashkov
@@ -110,28 +110,28 @@ function isFontReady(font: UnifiedFont): boolean {
|
||||
<div class="w-full px-3 py-3 flex items-center justify-between">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<Skeleton
|
||||
class="h-4 w-32 bg-neutral-200/70 dark:bg-neutral-800/70"
|
||||
class="h-4 w-32 skeleton-fill"
|
||||
style="width: {getSkeletonWidth(index)}"
|
||||
/>
|
||||
</div>
|
||||
<Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
|
||||
<Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet children({ item: font, index })}
|
||||
<div class="relative h-[44px] w-full">
|
||||
<div class="relative h-11 w-full">
|
||||
{#if !isFontReady(font)}
|
||||
<div
|
||||
class="absolute inset-0 px-3 md:px-4 flex items-center justify-between border border-transparent"
|
||||
transition:fade={{ duration: 300 }}
|
||||
>
|
||||
<Skeleton
|
||||
class="h-4 bg-neutral-200/70 dark:bg-neutral-800/70"
|
||||
class="h-4 skeleton-fill"
|
||||
style="width: {getSkeletonWidth(index)}"
|
||||
/>
|
||||
<Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
|
||||
<Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
|
||||
</div>
|
||||
{:else}
|
||||
{@const isSelectedA = font.id === comparisonStore.fontA?.id}
|
||||
@@ -141,9 +141,10 @@ function isFontReady(font: UnifiedFont): boolean {
|
||||
<div transition:fade={{ duration: 300 }} class="h-full">
|
||||
<Button
|
||||
variant="tertiary"
|
||||
layout="block-list-row"
|
||||
{active}
|
||||
onclick={() => handleSelect(font)}
|
||||
class="w-full h-full px-3 md:px-4 py-2.5 md:py-3 flex !justify-between text-left text-sm"
|
||||
class="h-full"
|
||||
iconPosition="right"
|
||||
>
|
||||
<FontApplicator {font}>
|
||||
|
||||
@@ -53,7 +53,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
|
||||
'px-4 md:px-8 py-4 md:py-6',
|
||||
'h-16 md:h-20 z-20',
|
||||
'border-b border-subtle',
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'surface-canvas',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -43,7 +43,7 @@ let {
|
||||
class={cn(
|
||||
'flex flex-col h-full',
|
||||
'w-80',
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'surface-canvas',
|
||||
'border-r border-subtle',
|
||||
'transition-colors duration-500',
|
||||
className,
|
||||
@@ -54,7 +54,7 @@ let {
|
||||
class="
|
||||
p-6 shrink-0
|
||||
border-b border-subtle
|
||||
bg-surface dark:bg-dark-bg
|
||||
surface-canvas
|
||||
"
|
||||
>
|
||||
<!-- Title -->
|
||||
@@ -90,7 +90,7 @@ let {
|
||||
</div>
|
||||
|
||||
<!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
|
||||
<div class="flex-1 min-h-0 bg-surface dark:bg-dark-bg">
|
||||
<div class="flex-1 min-h-0 surface-canvas">
|
||||
{#if main}
|
||||
{@render main()}
|
||||
{/if}
|
||||
@@ -101,7 +101,7 @@ let {
|
||||
<div
|
||||
class="
|
||||
shrink-0 p-6
|
||||
bg-surface dark:bg-dark-bg
|
||||
surface-canvas
|
||||
border-t border-subtle
|
||||
z-10
|
||||
"
|
||||
|
||||
@@ -233,14 +233,14 @@ const scaleClass = $derived(
|
||||
Outer flex container — fills parent.
|
||||
The paper div inside scales down when the sidebar opens on desktop.
|
||||
-->
|
||||
<div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
|
||||
<div class={cn('flex-1 relative flex-center p-0 overflow-hidden surface-canvas', className)}>
|
||||
<!-- Paper surface -->
|
||||
<div
|
||||
class={cn(
|
||||
'w-full h-full flex flex-col items-center justify-center relative',
|
||||
'w-full h-full flex flex-col flex-center relative',
|
||||
'bg-paper dark:bg-dark-card',
|
||||
'shadow-2xl shadow-black/5 dark:shadow-black/20',
|
||||
'transition-transform duration-300 ease-out',
|
||||
'shadow-floating-panel dark:shadow-floating-panel-dark',
|
||||
'transition-transform duration-slow ease-out',
|
||||
scaleClass,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -36,9 +36,9 @@ let { sliderPos, isDragging }: Props = $props();
|
||||
'-ml-2.5 md:-ml-3',
|
||||
'mt-2 md:mt-4',
|
||||
'bg-brand text-white',
|
||||
'flex items-center justify-center',
|
||||
'flex-center',
|
||||
'rounded-none shadow-md',
|
||||
'transition-transform duration-150',
|
||||
'transition-transform duration-fast',
|
||||
isDragging ? 'scale-110' : 'scale-100',
|
||||
)}
|
||||
>
|
||||
@@ -52,9 +52,9 @@ let { sliderPos, isDragging }: Props = $props();
|
||||
'-ml-2.5 md:-ml-3',
|
||||
'mb-2 md:mb-4',
|
||||
'bg-brand text-white',
|
||||
'flex items-center justify-center',
|
||||
'flex-center',
|
||||
'rounded-none shadow-md',
|
||||
'transition-transform duration-150',
|
||||
'transition-transform duration-fast',
|
||||
isDragging ? 'scale-110' : 'scale-100',
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user