diff --git a/docs/styleguide/components/email-footer.html b/docs/styleguide/components/email-footer.html deleted file mode 100644 index 4d9c10d..0000000 --- a/docs/styleguide/components/email-footer.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Styleguide – Komponente E-Mail Footer - - - - -

Komponente – E-Mail Footer

- - - - - diff --git a/docs/styleguide/components/email-header.html b/docs/styleguide/components/email-header.html deleted file mode 100644 index 95e9456..0000000 --- a/docs/styleguide/components/email-header.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - Styleguide – Komponente E-Mail Header - - - - - -

Komponente – E-Mail Header

- -
-

Komponente: E-Mail Header

- -
-
-
-
-
-

ValueStockFinder

-
-
-
-
-
-
- - - diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index d0aedac..daad5d9 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -39,7 +39,7 @@ font-light#FFFFFFSchrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons. font-hyperlink#FF6900Links in Texten, Prozessbuttons und Page-Navigations-Cards. process-inactive#FFAE79Inaktive Hintergrundfläche des Prozessbuttons. - background-purple#373C4AGlobaler Portal- und E-Mail-Hintergrund. + background-purple#373C4AGlobaler Portalhintergrund. background-purple-light#656C7DGroup Cards und gruppierende Card-Flächen. transparenttransparentTransparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche. @@ -157,7 +157,6 @@ input-label-width9remDesktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie 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). - email-body-max-width600pxMaximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports. object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). scrollable-card-width600pxStandardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. scrollable-card-height600pxStandardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index c28b7b3..cecf2f3 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -48,6 +48,7 @@
  • Navigation Card
  • Left Navigation
  • Notifications
    • +
  • History Graph
  • Content Cards Group
  • Card Gruppe mit Tastennavigation
  • Formular mit Abschnitten
    • diff --git a/docs/styleguide/patterns/history-graph.html b/docs/styleguide/patterns/history-graph.html new file mode 100644 index 0000000..f4497c5 --- /dev/null +++ b/docs/styleguide/patterns/history-graph.html @@ -0,0 +1,120 @@ + + + + + + Styleguide – Pattern History Graph + + + + +

    Pattern – History Graph

    + +
    +

    Pattern: History Graph

    + +
    +
      +
    1. +
      +
      +

      Aktuellstes Ereignis mit einem einzelnen farbigen Segment.

      +
      +
      +
      2. + +
    2. +
      +
      +

      Ereignis mit mehreren unabhängig gefärbten Segmenten.

      +
      +
      +

      Der Inhalt, zum Beispiel Datum und Beschreibung, wird individuell durch das konsumierende Portal definiert.

      +
      +
      +
      3. + +
    3. +
      +
      +

      Ältestes dargestelltes Ereignis.

      +
      +
      +
      4. + +
    4. +
      +
      +

      Viertes Ereignis.

      +
      +
      +
      5. + +
    5. +
      +
      +

      Fünftes Ereignis.

      +
      +
      +
      6. + +
    6. +
      +
      +

      Sechstes Ereignis.

      +
      +
      +
      7. + +
    7. +
      +
      +

      Siebtes Ereignis.

      +
      +
      +
      8. + +
    8. +
      +
      +

      Achtes Ereignis.

      +
      +
      +
      9. + +
    9. +
      +
      +

      Neuntes Ereignis.

      +
      +
      +
      10. + +
    10. +
      +
      +

      Zehntes Ereignis.

      +
      +
      +
      11. +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    + + + diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 376890b..3e5a201 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -3,6 +3,7 @@ @import "./styles/03-typography-helpers.css"; @import "./styles/10-components-interactive-elements.css"; @import "./styles/47-patterns-file-upload.css"; +@import "./styles/48-patterns-history-graph.css"; @import "./styles/20-patterns-portal-header.css"; @import "./styles/21-patterns-options-row.css"; @import "./styles/22-patterns-object-card.css"; diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 6745722..cd79b50 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -145,7 +145,6 @@ --layout-preview-align-items: flex-start; /* Semantic pattern tokens: Portal header */ - --surface-portal-background: var(--color-background-purple); --surface-portal-header: var(--color-darkblue); --surface-portal-header-tab: var(--color-midblue); --surface-portal-header-tab-active: var(--color-light-grey); @@ -311,7 +310,6 @@ --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; - --dimension-email-body-max-width: 600px; --dimension-search-field-width: 15.3rem; --dimension-public-content-width: 100%; --dimension-layer-pulldown-panel: 40; diff --git a/docs/styleguide/styles/02-base.css b/docs/styleguide/styles/02-base.css index 4bec540..de3bd9d 100644 --- a/docs/styleguide/styles/02-base.css +++ b/docs/styleguide/styles/02-base.css @@ -8,7 +8,7 @@ body { font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-font-dark); - background: var(--surface-portal-background); + background: var(--color-background-purple); margin: 0; padding: var(--spacing-small); } diff --git a/docs/styleguide/styles/48-patterns-history-graph.css b/docs/styleguide/styles/48-patterns-history-graph.css new file mode 100644 index 0000000..bed4ff0 --- /dev/null +++ b/docs/styleguide/styles/48-patterns-history-graph.css @@ -0,0 +1,45 @@ +/* ========================================================= */ +/* Pattern: History Graph */ +/* ========================================================= */ + +.sg-history-graph { + --layout-history-graph-connector-width: var(--score-marker-width); + --surface-history-graph-connector: var(--chart-marker-line); + width: 100%; +} + +.sg-history-graph__events { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.sg-history-graph__event { + position: relative; + width: 100%; +} + +.sg-history-graph__event:not(:last-child)::after { + position: absolute; + top: 100%; + left: 50%; + width: var(--layout-history-graph-connector-width); + height: var(--spacing-large); + background: var(--surface-history-graph-connector); + content: ""; + transform: translateX(-50%); +} + +.sg-history-graph__card { + width: 100%; + max-width: var(--layout-object-card-min-width); + margin-inline: auto; +} + +.sg-history-graph__navigation { + width: 100%; +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 17e1ff4..4eac539 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -145,7 +145,6 @@ --layout-preview-align-items: flex-start; /* Semantic pattern tokens: Portal header */ - --surface-portal-background: var(--color-background-purple); --surface-portal-header: var(--color-darkblue); --surface-portal-header-tab: var(--color-midblue); --surface-portal-header-tab-active: var(--color-light-grey); @@ -311,7 +310,6 @@ --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; - --dimension-email-body-max-width: 600px; --dimension-search-field-width: 15.3rem; --dimension-public-content-width: 100%; --dimension-layer-pulldown-panel: 40; @@ -359,7 +357,7 @@ body { font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-font-dark); - background: var(--surface-portal-background); + background: var(--color-background-purple); margin: 0; padding: var(--spacing-small); } @@ -2381,6 +2379,52 @@ section + section { } } +/* ========================================================= */ +/* Pattern: History Graph */ +/* ========================================================= */ + +.sg-history-graph { + --layout-history-graph-connector-width: var(--score-marker-width); + --surface-history-graph-connector: var(--chart-marker-line); + width: 100%; +} + +.sg-history-graph__events { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.sg-history-graph__event { + position: relative; + width: 100%; +} + +.sg-history-graph__event:not(:last-child)::after { + position: absolute; + top: 100%; + left: 50%; + width: var(--layout-history-graph-connector-width); + height: var(--spacing-large); + background: var(--surface-history-graph-connector); + content: ""; + transform: translateX(-50%); +} + +.sg-history-graph__card { + width: 100%; + max-width: var(--layout-object-card-min-width); + margin-inline: auto; +} + +.sg-history-graph__navigation { + width: 100%; +} + /* ========================================================= */ /* Patterns: Portal Header */ /* ========================================================= */ diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 546d21d..6f5f9bb 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "8824dc6", - "syncedAtUtc": "2026-09-21T15:27:45Z", + "styleguideCommit": "4e4474e", + "syncedAtUtc": "2026-09-22T07:55:02Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 17e1ff4..4eac539 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -145,7 +145,6 @@ --layout-preview-align-items: flex-start; /* Semantic pattern tokens: Portal header */ - --surface-portal-background: var(--color-background-purple); --surface-portal-header: var(--color-darkblue); --surface-portal-header-tab: var(--color-midblue); --surface-portal-header-tab-active: var(--color-light-grey); @@ -311,7 +310,6 @@ --dimension-input-label-width: 9rem; --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; - --dimension-email-body-max-width: 600px; --dimension-search-field-width: 15.3rem; --dimension-public-content-width: 100%; --dimension-layer-pulldown-panel: 40; @@ -359,7 +357,7 @@ body { font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-font-dark); - background: var(--surface-portal-background); + background: var(--color-background-purple); margin: 0; padding: var(--spacing-small); } @@ -2381,6 +2379,52 @@ section + section { } } +/* ========================================================= */ +/* Pattern: History Graph */ +/* ========================================================= */ + +.sg-history-graph { + --layout-history-graph-connector-width: var(--score-marker-width); + --surface-history-graph-connector: var(--chart-marker-line); + width: 100%; +} + +.sg-history-graph__events { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.sg-history-graph__event { + position: relative; + width: 100%; +} + +.sg-history-graph__event:not(:last-child)::after { + position: absolute; + top: 100%; + left: 50%; + width: var(--layout-history-graph-connector-width); + height: var(--spacing-large); + background: var(--surface-history-graph-connector); + content: ""; + transform: translateX(-50%); +} + +.sg-history-graph__card { + width: 100%; + max-width: var(--layout-object-card-min-width); + margin-inline: auto; +} + +.sg-history-graph__navigation { + width: 100%; +} + /* ========================================================= */ /* Patterns: Portal Header */ /* ========================================================= */