From a6007b585316ce81d3b378940a20f3d8754601ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 21 Sep 2026 17:27:45 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/foundations.html | 1 + docs/styleguide/patterns/notifications.html | 21 +++++++++++++++++++ docs/styleguide/styles/01-foundations.css | 1 + .../styleguide/styles/40-components-cards.css | 10 +++++++++ public/assets/styleguide.upstream.css | 11 ++++++++++ public/assets/styleguide.upstream.meta.json | 4 ++-- public/assets/styles.css | 11 ++++++++++ 7 files changed, 57 insertions(+), 2 deletions(-) diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index 46c567e..d0aedac 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -31,6 +31,7 @@ white#FFFFFFStandardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern. signal-green#009101Positive Score-Balken und positive Chart-Werte. signal-green-light#65A665Hellgrüne Variante für positive Signal- und Notification-Flächen. + signal-green-red#C0624DRotgrüne Variante für positive oder negative Bewertungsdarstellungen in Notifications. signal-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen. ampel-hellgelb#D3B962Untersegmente in der Pattern-Notification-Variante der Object Card. signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte. diff --git a/docs/styleguide/patterns/notifications.html b/docs/styleguide/patterns/notifications.html index 5807bbd..b5c8e4c 100644 --- a/docs/styleguide/patterns/notifications.html +++ b/docs/styleguide/patterns/notifications.html @@ -142,6 +142,27 @@ +

Pattern: Notification with title - green-red rating

+
+
+

+ Bewertung +

+
+ +
+

+ Positive oder negative Bewertungsdarstellung zur Illustration. +

+
+ +
+ +
+
+

Pattern: Notification with title - yellow

diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 8dd7b93..6745722 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -16,6 +16,7 @@ --color-process-inactive: #FFAE79; --color-signal-green: #009101; --color-signal-green-light: #65A665; + --color-signal-green-red: #C0624D; --color-signal-yellow: #9C7A00; --color-ampel-hellgelb: #D3B962; --color-signal-red: #9B3B2F; diff --git a/docs/styleguide/styles/40-components-cards.css b/docs/styleguide/styles/40-components-cards.css index 6b20716..49b2014 100644 --- a/docs/styleguide/styles/40-components-cards.css +++ b/docs/styleguide/styles/40-components-cards.css @@ -149,6 +149,11 @@ color: var(--text-card-header); } +.sg-card-segment--signal-green-red { + background: var(--color-signal-green-red); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -171,6 +176,11 @@ --text-card-body: var(--color-font-light); } +.sg-card.sg-card--notification-signal-green-red { + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-light); +} + .sg-card--content-card { --surface-card-header-primary: var(--surface-content-block-card-title); --surface-card-body: var(--surface-content-block-card-content); diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 044623f..17e1ff4 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -16,6 +16,7 @@ --color-process-inactive: #FFAE79; --color-signal-green: #009101; --color-signal-green-light: #65A665; + --color-signal-green-red: #C0624D; --color-signal-yellow: #9C7A00; --color-ampel-hellgelb: #D3B962; --color-signal-red: #9B3B2F; @@ -4360,6 +4361,11 @@ main { color: var(--text-card-header); } +.sg-card-segment--signal-green-red { + background: var(--color-signal-green-red); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -4382,6 +4388,11 @@ main { --text-card-body: var(--color-font-light); } +.sg-card.sg-card--notification-signal-green-red { + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-light); +} + .sg-card--content-card { --surface-card-header-primary: var(--surface-content-block-card-title); --surface-card-body: var(--surface-content-block-card-content); diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 2b1852e..546d21d 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": "3e9ba6c", - "syncedAtUtc": "2026-09-21T14:24:42Z", + "styleguideCommit": "8824dc6", + "syncedAtUtc": "2026-09-21T15:27:45Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 044623f..17e1ff4 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -16,6 +16,7 @@ --color-process-inactive: #FFAE79; --color-signal-green: #009101; --color-signal-green-light: #65A665; + --color-signal-green-red: #C0624D; --color-signal-yellow: #9C7A00; --color-ampel-hellgelb: #D3B962; --color-signal-red: #9B3B2F; @@ -4360,6 +4361,11 @@ main { color: var(--text-card-header); } +.sg-card-segment--signal-green-red { + background: var(--color-signal-green-red); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -4382,6 +4388,11 @@ main { --text-card-body: var(--color-font-light); } +.sg-card.sg-card--notification-signal-green-red { + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-light); +} + .sg-card--content-card { --surface-card-header-primary: var(--surface-content-block-card-title); --surface-card-body: var(--surface-content-block-card-content);