From 5b7ec03973ad1eba5a338bbafbebb45a4425be7b Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Mon, 25 May 2026 10:20:40 +0300 Subject: [PATCH] refactor: sweep call sites onto design-system utilities + bug fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/app/ui/Layout.svelte | 2 +- .../ui/BreadcrumbHeader/BreadcrumbHeader.svelte | 4 ++-- .../ui/TypographyMenu/TypographyMenu.svelte | 16 ++++++---------- .../ui/FontSampler/FontSampler.svelte | 8 +++----- src/shared/ui/Button/ButtonGroup.svelte | 2 +- src/shared/ui/ComboControl/ComboControl.svelte | 12 ++++++------ src/shared/ui/FilterGroup/FilterGroup.svelte | 4 ++-- src/shared/ui/Input/Input.svelte | 2 +- src/shared/ui/Loader/Loader.svelte | 2 +- .../ui/SidebarContainer/SidebarContainer.svelte | 7 +++---- src/shared/ui/Slider/Slider.svelte | 6 +++--- .../ComparisonView/ui/FontList/FontList.svelte | 13 +++++++------ .../ComparisonView/ui/Header/Header.svelte | 2 +- .../ComparisonView/ui/Sidebar/Sidebar.svelte | 8 ++++---- .../ui/SliderArea/SliderArea.svelte | 8 ++++---- src/widgets/ComparisonView/ui/Thumb/Thumb.svelte | 8 ++++---- src/widgets/Footer/ui/Footer/Footer.svelte | 8 ++++++-- .../SampleList/ui/SampleList/SampleList.svelte | 2 +- 18 files changed, 56 insertions(+), 58 deletions(-) diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte index bee32cc..42a85c7 100644 --- a/src/app/ui/Layout.svelte +++ b/src/app/ui/Layout.svelte @@ -74,7 +74,7 @@ onDestroy(() => themeManager.destroy());
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte index f419995..e48dcf9 100644 --- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte +++ b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte @@ -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 " >
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte index 1376cf1..e434ec4 100644 --- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte +++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte @@ -90,11 +90,8 @@ $effect(() => { align="end" sideOffset={8} class={cn( - 'z-50 w-72', - 'bg-surface dark:bg-dark-card', - 'border border-subtle', - 'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]', - 'rounded-none p-4', + 'z-50 w-72 p-4 rounded-none', + 'surface-popover', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', @@ -118,7 +115,7 @@ $effect(() => { {#snippet child({ props })}
-
+
{#if main} {@render main()} {/if} @@ -101,7 +101,7 @@ let {
-
+
diff --git a/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte b/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte index d7f665a..fb41ca4 100644 --- a/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte +++ b/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte @@ -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', )} > diff --git a/src/widgets/Footer/ui/Footer/Footer.svelte b/src/widgets/Footer/ui/Footer/Footer.svelte index 6452d7e..25be409 100644 --- a/src/widgets/Footer/ui/Footer/Footer.svelte +++ b/src/widgets/Footer/ui/Footer/Footer.svelte @@ -14,15 +14,19 @@ const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge) const currentYear = new Date().getFullYear(); +