diff --git a/.codex/skills/styleguide-erstellung/SKILL.md b/.codex/skills/styleguide-erstellung/SKILL.md index e758336..7f4251d 100644 --- a/.codex/skills/styleguide-erstellung/SKILL.md +++ b/.codex/skills/styleguide-erstellung/SKILL.md @@ -232,6 +232,7 @@ Vor Abschluss prüfen: - richtige Styleguide-Ebene gewählt - Kaskade Foundations → semantische Tokens → Components → Patterns → Layouts → Templates → Usage Guidelines eingehalten +- Lokale Overrides sind streng verboten!! Nur sauber kaskadierende Tokens!! - keine hardcoded Design Values außerhalb der Foundations - neue oder geänderte semantische Tokens in `styleguide.css` gepflegt - bestehende Struktur von `styleguide.css` eingehalten @@ -245,6 +246,7 @@ Vor Abschluss prüfen: - keine lokalen Token-Blöcke oder `:root`-Definitionen in HTML-Dateien - keine Refactorings außerhalb Scope - keine Insellösungen oder Workarounds eingeführt +- Nach der Bearbeitung konsequent alle Legacy entfernen und nur ein cleanes production-reifes Styleguide als Resultat zulassen ## Ergebnisbericht diff --git a/AGENTS.md b/AGENTS.md index 2434bcb..c5c24e9 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -13,7 +13,7 @@ ## Verbindliche Arbeitsweise -- Der Skill `styleguide erstellung` ist immer zu nutzen. +- Der Skill `styleguide erstellung` ist immer zwingend!!! zu nutzen und vollständig zu befolgen - Lokaler Skill-Pfad: `/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide/.codex/skills/styleguide-erstellung/SKILL.md`. - Repository ist lokal + Gitea-Remote geführt. - Jede umgesetzte Änderung wird direkt mit passender Commit-Message committed und nach `origin/main` gepusht. @@ -30,16 +30,5 @@ - Verantwortung: Styleguide fachlich sauber, kaskadierend, konsistent und langfristig skalierbar führen und erweitern. - Ziel: wiederverwendbare UI-Bausteine, konsistente Portal-Interfaces, wartbare Struktur, keine lokalen Sonderlösungen. -## Verbindliche Token-Policy (Merge vs. Behalten) - -- Semantische Tokens dürfen denselben Foundation-Wert teilen, wenn sie unterschiedliche fachliche Bedeutung, UI-Kontexte oder Zustandssemantik ausdrücken. -- Semantische Tokens mit identischem Wert sind zu mergen, wenn Zweck, UI-Kontext und fachlicher Name identisch sind. -- Reine Namensduplikate ohne zusätzliche Semantik sind unzulässig. -- Alias-Ketten auf maximal eine sinnvolle Fach-Abstraktion begrenzen; unnötige Alias-of-Alias-Ketten reduzieren. -- Pattern-spezifische Tokens nur bei eigener fachlicher Pattern-Verantwortung; sonst bestehende Component-/Layout-Tokens verwenden. -- Sehr spezifische Einzelwerte (z. B. feste `rem`/`%` für Einzelfälle) nur als begründete Ausnahme; sonst bestehende Foundation-/Dimension-Tokens verwenden oder erweitern. -- Vor jeder Token-Bereinigung klassifizieren: - - `mergebar`: semantisch gleich, zusammenführbar - - `behalten`: semantisch verschieden trotz gleichem Wert - - `prüfen`: Unsicherheit, fachliche Klärung nötig -- Breaking Token-Renames sind ohne explizite Freigabe verboten; Standard ist rückwärtskompatible Migration (Alias-Übergang oder schrittweise Referenzumstellung). +## Minimalscope +Arbeite IMMER mit minimalem Lesescope: Lies nur die Dateien und Ausschnitte, die für die aktuelle Aufgabe zwingend nötig sind. Vermeide breite Codebase-Scans, unnötige Kontextsuche und grosse Dateiöffnungen, um Tokenverbrauch und Kontextgrösse klein zu halten. Auch kein breites Lesen in db Tabellen, lies Schemas und kleine Stichproben. Stelle gezielte Rückfragen, wenn der benötigte Kontext unklar ist. diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 787ba84..de7446d 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -87,6 +87,13 @@ text-align-text-layout-column-rightrightTextausrichtung der rechten Spalte im Pattern Dreispaltig verteilt. +

VSF List Card

+ + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
text-vsf-list-card-limit-notecolor-signal-redHinweistextfarbe für die Meldung bei erreichter maximaler Listenanzahl.
layout-vsf-list-card-summary-offset-block-startlayout-company-card-analysis-gap-after-moatVertikaler Abstand vor dem Summary-Block in der VSF List Card.
layout-vsf-list-card-delete-confirmation-target-max-widthlayout-object-group-card-max-widthMaximalbreite der Delete-Confirmation-Zielkarte innerhalb der VSF-List-Card-Demo.
+

Multiselektions-Pulldown

diff --git a/styles/01-foundations.css b/styles/01-foundations.css index fe76695..cec8c3c 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -191,6 +191,9 @@ --text-vsf-drawer-object-card-heading: var(--color-font-light); --text-vsf-drawer-object-card-body: var(--color-font-light); --layout-vsf-drawer-object-card-column-gap: var(--spacing-large); + --text-vsf-list-card-limit-note: var(--color-signal-red); + --layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat); + --layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width); --surface-text-layout-preview: var(--color-light-grey); --layout-text-layout-column-gap: var(--spacing-large); --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr)); diff --git a/styles/26-patterns-vsf-list-card.css b/styles/26-patterns-vsf-list-card.css index 269082a..2988ad3 100644 --- a/styles/26-patterns-vsf-list-card.css +++ b/styles/26-patterns-vsf-list-card.css @@ -2,19 +2,15 @@ /* Patterns: VSF List Card */ /* ========================================================= */ -#layout-vsf-list-card .sg-object-card[data-pattern="object-group-card"] { - --text-vsf-list-card-limit-note: var(--color-signal-red); -} - #layout-vsf-list-card .sg-vsf-list-card-limit-note { margin: 0 0 var(--space-16) 0; color: var(--text-vsf-list-card-limit-note); } #layout-vsf-list-card .sg-vsf-list-card__summary { - margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0; + margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0; } #layout-vsf-list-card [data-pattern="overlay-card"] { - --layout-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width); + --layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width); }
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-multiselect-pulldown-label-column-width-fallbackmax-contentFallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.