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:
@@ -43,8 +43,8 @@ function createButtonText(item: BreadcrumbItem) {
|
||||
md:h-16 px-4 md:px-6 lg:px-8
|
||||
flex items-center justify-between
|
||||
z-40
|
||||
bg-surface/90 dark:bg-dark-bg/90 backdrop-blur-md
|
||||
border-b border-subtle
|
||||
surface-floating bg-surface/90 dark:bg-dark-bg/90
|
||||
border-x-0 border-t-0
|
||||
"
|
||||
>
|
||||
<div class="max-w-8xl px-4 sm:px-6 h-full w-full flex items-center justify-between gap-2 sm:gap-4">
|
||||
|
||||
Reference in New Issue
Block a user