From 9942256db452b991b6b99653b2801625317e9462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Sat, 27 Jun 2026 07:53:59 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/foundations.html | 1 + docs/styleguide/patterns/notifications.html | 33 ++++++++++++++++--- 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, 65 insertions(+), 6 deletions(-) diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index 15e8dc7..8e5b0e2 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -30,6 +30,7 @@ black#000000Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten. 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-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen. signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte. font-dark#414959Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung. diff --git a/docs/styleguide/patterns/notifications.html b/docs/styleguide/patterns/notifications.html index a9d43a8..9477d43 100644 --- a/docs/styleguide/patterns/notifications.html +++ b/docs/styleguide/patterns/notifications.html @@ -79,7 +79,8 @@
-
+

Pattern: Notification with title - reg

+

Kaufsignal Veeva Systems Inc Class A @@ -99,7 +100,8 @@

-
+

Pattern: Notification with title - green

+

Kaufsignal Veeva Systems Inc Class A @@ -119,7 +121,29 @@

-
+

Pattern: Notification with title - light green

+
+
+

+ Kaufsignal Veeva Systems Inc Class A +

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean. +

+
+ +
+ +
+
+ +

Pattern: Notification with title - yellow

+

Kaufsignal Veeva Systems Inc Class A @@ -139,7 +163,8 @@

-
+

Pattern: Notification with title - white

+

Kaufsignal Veeva Systems Inc Class A diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 0ce5967..7ca201a 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -15,6 +15,7 @@ --color-white: #FFFFFF; --color-process-inactive: #FFAE79; --color-signal-green: #009101; + --color-signal-green-light: #65A665; --color-signal-yellow: #9C7A00; --color-signal-red: #9B3B2F; --color-font-dark: #414959; diff --git a/docs/styleguide/styles/40-components-cards.css b/docs/styleguide/styles/40-components-cards.css index 0effbcf..94b2d56 100644 --- a/docs/styleguide/styles/40-components-cards.css +++ b/docs/styleguide/styles/40-components-cards.css @@ -130,6 +130,11 @@ color: var(--text-card-header); } +.sg-card-segment--signal-green-light { + background: var(--color-signal-green-light); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -147,6 +152,11 @@ --text-card-header: var(--text-card-body); } +.sg-card.sg-card--notification-signal-green-light { + --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 3c14677..1d5a760 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -15,6 +15,7 @@ --color-white: #FFFFFF; --color-process-inactive: #FFAE79; --color-signal-green: #009101; + --color-signal-green-light: #65A665; --color-signal-yellow: #9C7A00; --color-signal-red: #9B3B2F; --color-font-dark: #414959; @@ -3939,6 +3940,11 @@ main { color: var(--text-card-header); } +.sg-card-segment--signal-green-light { + background: var(--color-signal-green-light); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -3956,6 +3962,11 @@ main { --text-card-header: var(--text-card-body); } +.sg-card.sg-card--notification-signal-green-light { + --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 877f137..b9c8d9e 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": "2a667b4", - "syncedAtUtc": "2026-06-26T14:25:11Z", + "styleguideCommit": "85f80a0", + "syncedAtUtc": "2026-06-27T05:53:58Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 3c14677..1d5a760 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -15,6 +15,7 @@ --color-white: #FFFFFF; --color-process-inactive: #FFAE79; --color-signal-green: #009101; + --color-signal-green-light: #65A665; --color-signal-yellow: #9C7A00; --color-signal-red: #9B3B2F; --color-font-dark: #414959; @@ -3939,6 +3940,11 @@ main { color: var(--text-card-header); } +.sg-card-segment--signal-green-light { + background: var(--color-signal-green-light); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -3956,6 +3962,11 @@ main { --text-card-header: var(--text-card-body); } +.sg-card.sg-card--notification-signal-green-light { + --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);