diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html index b979055..7b48f53 100644 --- a/docs/styleguide/components/interactive-elements.html +++ b/docs/styleguide/components/interactive-elements.html @@ -29,6 +29,17 @@ + +
+

Component: Call-to-action-Button

+ +
+ +
+
+

Component: Prozessbutton

diff --git a/docs/styleguide/components/public-page-components.html b/docs/styleguide/components/public-page-components.html new file mode 100644 index 0000000..6750862 --- /dev/null +++ b/docs/styleguide/components/public-page-components.html @@ -0,0 +1,54 @@ + + + + + + Styleguide – Public Page Components + + + + +

Components – Public Page Components

+ +
+

Component: Content Group Box

+ +
+
+
+
+ +
+

Component: Public Page Content left

+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu +

+
+
+
+ +
+

Component: Call to action Card

+ +
+
+
+

+ Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

+ +
+ +
+
+
+
+
+ + + diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index b43f71b..ec863ee 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -157,6 +157,7 @@ object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). content-card-margin-top-desktop100pxOberer Außenabstand der Content Card auf Desktop. content-card-margin-top-mobile1remOberer Außenabstand der Content Card auf Mobile; entspricht spacing-large. + public-content-width60vwStandardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite. object-group-card-min-width450pxMindestbreite der Group Card im Pattern Object Group Card. object-group-card-max-width650pxMaximale Breite der Group Card im Pattern Object Group Card. object-group-card-height700pxFixe Desktop-Höhe der Group Card im Pattern Object Group Card. diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index 176a8d0..3ff99b3 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -32,6 +32,7 @@
  • Charts
  • Data Display
  • Typography
    • +
  • Public Page Components
    • @@ -53,6 +54,7 @@
  • Multiselektions-Pulldown
  • Text Layouts
  • Overlay Card
    • +
  • Public Page Patterns
    • diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html new file mode 100644 index 0000000..92908e1 --- /dev/null +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -0,0 +1,80 @@ + + + + + + Styleguide – Public Page Patterns + + + + +

    Patterns – Public Page Patterns

    + +
    +

    pattern: Public Page Content left

    + +
    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa. +

    +
    +
    +
    + +

    pattern: Public Page Content right

    + +
    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa. +

    +
    +
    +
    + +

    pattern: CTA box left

    + +
    +
    +
    +
    +

    + Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

    + +
    + +
    +
    +
    +
    +
    + +

    pattern: CTA box right

    + +
    +
    +
    +
    +

    + Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

    + +
    + +
    +
    +
    +
    +
    +
    + + + diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index b7b5ff5..a2a6a53 100644 --- a/docs/styleguide/semantic-tokens-components.html +++ b/docs/styleguide/semantic-tokens-components.html @@ -84,6 +84,43 @@ +
    +

    Public Page Components

    + +

    Content Group Box

    + + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
    surface-content-group-boxcolor-transparentTransparente Fläche der Wrapper-Component.
    border-content-group-boxcolor-whiteTemporärer Prüfrahmen für die visuelle Kontrolle der Component-Erstellung.
    layout-content-group-box-gapspacing-largeVertikaler Abstand zwischen den direkten Abschnitts-Containern innerhalb der Wrapper-Component.
    layout-content-group-box-margin-blockcalc(var(--spacing-large) * 0.5)Oberer und unterer Außenabstand der Wrapper-Component.
    + +

    Public Page Content left

    + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
    surface-text-blockcolor-transparentTransparente Fläche des Textblocks.
    text-text-blockcolor-font-lightStandard-Textfarbe des Textblocks.
    layout-text-block-widthdimension-public-content-widthBreite des Textblocks im Viewport.
    + +

    Call to action Card

    + + + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
    surface-call-to-action-cardsurface-card-groupFläche der Call-to-action-Card als dunkle Content-Card-Variante.
    text-call-to-action-cardcolor-font-lightTextfarbe in der Call-to-action-Card.
    layout-call-to-action-card-widthdimension-public-content-widthBreite der Card im Page-Layout.
    layout-call-to-action-card-content-columnsminmax(0, 1fr) max-contentZweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.
    layout-call-to-action-card-content-gapspacing-largeAbstand zwischen Text und Button.
    +
    +

    Interactive Elements

    @@ -99,6 +136,16 @@ +

    Call-to-action-Button

    + + + + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
    surface-button-ctacolor-darkblueFläche des Call-to-action-Buttons.
    text-button-ctacolor-font-lightTextfarbe des Call-to-action-Buttons.
    layout-button-cta-paddingspacing-largeInnenabstand des Call-to-action-Buttons auf allen Seiten.
    +

    Tabs

    diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index b4d466c..0c32620 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -13,6 +13,14 @@

    Patterns

    +

    Public Page Patterns

    +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
    surface-tab-selectedcolor-dark-greyFläche des ausgewählten Tabs.
    + + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    layout-public-page-pattern-content-widthdimension-public-content-widthGemeinsame Breite für Inhalte im Public-Page-Pattern-Kontext.
    +

    Portal Header

    diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 7299c9a..8948424 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -24,3 +24,5 @@ @import "./styles/41-components-charts.css"; @import "./styles/42-components-data-display.css"; @import "./styles/43-components-typography.css"; +@import "./styles/44-components-public-page-components.css"; +@import "./styles/45-patterns-public-page-patterns.css"; diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 868669e..c4c3209 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -284,6 +284,7 @@ --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; --dimension-search-field-width: 15.3rem; + --dimension-public-content-width: 60vw; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; --dimension-options-row-mode-toggle-width: 7rem; diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css index 4c2648a..33de0c3 100644 --- a/docs/styleguide/styles/10-components-interactive-elements.css +++ b/docs/styleguide/styles/10-components-interactive-elements.css @@ -142,6 +142,16 @@ color: var(--text-button-process); } + .sg-button--cta { + --surface-button-cta: var(--color-darkblue); + --text-button-cta: var(--color-font-light); + height: auto; + min-height: var(--interaction-height); + background: var(--surface-button-cta); + color: var(--text-button-cta); + padding: var(--spacing-large); + } + .sg-button--process-inactive { background: var(--surface-button-process-inactive); color: var(--text-button-process); diff --git a/docs/styleguide/styles/44-components-public-page-components.css b/docs/styleguide/styles/44-components-public-page-components.css new file mode 100644 index 0000000..a4ff2bc --- /dev/null +++ b/docs/styleguide/styles/44-components-public-page-components.css @@ -0,0 +1,81 @@ +/* ========================================================= */ +/* Components: Public Page Components */ +/* ========================================================= */ + +.sg-content-group-box { + --surface-content-group-box: var(--color-transparent); + --border-content-group-box: var(--color-white); + --layout-content-group-box-gap: var(--spacing-large); + --layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5); + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + margin: var(--layout-content-group-box-margin-block) 0; + border: 1px solid var(--border-content-group-box); + background: var(--surface-content-group-box); + gap: var(--layout-content-group-box-gap); +} + +.sg-content-group-box > * { + margin: 0; +} + +.sg-text-block { + --surface-text-block: var(--color-transparent); + --text-text-block: var(--color-font-light); + --layout-text-block-width: var(--dimension-public-content-width); + width: var(--layout-text-block-width); + box-sizing: border-box; + background: var(--surface-text-block); + color: var(--text-text-block); +} + +.sg-text-block .sg-body { + margin: 0; + color: var(--text-text-block); +} + +.sg-card--call-to-action-card { + --surface-call-to-action-card: var(--surface-card-group); + --text-call-to-action-card: var(--color-font-light); + --layout-call-to-action-card-width: var(--dimension-public-content-width); + --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content; + --layout-call-to-action-card-content-gap: var(--spacing-large); + width: var(--layout-call-to-action-card-width); + max-width: 100%; +} + +.sg-card--call-to-action-card .sg-card-segment--body { + display: grid; + grid-template-columns: var(--layout-call-to-action-card-content-columns); + gap: var(--layout-call-to-action-card-content-gap); + align-items: center; + background: var(--surface-call-to-action-card); + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__text { + margin: 0; + min-width: 0; + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__action { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.sg-page-public-page-components .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +@media (max-width: 48rem) { + .sg-text-block, + .sg-card--call-to-action-card { + width: 100%; + } +} diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css new file mode 100644 index 0000000..4030e8c --- /dev/null +++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css @@ -0,0 +1,17 @@ +/* ========================================================= */ +/* Patterns: Public Page Patterns */ +/* ========================================================= */ + +.sg-page-public-page-patterns .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +.sg-page-public-page-patterns .sg-text-block--align-right { + margin-left: auto; +} + +.sg-page-public-page-patterns .sg-call-to-action-card--align-right { + margin-left: auto; +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 92900b3..f07dc74 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -284,6 +284,7 @@ --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; --dimension-search-field-width: 15.3rem; + --dimension-public-content-width: 60vw; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; --dimension-options-row-mode-toggle-width: 7rem; @@ -632,6 +633,16 @@ section + section { color: var(--text-button-process); } + .sg-button--cta { + --surface-button-cta: var(--color-darkblue); + --text-button-cta: var(--color-font-light); + height: auto; + min-height: var(--interaction-height); + background: var(--surface-button-cta); + color: var(--text-button-cta); + padding: var(--spacing-large); + } + .sg-button--process-inactive { background: var(--surface-button-process-inactive); color: var(--text-button-process); @@ -4497,3 +4508,103 @@ main { margin-top: 0; } +/* ========================================================= */ +/* Components: Public Page Components */ +/* ========================================================= */ + +.sg-content-group-box { + --surface-content-group-box: var(--color-transparent); + --border-content-group-box: var(--color-white); + --layout-content-group-box-gap: var(--spacing-large); + --layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5); + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + margin: var(--layout-content-group-box-margin-block) 0; + border: 1px solid var(--border-content-group-box); + background: var(--surface-content-group-box); + gap: var(--layout-content-group-box-gap); +} + +.sg-content-group-box > * { + margin: 0; +} + +.sg-text-block { + --surface-text-block: var(--color-transparent); + --text-text-block: var(--color-font-light); + --layout-text-block-width: var(--dimension-public-content-width); + width: var(--layout-text-block-width); + box-sizing: border-box; + background: var(--surface-text-block); + color: var(--text-text-block); +} + +.sg-text-block .sg-body { + margin: 0; + color: var(--text-text-block); +} + +.sg-card--call-to-action-card { + --surface-call-to-action-card: var(--surface-card-group); + --text-call-to-action-card: var(--color-font-light); + --layout-call-to-action-card-width: var(--dimension-public-content-width); + --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content; + --layout-call-to-action-card-content-gap: var(--spacing-large); + width: var(--layout-call-to-action-card-width); + max-width: 100%; +} + +.sg-card--call-to-action-card .sg-card-segment--body { + display: grid; + grid-template-columns: var(--layout-call-to-action-card-content-columns); + gap: var(--layout-call-to-action-card-content-gap); + align-items: center; + background: var(--surface-call-to-action-card); + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__text { + margin: 0; + min-width: 0; + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__action { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.sg-page-public-page-components .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +@media (max-width: 48rem) { + .sg-text-block, + .sg-card--call-to-action-card { + width: 100%; + } +} + +/* ========================================================= */ +/* Patterns: Public Page Patterns */ +/* ========================================================= */ + +.sg-page-public-page-patterns .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +.sg-page-public-page-patterns .sg-text-block--align-right { + margin-left: auto; +} + +.sg-page-public-page-patterns .sg-call-to-action-card--align-right { + margin-left: auto; +} + diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 1bbc19b..bc05570 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": "f722aa4", - "syncedAtUtc": "2026-06-23T08:44:42Z", + "styleguideCommit": "547fe0c", + "syncedAtUtc": "2026-06-24T08:09:17Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 92900b3..f07dc74 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -284,6 +284,7 @@ --dimension-input-field-desktop-width: 400px; --dimension-input-field-max-width: 600px; --dimension-search-field-width: 15.3rem; + --dimension-public-content-width: 60vw; --dimension-layer-pulldown-panel: 40; --dimension-multiselect-pulldown-panel-desktop-width: 500px; --dimension-options-row-mode-toggle-width: 7rem; @@ -632,6 +633,16 @@ section + section { color: var(--text-button-process); } + .sg-button--cta { + --surface-button-cta: var(--color-darkblue); + --text-button-cta: var(--color-font-light); + height: auto; + min-height: var(--interaction-height); + background: var(--surface-button-cta); + color: var(--text-button-cta); + padding: var(--spacing-large); + } + .sg-button--process-inactive { background: var(--surface-button-process-inactive); color: var(--text-button-process); @@ -4497,3 +4508,103 @@ main { margin-top: 0; } +/* ========================================================= */ +/* Components: Public Page Components */ +/* ========================================================= */ + +.sg-content-group-box { + --surface-content-group-box: var(--color-transparent); + --border-content-group-box: var(--color-white); + --layout-content-group-box-gap: var(--spacing-large); + --layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5); + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; + margin: var(--layout-content-group-box-margin-block) 0; + border: 1px solid var(--border-content-group-box); + background: var(--surface-content-group-box); + gap: var(--layout-content-group-box-gap); +} + +.sg-content-group-box > * { + margin: 0; +} + +.sg-text-block { + --surface-text-block: var(--color-transparent); + --text-text-block: var(--color-font-light); + --layout-text-block-width: var(--dimension-public-content-width); + width: var(--layout-text-block-width); + box-sizing: border-box; + background: var(--surface-text-block); + color: var(--text-text-block); +} + +.sg-text-block .sg-body { + margin: 0; + color: var(--text-text-block); +} + +.sg-card--call-to-action-card { + --surface-call-to-action-card: var(--surface-card-group); + --text-call-to-action-card: var(--color-font-light); + --layout-call-to-action-card-width: var(--dimension-public-content-width); + --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content; + --layout-call-to-action-card-content-gap: var(--spacing-large); + width: var(--layout-call-to-action-card-width); + max-width: 100%; +} + +.sg-card--call-to-action-card .sg-card-segment--body { + display: grid; + grid-template-columns: var(--layout-call-to-action-card-content-columns); + gap: var(--layout-call-to-action-card-content-gap); + align-items: center; + background: var(--surface-call-to-action-card); + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__text { + margin: 0; + min-width: 0; + color: var(--text-call-to-action-card); +} + +.sg-call-to-action-card__action { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.sg-page-public-page-components .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +@media (max-width: 48rem) { + .sg-text-block, + .sg-card--call-to-action-card { + width: 100%; + } +} + +/* ========================================================= */ +/* Patterns: Public Page Patterns */ +/* ========================================================= */ + +.sg-page-public-page-patterns .sg-preview-area { + display: flex; + flex-direction: column; + width: 100%; +} + +.sg-page-public-page-patterns .sg-text-block--align-right { + margin-left: auto; +} + +.sg-page-public-page-patterns .sg-call-to-action-card--align-right { + margin-left: auto; +} +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    surface-portal-headercolor-darkblueHeader-Grundfläche.