Matthias Meister
1e99251506
- Introduced a new section detailing the Single Source of Truth for various components, linking to their respective CLAUDE.md files. - Enhanced clarity on documentation organization across different areas of the project.
1.6 KiB
1.6 KiB
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(keintailwind.config.tsin v4) - Manrope — Primäre Schrift (
--font-sans), geladen vianext/font/google
Design-Token-Konventionen
Tokens folgen dem Manifest: Teal-Primary, warme Neutraltöne (Sand/Beige), Zitronengelb als Akzent.
/* 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.
transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
Neue Komponenten
- ShadCN-Komponente mit
npx shadcn@latest add <name>hinzufügen - In
components/ui/ablegen (automatisch durch ShadCN-CLI) - Anpassungen direkt in der Komponente — keine separaten Override-Dateien
- Token-Konventionen aus
globals.cssverwenden, keine Hardcoded-Farben