From 78f74a152a74ec611eb8947ec4b741de1edfda51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 31 Aug 2026 12:57:00 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- .../patterns/public-page-patterns.html | 30 +++++++++++++++++++ docs/styleguide/semantic-tokens-patterns.html | 2 ++ .../45-patterns-public-page-patterns.css | 18 +++++++++-- public/assets/styleguide.upstream.css | 18 +++++++++-- public/assets/styleguide.upstream.meta.json | 4 +-- public/assets/styles.css | 18 +++++++++-- 6 files changed, 79 insertions(+), 11 deletions(-) diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html index ef39cc0..737cb67 100644 --- a/docs/styleguide/patterns/public-page-patterns.html +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -335,6 +335,36 @@ +

pattern: call to action full witdh

+ +
+
+
+
+
Titel
+
+ +
+
Hinweistext als Platzhalter
+
+
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    • +
  • Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.
    • +
  • Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.
    • +
  • Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.
    • +
+
+
+ +
+
+
+
+

pattern: picture full width

diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index 7685d54..1055d13 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -23,6 +23,8 @@ text-public-page-pattern-text-picturecolor-font-lightTextfarbe des Patterns Pattern: text and picture right. layout-public-page-pattern-call-to-action-box-widthcalc(var(--dimension-public-content-width) * 0.5)Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext. surface-public-page-pattern-call-to-action-box-lightcolor-light-greyHintergrundfläche der Variante Pattern: Public Call to Action Box light. + surface-public-page-pattern-call-to-action-full-width-titlesurface-portal-headerHintergrundfläche des blauen Titelsegments im Pattern call to action full witdh. + text-public-page-pattern-call-to-action-full-width-titletext-portal-header-brandWeiße Textfarbe der Titel- und Meldungssegmente im Pattern call to action full witdh. diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css index 6e5e6c3..7d11c26 100644 --- a/docs/styleguide/styles/45-patterns-public-page-patterns.css +++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css @@ -16,17 +16,25 @@ .sg-public-page-pattern-call-to-action-box--light { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light > .sg-card-segment--body { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light .sg-bullet-list { - color: var(--color-font-dark); + color: var(--text-content-block-card-content); +} + +.sg-public-page-pattern-call-to-action-box--full-width { + --surface-public-page-pattern-call-to-action-full-width-title: var(--surface-portal-header); + --text-public-page-pattern-call-to-action-full-width-title: var(--text-portal-header-brand); + --surface-card-header-primary: var(--surface-public-page-pattern-call-to-action-full-width-title); + --text-card-header: var(--text-public-page-pattern-call-to-action-full-width-title); + width: 100%; } .sg-public-page-pattern-call-to-action-box__action { @@ -37,6 +45,10 @@ width: 100%; } +.sg-public-page-pattern-call-to-action-box__action .sg-button--process { + width: 100%; +} + .sg-public-page-pattern-text-and-picture-right { --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr)); --layout-public-page-pattern-text-picture-gap: var(--spacing-large); diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 92b3985..f942bad 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -4862,17 +4862,25 @@ main { .sg-public-page-pattern-call-to-action-box--light { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light > .sg-card-segment--body { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light .sg-bullet-list { - color: var(--color-font-dark); + color: var(--text-content-block-card-content); +} + +.sg-public-page-pattern-call-to-action-box--full-width { + --surface-public-page-pattern-call-to-action-full-width-title: var(--surface-portal-header); + --text-public-page-pattern-call-to-action-full-width-title: var(--text-portal-header-brand); + --surface-card-header-primary: var(--surface-public-page-pattern-call-to-action-full-width-title); + --text-card-header: var(--text-public-page-pattern-call-to-action-full-width-title); + width: 100%; } .sg-public-page-pattern-call-to-action-box__action { @@ -4883,6 +4891,10 @@ main { width: 100%; } +.sg-public-page-pattern-call-to-action-box__action .sg-button--process { + width: 100%; +} + .sg-public-page-pattern-text-and-picture-right { --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr)); --layout-public-page-pattern-text-picture-gap: var(--spacing-large); diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 16fcdd5..42031c7 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": "0ff7125", - "syncedAtUtc": "2026-08-24T09:52:17Z", + "styleguideCommit": "ed1c450", + "syncedAtUtc": "2026-08-31T10:57:00Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 92b3985..f942bad 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -4862,17 +4862,25 @@ main { .sg-public-page-pattern-call-to-action-box--light { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light > .sg-card-segment--body { background: var(--surface-public-page-pattern-call-to-action-box-light); - color: var(--color-font-dark); + color: var(--text-content-block-card-content); } .sg-public-page-pattern-call-to-action-box--light .sg-bullet-list { - color: var(--color-font-dark); + color: var(--text-content-block-card-content); +} + +.sg-public-page-pattern-call-to-action-box--full-width { + --surface-public-page-pattern-call-to-action-full-width-title: var(--surface-portal-header); + --text-public-page-pattern-call-to-action-full-width-title: var(--text-portal-header-brand); + --surface-card-header-primary: var(--surface-public-page-pattern-call-to-action-full-width-title); + --text-card-header: var(--text-public-page-pattern-call-to-action-full-width-title); + width: 100%; } .sg-public-page-pattern-call-to-action-box__action { @@ -4883,6 +4891,10 @@ main { width: 100%; } +.sg-public-page-pattern-call-to-action-box__action .sg-button--process { + width: 100%; +} + .sg-public-page-pattern-text-and-picture-right { --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr)); --layout-public-page-pattern-text-picture-gap: var(--spacing-large);