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.
GlyphDiff
A modern font exploration and comparison tool for browsing fonts from Google Fonts and Fontshare with real-time visual comparisons, advanced filtering, and customizable typography.
Features
- Multi-Provider Catalog: Browse fonts from Google Fonts and Fontshare in one place
- Side-by-Side Comparison: Compare up to 4 fonts simultaneously with customizable text, size, and typography settings
- Advanced Filtering: Filter by category, provider, character subsets, and weight
- Virtual Scrolling: Fast, smooth browsing of thousands of fonts
- Responsive UI: Beautiful interface built with Tailwind CSS
- Type-Safe: Full TypeScript coverage with strict mode enabled
Tech Stack
- Framework: Svelte 5 with reactive primitives (runes)
- Styling: Tailwind CSS v4
- Components: Bits UI primitives
- State Management: TanStack Query for async data
- Architecture: Feature-Sliced Design (FSD)
- Quality: oxlint (linting), dprint (formatting), lefthook (git hooks)
Project Structure
src/
├── app/ # App shell, layout, providers
├── widgets/ # Composed UI blocks (ComparisonSlider, SampleList, FontSearch)
├── features/ # Business features (filters, search, display)
├── entities/ # Domain models and stores (Font, Breadcrumb)
├── shared/ # Reusable utilities, UI components, helpers
└── routes/ # Page-level components
Quick Start
# Install dependencies
yarn install
# Start development server
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview
Available Scripts
| Command | Description |
|---|---|
yarn dev |
Start development server |
yarn build |
Build for production |
yarn preview |
Preview production build |
yarn check |
Run Svelte type checking |
yarn lint |
Run oxlint |
yarn format |
Format code with dprint |
yarn test:unit |
Run unit tests |
yarn test:unit:ui |
Run Vitest UI |
yarn storybook |
Start Storybook dev server |
Code Style
- Path Aliases: Use
$app/,$shared/,$features/,$entities/,$widgets/,$routes/ - Components: PascalCase (e.g.,
ComparisonSlider.svelte) - Formatting: 100 char line width, 4-space indent, single quotes
- Type Safety: Strict TypeScript with JSDoc comments for public APIs
Architecture Notes
This project follows the Feature-Sliced Design (FSD) methodology for clean separation of concerns. The application uses Svelte 5's new runes system ($state, $derived, $effect) for reactive state management.
License
MIT