Color Consistency Checker

Prüft ob Farben konsistent mit dem Farbschema verwendet werden.

Offizielles Farbschema

Definiert in tailwind.config.ts und app/globals.css:

Häufige Probleme

1. Hardcoded Hex statt Tailwind-Klasse

tsx
1// ❌ Schlecht - hardcoded
2className="bg-[#FFBF00] text-black hover:bg-[#E5AC00]"
3className="text-[#FFBF00]"
4className="border-[#FFBF00]"
5
6// ✅ Gut - Tailwind-Klassen
7className="bg-primary text-primary-foreground hover:bg-primary/90"
8className="text-primary"
9className="border-primary"

2. Inkonsistente Hover-States

tsx
1// ❌ Verschiedene Hover-Farben
2hover:bg-[#E5AC00]  // manchmal
3hover:bg-[#d4a000]  // manchmal anders
4
5// ✅ Konsistent
6hover:bg-primary/90

3. Hardcoded Grautöne

tsx
1// ❌ Hardcoded
2bg-[#1a1a1a]
3text-[#ededed]
4border-[#3a3a3a]
5
6// ✅ Semantic
7bg-background
8text-foreground
9border-border

Prüfungs-Workflow

Schritt 1: Finde hardcoded Farben

bash
1# Alle Hex-Farben in TSX/TS Dateien
2rg '#[0-9A-Fa-f]{6}' --type ts --type tsx -g '!*.json'
3
4# Spezifisch Primary-Farbe
5rg '#FFBF00|#ffbf00' --type ts --type tsx
6
7# Bracket-Notation (Tailwind arbitrary values)
8rg '\[#[0-9A-Fa-f]{6}\]' --type ts --type tsx

Schritt 2: Kategorisiere die Funde

Schritt 3: Ausnahmen identifizieren

Diese hardcoded Farben sind OK:

1. EBC/SRM Bierfarben in RecipeCard.tsx:

   tsx
   1// Diese sind dynamisch berechnet!
   2if (srm < 4) return "#F8F5D4"; // Pale Straw
   3if (srm < 7) return "#F3F993"; // Gold

2. Print Styles in RecipeCard.tsx:

   tsx
   1// Print braucht andere Farben
   2border-bottom: 2px solid #FFBF00;

3. OG Images in app/api/og/:

   tsx
   1// Generierte Bilder, kein Tailwind

Report-Format

markdown
1## Farbkonsistenz-Prüfung
2
3### 🔴 Kritisch (hardcoded Primary)
4| Datei | Zeile | Aktuell | Vorschlag |
5|-------|-------|---------|-----------|
6| Navbar.tsx | 42 | `bg-[#FFBF00]` | `bg-primary` |
7
8### 🟡 Empfohlen (andere hardcoded)
9| Datei | Zeile | Aktuell | Vorschlag |
10|-------|-------|---------|-----------|
11| Footer.tsx | 15 | `text-[#a0a0a0]` | `text-muted-foreground` |
12
13### ✅ Ausnahmen (OK)
14- RecipeCard.tsx: EBC Farben (dynamisch berechnet)
15- api/og/route.tsx: OG Image Generation

Bekannte Dateien mit vielen Hardcoded Farben

Diese Dateien haben besonders viele hardcoded Farben:

• app/cellar/page.tsx - 13 Stellen
• components/RecipeCard.tsx - 82 Stellen (viele OK wegen Print/EBC)
• components/BrewSession.tsx - 110 Stellen
• components/WizardStep2.tsx - 6 Stellen
• components/Navbar.tsx - 22 Stellen

Ersetzungs-Regeln

Button Primary

tsx
1// ❌ Vorher
2<Button className="bg-[#FFBF00] text-black hover:bg-[#E5AC00]">
3
4// ✅ Nachher
5<Button className="bg-primary text-primary-foreground hover:bg-primary/90">

Text Primary

tsx
1// ❌ Vorher
2<span className="text-[#FFBF00]">
3
4// ✅ Nachher
5<span className="text-primary">

Tab Active State

tsx
1// ❌ Vorher
2className="data-[state=active]:bg-[#FFBF00] data-[state=active]:text-black"
3
4// ✅ Nachher
5className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"

Star/Rating

tsx
1// ❌ Vorher
2className={rating ? "text-[#FFBF00] fill-[#FFBF00]" : "text-zinc-600"}
3
4// ✅ Nachher
5className={rating ? "text-primary fill-primary" : "text-muted-foreground"}