Svelte / SvelteKit Extraction Patterns

Svelte co-locates styles even more tightly than Vue. Every .svelte file has a <style> block that is scoped by default. Design systems in Svelte projects typically live in global CSS, CSS custom properties, or a shared theme store.

File Discovery Order

src/app.css / src/app.postcss — Global styles and CSS custom properties. The most important file.
svelte.config.js — May reference CSS preprocessors, Tailwind, or UnoCSS configuration.
tailwind.config.js (if Tailwind/UnoCSS) — Same extraction as React.
src/lib/theme.ts / src/lib/tokens.ts — Shared design tokens exported as JS objects.
src/routes/+layout.svelte — Root layout. Shows global font loading, background, and structural patterns.
Component <style> blocks — Scoped styles revealing component patterns.

Svelte Component Style Patterns

<script>
  export let variant = 'primary'
</script>

<button class="btn btn-{variant}">
  <slot />
</button>

<style>
  .btn {
    border-radius: 8px;
    padding: 0.875rem 2rem;
    font-weight: 500;
    transition: all 250ms ease-in-out;
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: white;
  }

  .btn-primary:hover {
    filter: brightness(0.9);
  }
</style>

Extraction points:

Component props (like variant) reveal the intended variant system
var(--*) references → trace to app.css
Transition values reveal the interaction design philosophy

SvelteKit Layout Patterns

+layout.svelte at route root — Global header, footer, font loading
+layout.ts/js — May load theme data or tokens
$lib/ directory — Reusable components and shared utilities

CSS Custom Properties Strategy

Svelte projects heavily use CSS custom properties for theming:

/* app.css */
:root {
  --color-primary: #294056;
  --color-bg: #FCFAFA;
  --color-surface: #F5F5F5;
  --color-text: #2C2C2C;
  --color-text-muted: #6B6B6B;

  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  --shadow-hover: 0 2px 8px rgba(0,0,0,0.06);
  --spacing-section: 5rem;
}

These variable names are highly intentional. Use them as the foundation of your design system extraction.

Skeleton UI / DaisyUI / Flowbite-Svelte

If component libraries are used:

Skeleton UI: Theme defined in tailwind.config.js using Skeleton's design token system. Look for custom theme config object.
DaisyUI: Theme in tailwind.config.js → daisyui.themes array.
Flowbite-Svelte: Standard Tailwind theming.

2.7 KiB Raw Blame History