presseportale/dev/frontend/hub-flux

Hub × FluxUI — Visuelle Vereinheitlichung Portal ↔ Hub

Ziel: Das Portal-Backend (User-Panel, Admin-Bereich) wird visuell an den Hub-Stil (pressekonto.test-Landing + Auth-Seiten) angeglichen, ohne FluxUI aufzugeben. Die FluxUI-Komponenten werden über Design-Tokens und CSS-Overrides ans Hub-Design adaptiert.

Status

Phase	Beschreibung	Status
0	Design-Tokens vereinheitlichen	✅ abgeschlossen (2026-05-19)
1	Portal-Shell (Sidebar, Layout, Brand-Mark)	✅ abgeschlossen (2026-05-19)
2	Customer-Dashboard auf Mockup-Stil (inkl. Topbar)	🟡 wartet auf Freigabe
3	Admin-Dashboard konsistent	⚪ später
4	Listen-/Detail-Pages	⚪ iterativ
5	Dark Mode konsistent	⚪ später
6	Auth-Konsolidierung (optional)	⚪ optional

→ Tagesaktueller Fortschritt: PROGRESS.md

Dokumente in diesem Verzeichnis

Datei	Zweck
README.md	Diese Übersicht: Entscheidung, Architektur, Status
01-PHASE-0-TOKENS.md	Phase 0: Tokens vereinheitlichen (aktiv)
02-PHASE-1-PORTAL-SHELL.md	Phase 1: Portal-Shell ans Hub-Design angleichen
03-WEITERE-PHASEN.md	Outline für Phasen 2–6
PROGRESS.md	Fortschritts-Log + Notizen

Visuelle Vorlagen

Maßgebliche Mockups für diese Arbeit:

• dev/frontend/tailwind_v3/User Dashboard presseportale.html — Light-Variante
• dev/frontend/tailwind_v3/User Dashboard presseportale Dark.html — Dark-Variante
• dev/frontend/tailwind_v3/Login pressekonto A3 Tailwind.html — Hub-Auth-Vorlage (bereits umgesetzt)
• dev/frontend/tailwind_v3/Hub Landing pressekonto-2.html — Hub-Landing-Vorlage (bereits umgesetzt)

Architektur-Entscheidung

Plan B (gewählt) — Tokens teilen, Komponenten getrennt lassen

┌─────────────────────────────────────────────────────────────────┐
│                  shared/design-tokens.css                       │
│  (Hub-Blau, Bernstein, Buchpapier, Inter Tight, JetBrains Mono) │
└────────────────┬────────────────────────┬───────────────────────┘
                 │                        │
        ┌────────▼─────────┐    ┌─────────▼──────────┐
        │   portal.css     │    │  theme-pressekonto │
        │   + FluxUI       │    │  + shared-styles   │
        │   (Backend)      │    │  (Hub-Landing/Auth)│
        └──────────────────┘    └────────────────────┘
        build/portal             build/web

Warum nicht alles in FluxUI?

• Die Hub-Landing lebt von Atmosphäre (konzentrische Kreise, Hub-Grid, eigene Eyebrows, Bridge-Cards), die mit FluxUI-Komponenten nicht 1:1 abbildbar ist
• FluxUI würde im Hub-Frontend zur unnötigen Bundle-Last
• Der gerade gebaute Hub-Login wäre verloren

Warum nicht alles Custom?

• 77 Blade-Dateien nutzen FluxUI – ein Rewrite wäre Aufwand ohne Mehrwert
• FluxUI-Tabellen, -Forms, -Modals, -Date-Picker sind im Backend Gold wert
• FluxUI ist sehr gut customizable über CSS-Custom-Properties und [data-flux-*]-Selectoren

Verworfen — Plan A (alles FluxUI) & Plan C (alles im Web-Build)

Siehe Chat-Historie für die Begründung. Kurz: zu viel Aufwand, zu wenig Mehrwert, würde bereits gelieferte Hub-Atmosphäre verschlechtern.

Branding & Tokens

Brand

• Marke: pressekonto (verbindlich, für Portal und Hub)
• Wortmarke: <x-web.brand-mark brand="pressekonto" /> — auch im Portal
• Logo-Komponente <x-app-logo> wird im Portal abgelöst

Farben (Light)

Token	Wert	Rolle
--color-hub	#1A2540	Primärer Akzent (Sidebar-Active, Primary-Buttons, Eyebrows)
--color-hub-2	#243152	Hover-Stufe von --color-hub
--color-hub-3	#2E3D66	Tertiäre Stufe (Dekoration auf dunklem Grund)
--color-hub-soft	#E5E9F1	Active-Pill-Hintergrund in der Sidebar
--color-accent	#B07A3A	Sekundärer Akzent (Bernstein – Notifications, Datenqualität, Empfehlungs-Ribbon)
--color-accent-deep	#8A5E27	Akzent-Hover/Text
--color-bg	#F6F4EF	Warmes Buchpapier — Haupt-Hintergrund
--color-bg-elev	#FBFAF6	Elevation 1 (Sidebar, Topbar, leichte Cards)
--color-bg-card	#FFFFFF	Reine Cards
--color-bg-rule	#E2DDD0	Standard-Trennlinien
--color-ink	#1A1F1C	Primärtext
--color-ink-2	#3A413D	Sekundärtext (Begleittexte)
--color-ink-3	#5A6360	Meta, Labels
--color-ink-4	#8A918D	Disabled, Hintergrund-Meta

Farben (Dark) — laut Mockup

Wird in Phase 5 ausgearbeitet. Hub-Blau wird heller (#5A78C2), Akzent wärmer (#D9A560), Hintergrund tief Anthrazit (#0E1218). Wichtig: die Token-Namen bleiben gleich, nur die Werte tauschen — keine doppelte UI-Pflege.

Typografie

Token	Wert
--font-sans	"Inter Tight", Inter, system-ui, sans-serif
--font-mono	"JetBrains Mono", "SF Mono", ui-monospace, monospace
--font-serif	"Source Serif 4", Georgia, serif (nur für Brand-Mark)

Aktuell im Portal: Instrument Sans → wird in Phase 1 abgelöst.

Konventionen

• Light Mode ist Default. class="dark" auf <html> wird entfernt.
• Dark Mode wird via prefers-color-scheme + Flux Appearance-Switcher gesteuert. Token-Layer übernimmt die Umschaltung.
• Token-Names sind identisch zwischen Hub-Theme und Portal-Theme. Sowohl bg-bg-elev als auch bg-hub-soft funktionieren in beiden Welten.
• FluxUI-Komponenten werden nicht überschrieben, sondern über [data-flux-*]-Selectoren in portal.css ergänzt — minimaler Eingriff, maximale Kompatibilität mit FluxUI-Updates.

Was wir bewusst NICHT machen

• Kein FluxUI-Rewrite. Nur Token-Anpassung + Selektor-Overrides.
• Keine zweite UI-Pflege für Dark Mode. Tokens-only-Ansatz.
• Kein Verschmelzen der Builds (Phase 6 optional).
• Keine Änderung an Volt-/Livewire-Logik in dieser Arbeit.

Wer ändert was

• Diese Doku wird mit jeder Phase aktualisiert. PROGRESS.md enthält die Tages-Notes.
• Code-Änderungen sind kleinteilig und werden in eigenen Commits gebündelt (hub-flux: phase 0 — tokens vereinheitlicht, etc.).
• Bei Unklarheiten/Entscheidungen: kurz in PROGRESS.md festhalten, damit nachvollziehbar bleibt warum etwas so und nicht anders.