feat(styleguide): add signal-green-red notification variant

foundations.html

@@ -31,6 +31,7 @@
         <tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
         <tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
         <tr><td>signal-green-light</td><td>#65A665</td><td>Hellgrüne Variante für positive Signal- und Notification-Flächen.</td></tr>
+        <tr><td>signal-green-red</td><td>#C0624D</td><td>Rotgrüne Variante für positive oder negative Bewertungsdarstellungen in Notifications.</td></tr>
         <tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
         <tr><td>ampel-hellgelb</td><td>#D3B962</td><td>Untersegmente in der Pattern-Notification-Variante der Object Card.</td></tr>
         <tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>

patterns/notifications.html

@@ -142,6 +142,27 @@
         </div>
       </article>
 
+      <p class="sg-preview-label">Pattern: Notification with title - green-red rating</p>
+      <article class="sg-card sg-card--notification-signal-green-red sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green-red-rating" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body">
+            <span class="sg-strong">Bewertung</span>
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-red sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">
+            Positive oder negative Bewertungsdarstellung zur Illustration.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green-red" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zur Bewertung
+          </button>
+        </div>
+      </article>
+
       <p class="sg-preview-label">Pattern: Notification with title - yellow</p>
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="yellow" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">

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;

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);