Ilia Mashkov
4e7f76ecb1
Establish a real design system foundation by moving the project from
inline arbitrary-value classes to named tokens and reusable utilities.
Tokens added to @theme (auto-generate Tailwind utilities):
- Shadows: shadow-rest, shadow-stamp-{rest,hover,pressed,card},
shadow-popover, shadow-floating-panel{,-dark}, shadow-overlay
- Motion: duration-{fast,normal,slow,slower};
ease-{standard,out-soft,spring-overshoot}
Semantic mode-switching colors added to :root / .dark so utilities
auto-adapt without dark: variants:
- --color-border-subtle, --color-text-subtle, --color-skeleton
Utilities migrated to Tailwind v4's @utility directive with direct CSS
properties (previously @layer utilities with @apply chains, which
silently failed when chaining to other user-defined utilities):
- border-subtle, text-subtle, focus-ring
- surface-canvas, surface-card, surface-card-elevated, surface-popover,
surface-floating
- flex-center, skeleton-fill, text-label-mono
Notes:
- text-secondary was renamed to text-subtle because --color-secondary is
registered in @theme (a near-white shadcn surface token), which made
Tailwind v4 auto-generate a colliding text-secondary utility that won
over the user-defined one — every consumer effectively rendered as
near-white text. The text-subtle name pairs cleanly with border-subtle
and avoids any @theme collisions.
- Dead --space-* variable scale removed (was defined but never wired
into @theme; Tailwind's default spacing scale is used everywhere).
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