diff --git a/docs/styleguide-integration-strategy.md b/docs/styleguide-integration-strategy.md new file mode 100644 index 0000000..4aeb4b0 --- /dev/null +++ b/docs/styleguide-integration-strategy.md @@ -0,0 +1,136 @@ +# Integrationsstrategie Styleguide -> WebApp_Aktienberater + +Stand: 18. Mai 2026 +Scope: Nur Einbindungsstrategie und Migrationsvorgehen fuer CSS. Keine Frontend-Umbauten in diesem Dokument. + +## 1. Zielbild + +`public/assets/styles.css` bleibt die produktiv eingebundene Datei, wird aber kuenftig deterministisch aus zwei klar getrennten Schichten erzeugt: + +1. `styleguide` (upstream, read-only im Projektkontext) +2. `portal` (lokale App-spezifische Regeln) + +Es gibt keine weitere manuelle Vollkopie von CSS-Bloecken in die Produktionsdatei. + +## 2. Aktueller Ist-Zustand (belegt) + +- Produktivseiten binden `public/assets/styles.css` ein. +- Es gibt keine lokale Styleguide-Kopie mehr im Zielrepo. +- `public/assets/styles.css` enthaelt derzeit einen Mischstand aus Styleguide-Teil plus Legacy-Teil. + +Konsequenz: Updates und Debugging sind aktuell fehleranfaellig, weil keine harte Trennung zwischen upstream und lokal besteht. + +## 3. Verbindliche Struktur (Soll) + +Neue Quellstruktur im Zielrepo: + +- `public/assets/styleguide.upstream.css` + Upstream-Quelle (aus dem Styleguide-Repo uebernommen, im Zielrepo read-only behandeln) +- `public/assets/styles.portal.css` + Lokale Portal-Ergaenzungen/Overrides (einzige lokale CSS-Quelle fuer App-spezifische Abweichungen) +- `public/assets/styles.css` + Build-Output fuer Produktivbetrieb (generiert, nicht manuell gepflegt) + +## 4. Build-Reihenfolge (verbindlich) + +Die Reihenfolge ist fix: + +1. `public/assets/styleguide.upstream.css` +2. `public/assets/styles.portal.css` +3. Ausgabe nach `public/assets/styles.css` + +Damit gilt: + +- Standard liegt im Styleguide. +- Lokale Abweichungen liegen nur im Portal-Layer. +- Keine dritte Ebene mit ad-hoc CSS in Produktivdateien. + +## 5. Migrationsphasen + +### Phase A: Freeze und Trennung + +- Bestehenden Zustand einfrieren (Baseline-Commit). +- Legacy-Abschnitte in `public/assets/styles.css` identifizieren. +- Lokale, weiterhin benoetigte Regeln nach `public/assets/styles.portal.css` verschieben. + +### Phase B: Build-Einfuehrung + +- Build-Skript einfuehren, das die zwei Quellen in fixer Reihenfolge zusammenfuehrt. +- `public/assets/styles.css` nur noch als Build-Output behandeln. + +### Phase C: Bereinigung + +- Doppelte `:root`-Definitionen und ueberschneidende Token schrittweise entfernen. +- Jede entfernte Legacy-Regel gegen produktive Screens verifizieren. + +### Phase D: Regelbetrieb + +- Neue UI-Änderungen nur noch in: + - Styleguide-Repo (globale Patterns/Tokens) oder + - `styles.portal.css` (projektlokale Spezifika) + +## 5a. Verbindliche Migrationsreihenfolge + +Die Ablösung erfolgt in fester Reihenfolge: + +1. Login +2. Hauptliste +3. Detail +4. Admin + +Pro Schritt gilt: + +- Legacy-Regeln nur fuer den jeweiligen Bereich ablösen. +- Smoke-Test direkt nach jeder Ablösung. +- Erst nach bestandenem Test den naechsten Bereich migrieren. + +## 5b. Verbindliche Exit-Kriterien (Legacy entfernt) + +Die Migration ist erst abgeschlossen, wenn alle Punkte erfuellt sind: + +1. `public/assets/styles.css` ist reiner Build-Output aus: + - `public/assets/styleguide.upstream.css` + - `public/assets/styles.portal.css` +2. In `public/assets/styles.css` existiert kein Legacy-Blockmarker mehr: + - `LEGACY STYLES` + - `To be migrated step by step to styleguide system` +3. Keine manuellen Produktivregeln mehr direkt in `public/assets/styles.css`. +4. Alle weiterhin benoetigten lokalen Abweichungen liegen ausschliesslich in `public/assets/styles.portal.css`. +5. Doppelte oder konkurrierende `:root`-Definitionen aus Legacy wurden entfernt. + +## 6. Update-Prozess bei Styleguide-Änderungen + +Ja, es braucht regulaere Updates im Zielrepo, sobald der Styleguide geaendert wurde. + +Minimalprozess: + +1. Neuen Styleguide-Stand nach `public/assets/styleguide.upstream.css` uebernehmen. +2. `public/assets/styles.css` neu bauen. +3. Kurztest der betroffenen Seiten (mindestens: Login, Hauptliste, Detail, Admin). +4. Falls Konflikte auftreten: nur `styles.portal.css` anpassen, nicht upstream patchen. + +## 7. Guardrails + +- Keine manuellen Hotfixes direkt in `public/assets/styles.css`. +- Keine Vermischung von Upstream-Regeln und Portalregeln in derselben Quelldatei. +- Keine erneute Vollkopie alter Legacy-Bloecke. +- Jede Portal-Abweichung braucht kurze Begruendung im Commit. + +## 7a. Verbindliche Abnahme-Checkliste je Migrationsschritt + +Vor dem Abschluss eines jeden Schritts: + +1. Seite rendert ohne visuelle Regressionen in den betroffenen Hauptbereichen. +2. Interaktive Elemente bleiben funktionsfaehig (Buttons, Tabs, Filter, States). +3. Keine neuen direkten Anpassungen in `public/assets/styles.css`. +4. Diff zeigt nur: + - Upstream-Update (`styleguide.upstream.css`) und/oder + - lokale Portal-Regeln (`styles.portal.css`) und Build-Output. +5. Commit-Text dokumentiert kurz, welcher Legacy-Abschnitt abgeloest wurde. + +## 8. Verantwortungsgrenze + +- Styleguide-Repo: Design-System-Wahrheit (Tokens, Components, Patterns). +- WebApp_Aktienberater: Integration, lokale Komposition, produktive Einbindung. + +Damit bleibt das System updatefaehig und driftarm, ohne laufende Frontend-Umsetzung zu blockieren. diff --git a/foundations.html b/foundations.html index 88563fc..c266122 100644 --- a/foundations.html +++ b/foundations.html @@ -137,6 +137,8 @@ input-label-width9remDesktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern. input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). + object-group-card-min-width550pxMindestbreite der Group Card im Pattern Object Group Card. + object-group-card-max-width700pxMaximale Breite der Group Card im Pattern Object Group Card. search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. layer-pulldown-panel40Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. multiselect-pulldown-panel-desktop-width500pxDesktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern. diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 7d541b1..a423901 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -51,8 +51,8 @@ - - + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
layout-object-group-card-min-widthdimension-object-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card.
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card.
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 88eb5b7..99c24d5 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -49,8 +49,8 @@

Object Group Card

- - + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-object-group-card-min-widthdimension-object-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-card-max-widthMaximalbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.
layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der einzelnen Karten im Pattern Object Group Card.

Company Card

diff --git a/styleguide.css b/styleguide.css index 6609c5d..ff6249b 100644 --- a/styleguide.css +++ b/styleguide.css @@ -164,8 +164,8 @@ --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width); --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height); --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint); - --layout-object-group-card-min-width: var(--dimension-object-card-min-width); - --layout-object-group-card-max-width: var(--dimension-object-card-max-width); + --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); + --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); --surface-object-card-lower-segment: var(--color-white); --text-company-card-data-negative: var(--chart-value-negative); --text-company-card-moat-neutral: var(--chart-value-neutral); @@ -228,6 +228,8 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; + --dimension-object-group-card-min-width: 550px; + --dimension-object-group-card-max-width: 700px; --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px;