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.
86 lines
2.5 KiB
Svelte
86 lines
2.5 KiB
Svelte
<!--
|
|
Component: BreadcrumbHeader
|
|
Fixed header for breadcrumbs navigation for sections in the page
|
|
-->
|
|
<script lang="ts">
|
|
import type { ResponsiveManager } from '$shared/lib';
|
|
import {
|
|
Button,
|
|
Label,
|
|
Logo,
|
|
} from '$shared/ui';
|
|
import { getContext } from 'svelte';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { slide } from 'svelte/transition';
|
|
import {
|
|
type BreadcrumbItem,
|
|
scrollBreadcrumbsStore,
|
|
} from '../../model';
|
|
|
|
const breadcrumbs = $derived(scrollBreadcrumbsStore.scrolledPastItems);
|
|
const responsive = getContext<ResponsiveManager>('responsive');
|
|
|
|
function handleClick(item: BreadcrumbItem) {
|
|
scrollBreadcrumbsStore.scrollTo(item.index);
|
|
}
|
|
|
|
function createButtonText(item: BreadcrumbItem) {
|
|
const index = String(item.index + 1).padStart(2, '0');
|
|
if (responsive.isMobileOrTablet) {
|
|
return index;
|
|
}
|
|
|
|
return `${index} // ${item.title}`;
|
|
}
|
|
</script>
|
|
|
|
{#if breadcrumbs.length > 0}
|
|
<div
|
|
transition:slide={{ duration: 200 }}
|
|
class="
|
|
fixed top-0 left-0 right-0
|
|
h-14
|
|
md:h-16 px-4 md:px-6 lg:px-8
|
|
flex items-center justify-between
|
|
z-40
|
|
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">
|
|
<Logo />
|
|
|
|
<nav class="flex items-center overflow-x-auto scrollbar-hide">
|
|
{#each breadcrumbs as item, _ (item.index)}
|
|
{@const active = scrollBreadcrumbsStore.activeIndex === item.index}
|
|
{@const text = createButtonText(item)}
|
|
<div class="ml-1 md:ml-4" transition:slide={{ duration: 200, axis: 'x', easing: cubicOut }}>
|
|
<Button
|
|
class="uppercase"
|
|
variant="tertiary"
|
|
size="xs"
|
|
{active}
|
|
onclick={() => handleClick(item)}
|
|
>
|
|
<Label class="text-inherit">
|
|
{text}
|
|
</Label>
|
|
</Button>
|
|
</div>
|
|
{/each}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
/* Hide scrollbar but keep functionality */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|