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
@@ -25,7 +25,7 @@ let { children, class: className, ...rest }: Props = $props();
|
||||
<div
|
||||
class={cn(
|
||||
'flex items-center gap-1 p-1',
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'surface-canvas',
|
||||
'border border-subtle',
|
||||
'rounded-none',
|
||||
'transition-colors duration-500',
|
||||
|
||||
@@ -91,7 +91,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
|
||||
step={control.step}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
<span class="font-mono text-xs text-secondary tabular-nums w-10 text-right shrink-0">
|
||||
<span class="font-mono text-xs text-subtle tabular-nums w-10 text-right shrink-0">
|
||||
{formattedValue()}
|
||||
</span>
|
||||
</div>
|
||||
@@ -120,12 +120,12 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
|
||||
<button
|
||||
{...props}
|
||||
class={cn(
|
||||
'flex flex-col items-center justify-center w-14 py-1',
|
||||
'select-none rounded-none transition-all duration-150',
|
||||
'flex flex-col flex-center w-14 py-1',
|
||||
'select-none rounded-none transition-all duration-fast',
|
||||
'border border-transparent',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
|
||||
open
|
||||
? 'bg-paper dark:bg-dark-card shadow-sm border-subtle'
|
||||
? 'surface-card-elevated'
|
||||
: 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
|
||||
)}
|
||||
aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
|
||||
@@ -134,7 +134,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
|
||||
{#if displayLabel}
|
||||
<span
|
||||
class="
|
||||
text-3xs font-primary font-bold tracking-tight uppercase
|
||||
text-3xs text-label-mono
|
||||
text-neutral-900 dark:text-neutral-100
|
||||
mb-0.5 leading-none
|
||||
"
|
||||
@@ -153,7 +153,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
|
||||
|
||||
<!-- Vertical slider popover -->
|
||||
<Popover.Content
|
||||
class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
|
||||
class="w-auto py-4 px-3 h-64 flex-center rounded-none surface-card-elevated"
|
||||
align="center"
|
||||
side="top"
|
||||
>
|
||||
|
||||
@@ -83,9 +83,9 @@ $effect(() => {
|
||||
<div transition:fly={{ y: 20, duration: 200, easing: cubicOut }}>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
layout="block-list-row"
|
||||
active={property.selected}
|
||||
onclick={() => (property.selected = !property.selected)}
|
||||
class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
|
||||
iconPosition="right"
|
||||
icon={property.selected ? icon : undefined}
|
||||
>
|
||||
@@ -96,8 +96,8 @@ $effect(() => {
|
||||
{#if hasMore}
|
||||
<Button
|
||||
variant="icon"
|
||||
layout="block-list-row"
|
||||
onclick={() => (showMore = !showMore)}
|
||||
class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
|
||||
iconPosition="left"
|
||||
>
|
||||
{#snippet icon()}
|
||||
|
||||
@@ -149,7 +149,7 @@ const inputClasses = $derived(cn(
|
||||
<span
|
||||
class={cn(
|
||||
'text-2xs font-mono tracking-wide px-1',
|
||||
error ? 'text-brand ' : 'text-secondary',
|
||||
error ? 'text-brand ' : 'text-subtle',
|
||||
)}
|
||||
>
|
||||
{helperText}
|
||||
|
||||
@@ -26,7 +26,7 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 {className}"
|
||||
class="absolute inset-x-0 inset-y-0 flex-center gap-4 {className}"
|
||||
in:fade={{ duration: 300 }}
|
||||
out:fade={{ duration: 300 }}
|
||||
>
|
||||
|
||||
@@ -59,7 +59,7 @@ function close() {
|
||||
|
||||
<!-- Panel -->
|
||||
<div
|
||||
class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-2xl"
|
||||
class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-overlay"
|
||||
in:fly={{ x: -320, duration: 300, easing: cubicOut }}
|
||||
out:fly={{ x: -320, duration: 250, easing: cubicOut }}
|
||||
>
|
||||
@@ -83,11 +83,10 @@ function close() {
|
||||
'shrink-0 z-30 h-full relative',
|
||||
'overflow-hidden',
|
||||
'will-change-[width]',
|
||||
'transition-[width] duration-300 ease-out',
|
||||
'border-r border-subtle',
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'surface-canvas',
|
||||
isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
|
||||
'transition-[width,opacity] duration-300 ease-out',
|
||||
'transition-[width,opacity] duration-slow ease-out',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -70,17 +70,17 @@ let {
|
||||
const isVertical = $derived(orientation === 'vertical');
|
||||
|
||||
const labelClasses = `font-mono text-2xs tabular-nums shrink-0
|
||||
text-secondary
|
||||
text-subtle
|
||||
group-hover:text-neutral-700 dark:group-hover:text-neutral-300
|
||||
transition-colors`;
|
||||
|
||||
const thumbClasses = `block w-2.5 h-2.5 bg-brand
|
||||
rotate-45 shadow-sm
|
||||
rotate-45 shadow-rest
|
||||
hover:scale-125
|
||||
focus-visible:outline-none
|
||||
focus-visible:ring-2 focus-visible:ring-brand/20
|
||||
data-active:scale-90
|
||||
transition-transform duration-150
|
||||
transition-transform duration-fast
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
cursor-grab active:cursor-grabbing`;
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user