Matthias Meister
456b910532
- Updated version from v1.5 to v2.0 in both the LemonSpace Manifest and PRD documents. - Expanded Phase 1 scope to include video and asset nodes, and integrated non-destructive image editing capabilities. - Enhanced node taxonomy to reflect 6 categories with 27 node types. - Added details on offline sync features and optimistic updates in the documentation. - Improved clarity and structure of the product vision and problem statement sections.
80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
# components/ui/ — Design System
|
|
|
|
ShadCN-Komponenten mit LemonSpace-spezifischen Anpassungen. Neue UI-Primitive immer hier ablegen.
|
|
|
|
---
|
|
|
|
## Stack
|
|
|
|
- **ShadCN UI** — Komponentenbibliothek (copy-paste, nicht installiertes Paket)
|
|
- **Tailwind CSS v4** — Utility-first, config in `globals.css` (kein `tailwind.config.ts` in v4)
|
|
- **Manrope** — Primäre Schrift (`--font-sans`), geladen via `next/font/google`
|
|
|
|
---
|
|
|
|
## Design-Token-Konventionen
|
|
|
|
Tokens folgen dem Manifest: **Teal-Primary, warme Neutraltöne (Sand/Beige), Zitronengelb als Akzent**.
|
|
|
|
```css
|
|
/* Primärfarbe */
|
|
--primary: teal /* Hauptaktionen, Links, aktive States */
|
|
|
|
/* Neutraltöne — immer warm tönen */
|
|
--background: warm-white /* Nie kaltes #fff oder gray-50 */
|
|
--muted: sand/beige /* Sekundäre Hintergründe */
|
|
--border: warm-gray /* Niemals kaltes gray-200 */
|
|
|
|
/* Akzentfarbe */
|
|
--accent: lemon-yellow /* Sparsam einsetzen — Highlights, Badges */
|
|
```
|
|
|
|
**Anti-Pattern:** Kalte Grautöne (`gray-100`, `slate-200`) ohne Wärme-Anpassung. Immer Richtung Sand/Beige tönen.
|
|
|
|
---
|
|
|
|
## Animationen
|
|
|
|
Übergänge mit **exponentiellem Easing** (`ease-out` / `cubic-bezier`). Keine linearen Transitions.
|
|
|
|
```css
|
|
transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
|
|
```
|
|
|
|
---
|
|
|
|
## Neue Komponenten
|
|
|
|
1. ShadCN-Komponente mit `npx shadcn@latest add <name>` hinzufügen
|
|
2. In `components/ui/` ablegen (automatisch durch ShadCN-CLI)
|
|
3. Anpassungen direkt in der Komponente — keine separaten Override-Dateien
|
|
4. Token-Konventionen aus `globals.css` verwenden, keine Hardcoded-Farben
|
|
|
|
---
|
|
|
|
## Layout-Komponenten
|
|
|
|
| Komponente | Pfad | Verwendung |
|
|
|------------|------|------------|
|
|
| `resizable` | `components/ui/resizable.tsx` | Sidebar-Resizing in Canvas |
|
|
| `dialog` | `components/ui/dialog.tsx` | Confirmations, Popovers |
|
|
| `popover` | `components/ui/popover.tsx` | Dropdowns, Kontext-Menüs |
|
|
| `badge` | `components/ui/badge.tsx` | Status-Tags, Badges |
|
|
| `tooltip` | `components/ui/tooltip.tsx` | Explainer-Texte |
|
|
| `separator` | `components/ui/separator.tsx` | Trennungen |
|
|
|
|
---
|
|
|
|
## ShadCN Integration
|
|
|
|
ShadCN-Komponenten werden nicht als npm-Paket installiert, sondern als Copy-Paste in das Projekt kopiert. Dies ermöglicht volle Kontrolle über die Implementierung und Anpassung an die LemonSpace-Design-Systeme.
|
|
|
|
**Standard-Prozess:**
|
|
```bash
|
|
npx shadcn@latest add button
|
|
npx shadcn@latest add input
|
|
# ... andere Komponenten
|
|
```
|
|
|
|
Komponenten werden direkt in `components/ui/` abgelegt. Lokale Anpassungen erfolgen durch Überladen von Props oder direkt in der Komponentendatei.
|