chore(frontend): shadcn-svelte installieren und CSS-Variablen themen #65

New issue

Closed

opened 2026-06-21 16:18:02 +00:00 by niboer · 0 comments

niboer commented

2026-06-21 16:18:02 +00:00

Owner

Beschreibung

Installation von shadcn-svelte als UI-Komponentenbibliothek und Einrichtung der CSS-Variablen fuer das Theming. Das Projekt nutzt Tailwind v4 via @tailwindcss/vite - shadcn-svelte ist dafuer kompatibel, benoetigt aber zusaetzliche CSS-Variablen in pp.css.

Schritte

px shadcn-svelte@latest init (oder manuelle Konfiguration mit components.json)

Komponenten-Pfad: $lib/components/ui/
utils-Pfad: $lib/utils (bestehende cn()-Funktion nutzen)

px shadcn-svelte@latest add button input select card badge table sheet dialog
3. CSS-Variablen in pp.css ergaenzen (shadcn-Theming)

CSS-Variablen (in app.css)

css @layer base { :root { --background: var(--color-bg); --foreground: var(--color-text); --card: var(--color-bg); --card-foreground: var(--color-text); --primary: var(--color-primary-600); --primary-foreground: white; --secondary: var(--color-bg-secondary); --secondary-foreground: var(--color-text); --muted: var(--color-bg-secondary); --muted-foreground: var(--color-text-secondary); --destructive: var(--color-error); --destructive-foreground: white; --border: var(--color-border); --ring: var(--color-primary-300); --radius: var(--radius-md); } }

Dateien (neu/geaendert)

rontend/components.json (neu)
rontend/src/lib/components/ui/ (shadcn-Komponenten)
rontend/src/app.css (CSS-Variablen)
rontend/package.json (Abhaengigkeiten aktualisiert)

Tests

Keine spezifischen Tests (CSS-Variablen werden visuell sichtbar)

pm run dev prueft: Komponenten importierbar

pm run check (svelte-check) ohne Fehler

Akzeptanzkriterien

shadcn-svelte-Komponenten sind importierbar (Button, Input, Card, etc.)
Komponenten verwenden unsere Design-Tokens (blaue Primary-Farbe)
pm run dev startet ohne Fehler
pm run check (svelte-check) erfolgreich

Aktualisierter Plan (2026-06-21)

Zusaetzlich erkannt (L1)

Der @theme-Block in pp.css muss um shadcn-CSS-Variablen erweitert werden:
--color-background, --color-foreground, --color-card, --color-card-foreground,
--color-primary-foreground, --color-secondary, --color-secondary-foreground,
--color-muted, --color-muted-foreground, --color-destructive,
--color-destructive-foreground, --color-border, --color-ring, --radius-*

Commits

1a chore(frontend): shadcn-svelte initialisiert (refs #65)

components.json anlegen, shadcn-Komponenten generieren
app.css @theme-Block erweitern (L1)
playground.test.ts CSS-Test anpassen

1b est(frontend): shadcn-svelte-Integration geprueft (closes #65)

Smoke-Tests: Button, Input, Card etc. importierbar
npm run check && npm run test erfolgreich

## Beschreibung Installation von shadcn-svelte als UI-Komponentenbibliothek und Einrichtung der CSS-Variablen fuer das Theming. Das Projekt nutzt Tailwind v4 via @tailwindcss/vite - shadcn-svelte ist dafuer kompatibel, benoetigt aber zusaetzliche CSS-Variablen in pp.css. ## Schritte 1. px shadcn-svelte@latest init (oder manuelle Konfiguration mit components.json) - Komponenten-Pfad: $lib/components/ui/ - utils-Pfad: $lib/utils (bestehende cn()-Funktion nutzen) 2. px shadcn-svelte@latest add button input select card badge table sheet dialog 3. CSS-Variablen in pp.css ergaenzen (shadcn-Theming) ## CSS-Variablen (in app.css) `css @layer base { :root { --background: var(--color-bg); --foreground: var(--color-text); --card: var(--color-bg); --card-foreground: var(--color-text); --primary: var(--color-primary-600); --primary-foreground: white; --secondary: var(--color-bg-secondary); --secondary-foreground: var(--color-text); --muted: var(--color-bg-secondary); --muted-foreground: var(--color-text-secondary); --destructive: var(--color-error); --destructive-foreground: white; --border: var(--color-border); --ring: var(--color-primary-300); --radius: var(--radius-md); } } ` ## Dateien (neu/geaendert) - rontend/components.json (neu) - rontend/src/lib/components/ui/ (shadcn-Komponenten) - rontend/src/app.css (CSS-Variablen) - rontend/package.json (Abhaengigkeiten aktualisiert) ## Tests - Keine spezifischen Tests (CSS-Variablen werden visuell sichtbar) - pm run dev prueft: Komponenten importierbar - pm run check (svelte-check) ohne Fehler ## Akzeptanzkriterien - [ ] shadcn-svelte-Komponenten sind importierbar (Button, Input, Card, etc.) - [ ] Komponenten verwenden unsere Design-Tokens (blaue Primary-Farbe) - [ ] pm run dev startet ohne Fehler - [ ] pm run check (svelte-check) erfolgreich ## Aktualisierter Plan (2026-06-21) ### Zusaetzlich erkannt (L1) Der @theme-Block in pp.css muss um shadcn-CSS-Variablen erweitert werden: --color-background, --color-foreground, --color-card, --color-card-foreground, --color-primary-foreground, --color-secondary, --color-secondary-foreground, --color-muted, --color-muted-foreground, --color-destructive, --color-destructive-foreground, --color-border, --color-ring, --radius-* ### Commits **1a** chore(frontend): shadcn-svelte initialisiert (refs #65) - components.json anlegen, shadcn-Komponenten generieren - app.css @theme-Block erweitern (L1) - playground.test.ts CSS-Test anpassen **1b** est(frontend): shadcn-svelte-Integration geprueft (closes #65) - Smoke-Tests: Button, Input, Card etc. importierbar - npm run check && npm run test erfolgreich

niboer added this to the MS10: Vollständige UI milestone

2026-06-21 16:18:02 +00:00

niboer added the

component/frontend

prio/medium

type/chore

labels

2026-06-21 16:18:02 +00:00

niboer referenced this issue from a commit

2026-06-21 16:55:10 +00:00

chore(frontend): shadcn-svelte initialisiert mit CSS-Variablen

niboer referenced this issue from a commit