148 lines
7.2 KiB
Markdown
148 lines
7.2 KiB
Markdown
# 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 | **✅ abgeschlossen** (in P1, verfeinert in 4J) |
|
||
| 3 | Admin-Dashboard konsistent | **✅ abgeschlossen** (in P1, verfeinert in 4J) |
|
||
| 4 | Listen-/Detail-Pages (4A–4J) | **✅ abgeschlossen** (2026-05-20) |
|
||
| 5 | Dark Mode konsistent | **✅ abgeschlossen** (2026-05-20) |
|
||
| 6 | Auth-Cleanup | **✅ abgeschlossen** (2026-05-20) |
|
||
| 7 | Press-Release-Form-Refactor (7A–7F) | **✅ abgeschlossen** (2026-05-22) |
|
||
|
||
Die hub-flux-Roadmap (Phase 0–6) ist vollständig abgeschlossen; Phase 7
|
||
(PM-Form-Refactor) als Folge-Initiative ebenfalls. Detail-Plan für Phase 7:
|
||
[`19-PHASE-7-PRESS-RELEASE-FORM.md`](./19-PHASE-7-PRESS-RELEASE-FORM.md).
|
||
|
||
→ Tagesaktueller Fortschritt: [`PROGRESS.md`](./PROGRESS.md)
|
||
|
||
## Dokumente in diesem Verzeichnis
|
||
|
||
| Datei | Zweck |
|
||
|-------|-------|
|
||
| [`README.md`](./README.md) | Diese Übersicht: Entscheidung, Architektur, Status |
|
||
| [`01-PHASE-0-TOKENS.md`](./01-PHASE-0-TOKENS.md) | Phase 0: Tokens vereinheitlichen (aktiv) |
|
||
| [`02-PHASE-1-PORTAL-SHELL.md`](./02-PHASE-1-PORTAL-SHELL.md) | Phase 1: Portal-Shell ans Hub-Design angleichen |
|
||
| [`03-WEITERE-PHASEN.md`](./03-WEITERE-PHASEN.md) | Outline für Phasen 2–6 |
|
||
| [`PROGRESS.md`](./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.
|