Styleguide

Documentation vivante des composants et tokens du design system de digitalgarden.

Tokens

Couleurs — Accent

--color-accent-50

--color-accent-100

--color-accent-200

--color-accent-500 (accent)

--color-accent-600 (accent-hover)

--color-accent-700

--color-accent-900

Couleurs — Interface

--color-surface

--color-surface-hover

--color-ink

--color-ink-muted

--color-border

Couleurs — Stades de maturité

--color-seedling-bg

--color-seedling-fg

--color-budding-bg

--color-budding-fg

--color-evergreen-bg

--color-evergreen-fg

Espacement

--space-xs (4px)

--space-sm (8px)

--space-md (16px)

--space-lg (24px)

--space-xl (40px)

--space-2xl (64px)

Typographie

Le jardin numérique pousse lentement. --text-xs (0.75rem)

Le jardin numérique pousse lentement. --text-sm (0.875rem)

Le jardin numérique pousse lentement. --text-base (1rem)

Le jardin numérique pousse. --text-lg (1.125rem)

Le jardin pousse. --text-xl (1.25rem)

Le jardin pousse. --text-2xl (1.5rem)

Jardin. --text-3xl (2rem)

Rayons de bordure

--radius-small (4px)

--radius-medium (8px)

--radius-large (12px)

--radius-pill (9999px)

Transitions

--duration-fast 150ms

--duration-base 200ms

Polices

Lora — var(--font-serif) --font-serif

Inter — var(--font-sans) --font-sans

JetBrains Mono — var(--font-mono) --font-mono

Composants

StageBadge

stage: 'seedling' | 'budding' | 'evergreen' — size?: 'sm' | 'md' (défaut: 'md')

size="md" (défaut)

Graine Pousse Arbre

size="sm"

Graine Pousse Arbre

Tag

label: string — href?: string → interactive (lien) si fourni, static (span) sinon

Static (sans href)

#design #tokens

Interactive (avec href, hover)

#design #tokens

NavLink

href: string — label: string — active: boolean → ajoute aria-current="page" + style actif

Notes (inactif) Styleguide (actif)

NoteCard

title, slug, date: Date, stage requis — description?, tags?: string[] optionnels

FilterNav

allTags: string[] — currentStage?: string — currentTag?: string — Les filtres sont des liens statiques, sans JS.

Aucun filtre actif

Filtre stage actif (budding)

Filtre tag actif (écriture)

Pagination

currentPage: number — totalPages: number — baseUrl: string — Masqué si totalPages ≤ 1.

Page 1 / 4 (précédent désactivé)

Page 2 / 4 (les deux actifs)

Page 4 / 4 (suivant désactivé)

BacklinkList

backlinks: Array<{title: string, slug: string}> — entièrement masqué si vide

Avec backlinks (visible)

Vide — rien affiché (comportement attendu)

↑ Le composant est invisible quand backlinks = []

Header

currentPath: string — détermine le lien actif dans la navigation. Normalement géré automatiquement par PageLayout.

Footer