Kontext (Was & Warum)

Um eine konsistente User Experience und Markenidentität in der HAUSMETER-Applikation zu gewährleisten, migrieren wir nackte HTML-Formularelemente auf standardisierte UI-Komponenten. Basis hierfür ist shadcn/ui in Kombination mit unseren spezifischen Hausmeter-Design-Tokens (Tailwind CSS).

Dies zentralisiert das Styling (Cashmere-Borders, Fraunces-Typografie) und reduziert redundanten Code in den Formularen. Die HSL-Farbwerte werden global über die globals.css gesteuert, was zukünftige Theme-Anpassungen massiv vereinfacht.

Architektur & Integration

• shadcn/ui Basis liefert Hausmeter Tokens an Komponenten (ui/input.tsx, ui/select.tsx, ui/textarea.tsx, ui/dialog.tsx)
• Native HTML-Tags werden durch shadcn-Komponenten ersetzt

Betroffene Komponenten & Dateien

Neue UI-Komponenten (Frontend):

• components/ui/input.tsx
• components/ui/select.tsx
• components/ui/dialog.tsx
• components/ui/textarea.tsx

Globale Styles:

• app/globals.css (Definition der HSL-Custom-Properties für die Brand-Farben)

Refaktorierte Formulare (Erster Rollout):

• Tenant-Modal (Mieter-Verwaltung)
• Property-Edit-Form (Liegenschaften)

Design Tokens

| Token | Wert | Verwendung | |-------|------|------------| | Barley | #E6C79B | Primär, Aktion, Buttons, Links | | Cashmere | #A88B65 | Akzent, Highlight, Fläche | | Cinder | #181818 | Text, Dunkelgrund | | Parchment | #FAF8F4 | Hintergrund | | Mercury | #E5E5E5 | Linien, Rahmen |

Typografie

| Element | Font | Größe | |---------|------|-------| | h1 | Fraunces 500 | 38pt | | h2 | Fraunces 500 | 28pt | | h3 | Fraunces 500 | 21pt | | body | Cabin 400 | 12pt | | label | Montserrat 500 | 9.5pt |