diff --git a/foundations.html b/foundations.html index 15e8dc7..f0da44c 100644 --- a/foundations.html +++ b/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#51B951Hellgrü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/patterns/notifications.html b/patterns/notifications.html index a9d43a8..b2c6d7a 100644 --- a/patterns/notifications.html +++ b/patterns/notifications.html @@ -119,6 +119,26 @@ +
+
+

+ 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. +

+
+ +
+ +
+
+

diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 0ce5967..3ea9720 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -15,6 +15,7 @@ --color-white: #FFFFFF; --color-process-inactive: #FFAE79; --color-signal-green: #009101; + --color-signal-green-light: #51B951; --color-signal-yellow: #9C7A00; --color-signal-red: #9B3B2F; --color-font-dark: #414959; diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css index 0effbcf..c460fa4 100644 --- a/styles/40-components-cards.css +++ b/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-dark); + --text-card-body: var(--color-font-dark); +} + .sg-card--content-card { --surface-card-header-primary: var(--surface-content-block-card-title); --surface-card-body: var(--surface-content-block-card-content);