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.
88 lines
2.6 KiB
Svelte
88 lines
2.6 KiB
Svelte
<!--
|
|
Component: Layout
|
|
Application shell with providers and page wrapper
|
|
-->
|
|
<script lang="ts">
|
|
import { themeManager } from '$features/ChangeAppTheme';
|
|
import G from '$shared/assets/G.svg';
|
|
import { ResponsiveProvider } from '$shared/lib';
|
|
import { cn } from '$shared/lib';
|
|
import { Footer } from '$widgets/Footer';
|
|
|
|
import {
|
|
type Snippet,
|
|
onDestroy,
|
|
onMount,
|
|
} from 'svelte';
|
|
|
|
interface Props {
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
let fontsReady = $state(true);
|
|
const theme = $derived(themeManager.value);
|
|
|
|
onMount(() => themeManager.init());
|
|
onDestroy(() => themeManager.destroy());
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link rel="icon" href={G} type="image/svg+xml" />
|
|
|
|
<link rel="preconnect" href="https://api.fontshare.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://cdn.fontshare.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://fonts.gstatic.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="style"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
media="print"
|
|
onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
|
|
/>
|
|
<noscript>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
</noscript>
|
|
<title>GlyphDiff | Typography & Typefaces</title>
|
|
<meta
|
|
name="description"
|
|
content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<ResponsiveProvider>
|
|
<div
|
|
id="app-root"
|
|
class={cn(
|
|
'min-h-dvh w-auto flex flex-col surface-canvas relative',
|
|
theme === 'dark' ? 'dark' : '',
|
|
)}
|
|
>
|
|
{#if fontsReady}
|
|
{@render children?.()}
|
|
{/if}
|
|
|
|
<Footer />
|
|
</div>
|
|
</ResponsiveProvider>
|