46 lines
2.6 KiB
Markdown
46 lines
2.6 KiB
Markdown
 
|
---
|
||
|
|
type: issue
|
||
|
|
id: "0029"
|
||
|
|
status: open
|
||
|
|
created: 2026-08-06
|
||
|
|
milestone: M4
|
||
|
|
priority: medium
|
||
|
|
gitlab_iid: "29"
|
||
|
|
related: []
|
||
|
|
---
|
||
|
|
# UI harmonisieren: gleiche Farben und Formen über alle Oberflächen
|
||
|
|
|
||
|
|
> Import aus [management#29](https://git.lab/axion1337.chat/management/-/issues/29) (2026-08-11). Kommentare und Verlauf bleiben dort; kanonisch ist ab jetzt diese Datei (ADR-0012).
|
||
|
|
|
||
|
|
Die Plattform besteht aus mehreren Oberflächen, die nacheinander im selben Nutzerweg auftauchen — und jede bringt ihr eigenes Design-System mit. Das fällt am stärksten an der Anmeldung auf: Authentik (PatternFly) und der Client (Elements Compound) stehen direkt hintereinander und sehen aus wie zwei verschiedene Produkte.
|
||
|
|
|
||
|
|
## Was zu harmonisieren ist
|
||
|
|
|
||
|
|
| Oberfläche | Design-System | heute eingestellt |
|
||
|
|
|---|---|---|
|
||
|
|
| ThreadNet-Web (Client) | Compound | 17 eigene Themes, Markenfarbe `#ed4f4c` |
|
||
|
|
| Authentik (Anmeldung) | PatternFly | nur `branding_title`/Favicon/Hintergrund; `branding_custom_css` **ungenutzt** |
|
||
|
|
| BookStack | eigenes | sorbs Terrakotta-Beige, liegt nur in der DB |
|
||
|
|
| Docusaurus-Wiki | Infima | bislang nur die Akzentfarbe |
|
||
|
|
| Grafana | eigenes | unangetastet |
|
||
|
|
|
||
|
|
## Woran es konkret hängt
|
||
|
|
|
||
|
|
1. **Farben.** Es gibt bereits eine Markenfarbe (`#ed4f4c`) und sorbs Terrakotta-Palette. Beide sind dokumentiert (`shared/branding.md`), aber nur teilweise ausgerollt.
|
||
|
|
2. **Formen.** Radien, Schatten und Button-Höhen unterscheiden sich zwischen den Systemen — mal rund, mal eckig. Das ist das, was den Bruch spürbar macht, noch vor der Farbe.
|
||
|
|
3. **Typografie.** Bisher nirgends vereinheitlicht.
|
||
|
|
|
||
|
|
## Vorschlag für den Zuschnitt
|
||
|
|
|
||
|
|
Nicht alles auf einmal. Sinnvolle Reihenfolge nach sichtbarer Wirkung pro Aufwand:
|
||
|
|
|
||
|
|
1. **Authentik an den Client angleichen** — der Bruch mitten im Anmeldeweg ist der auffälligste. Hebel ist `branding_custom_css` auf dem Brand-Blueprint, also deklarativ und rückbaubar. ⚠️ Vorher klären, ob Authentiks Flow-Komponenten Shadow DOM nutzen — dann greift normales CSS nicht und es braucht `::part()`-Selektoren.
|
||
|
|
2. **Farbwerte an einer Stelle festschreiben**, statt sie je Oberfläche einzutippen. Heute ist die Kopie in `shared/branding.md` die Quelle; ob daraus etwas Maschinenlesbares wird, ist die eigentliche Entscheidung.
|
||
|
|
3. Wiki und BookStack nachziehen.
|
||
|
|
|
||
|
|
## Vorbedingung
|
||
|
|
|
||
|
|
Die offene Frage aus `shared/branding.md` — ob Terrakotta das Stammschema ablöst oder eine Alternative bleibt — sollte **vorher** entschieden sein. Sonst harmonisiert man auf einen Zielwert, der danach wechselt.
|
||
|
|
|
||
|
|
Aufgenommen aus der Session vom 2026-08-06, in der Titelbild und Authentik-Brand gesetzt wurden.
|