# 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

1. **`src/app.css` / `src/app.postcss`** — Global styles and CSS custom
   properties. The most important file.

2. **`svelte.config.js`** — May reference CSS preprocessors, Tailwind, or
   UnoCSS configuration.

3. **`tailwind.config.js`** (if Tailwind/UnoCSS) — Same extraction as React.

4. **`src/lib/theme.ts` / `src/lib/tokens.ts`** — Shared design tokens
   exported as JS objects.

5. **`src/routes/+layout.svelte`** — Root layout. Shows global font loading,
   background, and structural patterns.

6. **Component `<style>` blocks** — Scoped styles revealing component patterns.

## Svelte Component Style Patterns

```svelte
<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:

```css
/* 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.