Ilia Mashkov
5b7ec03973
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.
113 lines
3.0 KiB
Svelte
113 lines
3.0 KiB
Svelte
<!--
|
|
Component: Sidebar
|
|
Layout shell for the font comparison sidebar.
|
|
Owns the wrapper, header, and A/B side toggle.
|
|
Content (font list, controls) is injected via snippets.
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/lib';
|
|
import {
|
|
ButtonGroup,
|
|
Label,
|
|
ToggleButton,
|
|
} from '$shared/ui';
|
|
import type { Snippet } from 'svelte';
|
|
import {
|
|
type Side,
|
|
comparisonStore,
|
|
} from '../../model';
|
|
|
|
interface Props {
|
|
/**
|
|
* Main area snippet
|
|
*/
|
|
main?: Snippet;
|
|
/**
|
|
* Controls area snippet
|
|
*/
|
|
controls?: Snippet;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
main,
|
|
controls,
|
|
class: className,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class={cn(
|
|
'flex flex-col h-full',
|
|
'w-80',
|
|
'surface-canvas',
|
|
'border-r border-subtle',
|
|
'transition-colors duration-500',
|
|
className,
|
|
)}
|
|
>
|
|
<!-- ── Header: title + A/B toggle ────────────────────────────────── -->
|
|
<div
|
|
class="
|
|
p-6 shrink-0
|
|
border-b border-subtle
|
|
surface-canvas
|
|
"
|
|
>
|
|
<!-- Title -->
|
|
<Label variant="default" size="lg" bold class="mb-6 block tracking-tight leading-none">
|
|
Configuration
|
|
</Label>
|
|
|
|
<!--
|
|
A/B side toggle.
|
|
Two ghost buttons (unsized) side by side in a bordered grid.
|
|
active prop drives white card state on the selected side.
|
|
No size prop → no square sizing, layout comes from class.
|
|
-->
|
|
<ButtonGroup>
|
|
<ToggleButton
|
|
size="sm"
|
|
active={comparisonStore.side === 'A'}
|
|
onclick={() => comparisonStore.side = 'A'}
|
|
class="flex-1 tracking-wide font-bold uppercase"
|
|
>
|
|
<span>Left Font</span>
|
|
</ToggleButton>
|
|
|
|
<ToggleButton
|
|
size="sm"
|
|
class="flex-1 tracking-wide font-bold uppercase"
|
|
active={comparisonStore.side === 'B'}
|
|
onclick={() => comparisonStore.side = 'B'}
|
|
>
|
|
<span>Right Font</span>
|
|
</ToggleButton>
|
|
</ButtonGroup>
|
|
</div>
|
|
|
|
<!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
|
|
<div class="flex-1 min-h-0 surface-canvas">
|
|
{#if main}
|
|
{@render main()}
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- ── Bottom: fixed controls ─────────────────────────────────────── -->
|
|
{#if controls}
|
|
<div
|
|
class="
|
|
shrink-0 p-6
|
|
surface-canvas
|
|
border-t border-subtle
|
|
z-10
|
|
"
|
|
>
|
|
{@render controls()}
|
|
</div>
|
|
{/if}
|
|
</div>
|