Design System Übersicht
Alle Farbtokens, Buttons und Badges – mit internem Code-Namen, Farbwert und Verwendungszweck.
🎨 Farb-Tokens (CSS-Variablen)
Definiert in index.css als HSL-Werte. Änderung dort wirkt sich auf die gesamte App aus.
--primary
225 73% 50%
#2246cc
--primary-foreground
0 0% 100%
#ffffff
--secondary
220 14% 94%
#eff0f3
--secondary-foreground
222 47% 11%
#0f1a2e
--accent
35 95% 55%
#f5a623
--accent-foreground
0 0% 100%
#ffffff
--destructive
0 84% 60%
#f03e3e
--destructive-foreground
0 0% 98%
#fafafa
--muted
220 14% 94%
#eff0f3
--muted-foreground
220 9% 46%
#6b7280
--background
220 20% 97%
#f5f6f8
--foreground
222 47% 11%
#0f1a2e
--card
0 0% 100%
#ffffff
--border
220 13% 89%
#dfe1e7
bg-green-100 text-green-700, bg-amber-50 text-amber-700, bg-pink-100 text-pink-700 – diese sind nicht über CSS-Variablen steuerbar.🔘 Buttons
Default / Primary
variant="default"
Hauptaktion: Ticket kaufen, Speichern, Neues Event, Hinzufügen
Outline
variant="outline"
Sekundäraktion: Bearbeiten, PDF herunterladen, Ansehen, Abbrechen
Ghost
variant="ghost"
Tertiäre/Icon-Aktionen: Ticket-Typen, Löschen (Icon), Navigation-Tabs
Destructive
variant="destructive"
Gefährliche Aktionen (aktuell kaum direkt genutzt, hauptsächlich über destructive Badge)
Secondary
variant="secondary"
Alternativ-Aktion, selten direkt genutzt
Link
variant="link"
Textlinks
Größen
Klein – Tabellen, Listen
Standard
Groß – CTAs
Icon-only
Spezial-Styles (hardcoded Tailwind-Klassen im Code)
Tab Navigation (aktiv)bg-card text-foreground shadow-sm
Tab Navigation (inaktiv)text-muted-foreground
Filter-Toggle (aktiv)bg-primary text-primary-foreground
🏷️ Badges – shadcn/ui Varianten
Default
variant="default"
Hauptticket-Status, Standard-Kennzeichnung
Secondary
variant="secondary"
Eingelöst (used), neutrale Kennzeichnung
Destructive
variant="destructive"
Storniert (cancelled), Fehler
Outline
variant="outline"
Datum, Zusatzinfos, Fälligkeiten, Unsichtbar-Badge
🏷️ Badges – Hardcoded Tailwind-Klassen
Diese Badges haben keine shadcn-Variante, sondern direkte Klassen im Code.
Bezahlt / Paid
bg-green-100 border-green-400 text-green-700
Zahlungsstatus: Bezahlt – TicketCard, TicketEditor, PaymentConfirmPanel
Zahlung offen
border-amber-400 text-amber-700 bg-amber-50
Zahlungsstatus: Ausstehend – TicketCard (outline-Stil)
Highlight / Accent
bg-accent text-accent-foreground
Highlight-Events – EventCard, AdminEvents (Star-Badge)
Couple Ticket
bg-pink-100 text-pink-700
Couple-Ticket-Kennzeichnung – TicketTypeManager
Ticket-Gruppe
bg-primary/10 text-primary
Ticket-Typ-Gruppe – TicketTypeManager
Testmodus
border-amber-400 text-amber-700 bg-amber-50
Event im Testmodus – AdminEvents
Unsichtbar
border-slate-400 text-slate-500 bg-slate-50
Event unsichtbar – AdminEvents
Inaktiv
border-destructive/50 text-destructive
Event inaktiv (Tickets nicht kaufbar) – AdminEvents
Transfer: Warte auf Admin
bg-amber-50 border-amber-400 text-amber-700
Transfer-Status: Wartet auf Admin-Genehmigung – TicketCard
Transfer: Warte auf Empfänger
bg-blue-50 border-blue-400 text-blue-700
Transfer-Status: Empfänger muss beanspruchen – TicketCard
Transfer: Abgeschlossen
bg-green-50 border-green-400 text-green-700
Transfer-Status: Übertragen – TicketCard
Transfer: Abgelehnt
bg-red-50 border-red-400 text-red-700
Transfer-Status: Abgelehnt – TicketCard
Ausverkauft
variant=secondary
Event ausverkauft – EventCard, AdminEvents
Abgesagt
variant=destructive
Event abgesagt – EventCard, AdminEvents
Rechnung: Bezahlt
bg-green-100 border-green-400 text-green-700
Rechnungs-Zahlungsstatus – AdminInvoicePanel
Rechnung: Ausstehend
border-amber-400 text-amber-700 bg-amber-50
Rechnungs-Zahlungsstatus – AdminInvoicePanel
💳 Zahlungsstatus-Balken (TicketCard)
Die farbigen Statusleisten unterhalb des Tickets in der TicketCard-Komponente.
bg-amber-50 border-amber-300 text-amber-700 — payment_status: "pending"
bg-green-50 border-green-300 text-green-700 — payment_status: "paid"
bg-destructive/10 border-destructive/30 text-destructive — status: "cancelled"