From 9d604aa5503f770376e7bae11838e5f44bceeb77 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 4 Oct 2026 23:45:44 +0000 Subject: [PATCH] Konzept: weisses Design fuer WOMS (Spec + Umbaukarte) Steriles Weiss, kaum Rahmen, kaum Icons, Akzent Schwarz, Ticket als eigene Seite. Pakete P0-P10, jedes einzeln ueber ein Tag live. Gegen den Code geprueft (4 Pruefer + Gegenpruefung, 66 Befunde eingearbeitet). Co-Authored-By: Claude Opus 5.5 --- .../specs/2026-10-04-weisses-design-design.md | 541 ++++++++++++++ .../2026-10-04-weisses-design-umbaukarte.md | 694 ++++++++++++++++++ 2 files changed, 1235 insertions(+) create mode 100644 docs/superpowers/specs/2026-10-04-weisses-design-design.md create mode 100644 docs/superpowers/specs/2026-10-04-weisses-design-umbaukarte.md diff --git a/docs/superpowers/specs/2026-10-04-weisses-design-design.md b/docs/superpowers/specs/2026-10-04-weisses-design-design.md new file mode 100644 index 0000000..1c38ae0 --- /dev/null +++ b/docs/superpowers/specs/2026-10-04-weisses-design-design.md @@ -0,0 +1,541 @@ +# WOMS „Weißes Design“ – Konzept + +Stand 2026-10-04. Freigegeben im Gespräch: +- Prototyp angesehen, Akzentfarbe „Schwarz passt“. +- Ticket öffnet als eigene Seite. +- Paketablauf und alle Standardentscheidungen mit „ja passt“. + +Danach gegen den Code geprüft: 4 Prüfer, Gegenprüfung jedes Befunds, 66 bestätigte Befunde eingearbeitet. + +Grundlage: +- Klick-Prototyp im Repo `WEBklar/ticketsystem-design`, Vorschau `https://ticketsystem-design.project.webklar.com` mit Mitarbeiter-Login. Kopie unter `/root/reports/ticketsystem-design-2026-10-04/quelle/`. +- Bestandsaufnahme aller 104 Quelldateien in `2026-10-04-weisses-design-umbaukarte.md` (gleicher Ordner). **Bei Widersprüchen gilt dieses Dokument.** + +## Ziel + +Das ganze Ticketsystem (ticket.webklar.com) bekommt ein neues Aussehen: +- steriles Weiß, sehr minimalistisch, +- kaum Rahmen, kaum Icons, +- angelehnt an das Stripe-Dashboard und trotzdem übersichtlich. + +Das dunkle Design entfällt vollständig. Es gibt keinen Umschalter. + +Der Umbau ist **rein visuell**, mit zwei Ausnahmen: +- die in „Bewusste Änderungen am Verhalten“ genannten Punkte, +- vor allem: Ein Ticket öffnet als **eigene Seite** mit eigenem Link (`/tickets/`), statt in der Liste aufzuklappen. + +Erfolg heißt: +- Jede Seite folgt den Gestaltungsregeln. +- Keine heutige Funktion geht verloren, außer den ausdrücklich genannten. +- Alle Tests sind grün. +- Jedes Paket geht einzeln live. +- Das jüngste Paket lässt sich per Revert zurücknehmen. + +Nicht im Umfang: +- Dark Mode, neue Funktionen +- Änderungen am Datenmodell, an Rechten oder am Server +- das Kundenportal, auch nicht dessen Chat-Composer +- Terminplaner TP2 +- flächige Rechtschreibkorrekturen (ae/ue) in Bestandstexten + +## Gestaltungsregeln + +1. **Weiß überall.** + - Seite, Menü und Dialoge haben `#ffffff`. + - Es gibt keine Verläufe, Leuchteffekte, Glas-Effekte oder Hintergrundanimationen. + - Einzige Ausnahme sind Bildansicht und Kamera des fremden Chat-Composers. Sie bleiben dunkel, weil sie Medienbetrachter sind. +2. **Kaum Rahmen.** + - Struktur entsteht durch Weißraum, Schriftgrößen und einzelne 1-px-Haarlinien `#ebeef1`. + - Haarlinien stehen zwischen Tabellen- und Listenzeilen, unter Reitern, rechts neben dem Menü, zwischen Schlüsselwerten (`.fact`) und zwischen den Tagesspalten im Planboard. + - Karten oder Kästen um Inhalte gibt es nicht. + - Eingabefelder und Zweitknöpfe tragen statt Rahmen einen feinen Ring-Schatten. +3. **Kaum Icons.** + - Menü, Knöpfe, Überschriften und Badges tragen keine Icons. + - Handelnde Zeichen werden als Schriftzeichen gesetzt, nicht als Icon-Komponente: Schließen „ד, Pfeile „← →“, Sortierung „↑ ↓“. + - Am Ende fliegen `react-icons` und `@tabler/icons-react` aus `package.json`. +4. **Eine Akzentfarbe: Schwarz `#111111`.** + - Sparsam eingesetzt: Primärknöpfe, aktiver Reiter, aktiver Menüpunkt, heutige Datumspille im Planboard. + - Pro Seitenkopf höchstens ein schwarzer Knopf. + - Links sind am feinen Unterstrich erkennbar, nicht an der Farbe. +5. **Statusfarben** sind leicht getönte Pillen ohne Rahmen: Radius 4 px, Höhe 20 px, Schrift 12 px/500. + + | Ton | Hintergrund | Schrift | Ticketstatus (gespeicherte Werte) | + |---|---|---|---| + | grau | #ebeef1 | #414552 | Offen (`Open`), leer oder unbekannt | + | blau | #e0f2fe | #075985 | In Arbeit (`Occupied`, `Assigned`, `Added Info`, `In Kontakt`) | + | orange | #fcedb9 | #a82c00 | Wartet auf Kunde (`Awaiting`, `Halted`) | + | violett | #efeafe | #5b21b6 | Prüfung (`In Test`) | + | grün | #d7f7c2 | #006908 | Erledigt (`Closed`, `Zugesagt`) | + | plain | – | #5e6678 | Storniert (`Cancelled`, `Aborted`, `Abgesagt`) | + | rot | #ffe7f2 | #b3093c | kein Status: Badge „Dringend“ | + +6. **Schrift.** + - Systemschrift `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`. Lato und `src/assets/fonts` entfallen. + - Größen: h1 28/34 700 (Handy 24/30), Abschnitt-h2 16/24 600, Dialogtitel 18/26 600, Text 14/20, klein 13, sehr klein 12/16, Kennzahl 22/30 600. + - Gewicht 800 entfällt. Großbuchstaben mit Sperrung gibt es nur noch für die Wochentage im Planboard. + - Zahlen und Beträge nutzen `tabular-nums`. +7. **Breakpoints der WOMS-Seiten: 1100 px und 860 px.** + - Unter 1100 px werden Nebenspalten ausgeblendet (`.hide-md`). + - Unter 860 px: + - Das Menü wird zur Schublade mit Menü-Knopf. + - Seitenköpfe stapeln sich. + - Tabellen zeigen nur Kernspalten (`.hide-sm`). + - Dialoge erscheinen als Bottom-Sheet. + - Der Chat wechselt zwischen Liste und Verlauf (heute 720 px). + - Ausgenommen: + - die Container-Queries der Finanztabellen (560/640/860) + - die Breakpoints des fremden Chat-Composers (640/880) +8. **Lesbarkeit.** + - Text `#1a1f36`, Nebentext `#5e6678` (5,8:1). + - Tertiärtext `#8a93a3` (3,1:1) nur für Nicht-Essenzielles, nämlich Nummern, „–“ und leere Zustände. Inhalte und Status nutzen ihn nie. + - Fehlerrot `#c0123c`. + - Fokus ist immer sichtbar: + - Knöpfe und Links: 2 px durchgezogen `#111111` mit 2 px Abstand. + - Felder: 1 px `#111111` plus Ring `rgba(17,17,17,.14)`. + - Deaktiviert: Deckkraft .55, Cursor `not-allowed`. Schreibgeschützte Felder bekommen den Hintergrund `#f8f9fb`. + +## Design-Tokens + +Die Tokens stehen in `:root` in `src/styles/global.css`. Quelle ist der Prototyp mit festem Akzent, ohne `html[data-accent]` und ohne Prototyp-Leiste. + +```css +:root { + --bg: #ffffff; --bg-hover: #f6f8fa; --bg-subtle: #f8f9fb; + --text: #1a1f36; --text-2: #5e6678; --text-3: #8a93a3; + --line: #ebeef1; --line-strong: #d8dde3; + --accent: #111111; --accent-hover: #2b2b2b; --accent-ink: #111111; + --accent-soft: rgba(17,17,17,.06); --accent-ring: rgba(17,17,17,.14); + --grey-bg: #ebeef1; --grey-fg: #414552; --blue-bg: #e0f2fe; --blue-fg: #075985; + --orange-bg: #fcedb9; --orange-fg: #a82c00; --violet-bg: #efeafe; --violet-fg: #5b21b6; + --green-bg: #d7f7c2; --green-fg: #006908; --red-bg: #ffe7f2; --red-fg: #b3093c; + --danger: #c0123c; --danger-ring: rgba(192,18,60,.18); + --radius: 6px; --radius-lg: 12px; + --ring: 0 0 0 1px rgba(60,66,87,.16), 0 1px 1px rgba(0,0,0,.06); + --shadow-btn: 0 1px 1px rgba(0,0,0,.12), 0 2px 5px rgba(60,66,87,.08); + --shadow-pop: 0 0 0 1px rgba(60,66,87,.06), 0 12px 32px rgba(26,31,54,.14), 0 2px 6px rgba(26,31,54,.06); + --overlay: rgba(26,31,54,.32); --scrim: rgba(26,31,54,.24); + --nav-dot: #e5a000; + --appt-akquise: #fdf4e3; --appt-akquise-hover: #fbeccd; --appt-hover: #eef1f4; + --sidebar-w: 232px; + --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} +html { color-scheme: light; } +``` + +**Alte Token-Namen bleiben bis P10 als Aliase.** Fremd-CSS und JSX benutzen sie noch, so wird Bestandscode sofort weiß. + +| Alter Name | Neuer Wert | +|---|---| +| `--surface-1`, `--surface-3`, `--surface`, `--dark-bg`, `--dark-card-bg` | `--bg` | +| `--surface-2`, `--surface-hover` | `--bg-hover` | +| `--border`, `--gray-700`, `--admin-line` | `--line` | +| `--border-strong`, `--admin-line-strong` | `--line-strong` | +| `--border-accent` | `--accent-ring` | +| `--text-muted`, `--text-faint`, `--gray-800` | `--text-2` (Altcode setzt `--text-faint` auch für Inhalte ein) | +| `--dark-text`, `--gray-900` | `--text` | +| `--accent-2`, `--green-secondary` | `--accent-hover` | +| `--green-primary` | `--accent` | +| `--info` | `--blue-fg` | +| `--warn` | `--orange-fg` | +| `--ok` | `--green-fg` | +| `--r-sm` | `--radius` | +| `--r-md`, `--r-lg` | `--radius-lg` | +| `--r-pill` | 4px | +| `--shadow-1` | `none` | +| `--shadow-2` | `--shadow-btn` | +| `--shadow-3` | `--shadow-pop` | +| `--sp-1…6` | bleiben unverändert | +| `--sidebar-w-collapsed` | entfällt | + +**Diagrammfarben.** Canvas kann kein `var()` lesen. Deshalb stehen die Farben der Diagramme (uPlot) als Konstanten in der neuen Datei `src/components/serverpuls/chartColors.js`. Sie wird schon in P1 angelegt und von `Chart.jsx` und `ServerpulsPage` genutzt. + +| Element | Farbe | +|---|---| +| Linie | `#111111` | +| Füllung | `rgba(17,17,17,.06)` | +| Spitze | `#8a93a3`, gestrichelt | +| Achsen | `#5e6678` | +| Raster | `#ebeef1`, nur horizontal | +| Ticks | `#d8dde3` | + +## Bausteine + +Die Klassennamen folgen dem Prototyp (`styles.css`). Wo eine Komponente existiert, behält sie ihre Schnittstelle, außer wo unten anders vermerkt. Es ändern sich Markup und Klassen. + +| Baustein | Umsetzung | +|---|---| +| **App-Gerüst** | `.shell` mit Menü `