components

gfi-ihk-2024/stories/atoms/button/button.scss

@@ -63,8 +63,8 @@
 }
 
 .btn.primary-light {
-  --button-bg-color: var(--swatches-primary-200);
-  --button-text-color: var(--color-button-primary-background);
+  --button-bg-color: var(--color-button-tertiary-background);
+  --button-text-color: var(--color-button-tertiary-text);
   --button-hover-shadow-opacity: 0.45;
 }
 

gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js

@@ -15,11 +15,15 @@ export const createSuperlistEntrySection = ({
     let onlyForStorybook,
         section;
     if (showInStorybook) {
-        onlyForStorybook = createElement('div', centered ? ['superlist','variant-subtle-primary', 'centered'] : ['superlist','variant-subtle-primary']);
-        section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base'], null, onlyForStorybook);
-    } else {
-        section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base']);
+        onlyForStorybook = createElement('div', centered ? ['superlist', 'variant-subtle-primary', 'centered'] : ['superlist', 'variant-subtle-primary']);
+    }
+    const variant = centered ? null : inverted ? 'variant-solid' : 'variant-base';
+    const sectionClasses = ['superlist-entry', ...(inverted ? ['inverted'] : []), ...(variant ? [variant] : [])];
+    section = createElement('div', sectionClasses);
+    if (showInStorybook) {
+        onlyForStorybook.appendChild(section);
     }
+
     const graphic = createElement('div', ['graphic','variant-solid'], null, section);
     createElement('div', ['icon-box', icon], null, graphic);
     const container = createElement('div', ['textbox'], null, section);

gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss

@@ -1,5 +1,6 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
+@import '../../sections/superlist/superlist';
 
 .superlist-entry {
   position: relative;
@@ -101,8 +102,8 @@
     }
     .textbox {
       .btn {
-        --button-bg-color: var(--color-button-primary-background);
-        --button-text-color: var(--color-button-primary-text);
+        --button-bg-color: var(--color-button-tertiary-background);
+        --button-text-color: var(--color-button-tertiary-text);
         --button-hover-shadow-opacity: 0.35;
       }
     }
@@ -119,7 +120,7 @@
 
     &:before {
       left: 29px;
-      background: var(--theme-color-secondary);
+      background: var(--color-decoration);
       @media (min-width: 768px) {
         left: calc(50% - 1px);
       }
@@ -144,13 +145,13 @@
       position: absolute;
       left: 0;
       top: 0;
-      background: var(--theme-color-secondary);
+      background: var(--color-decoration);
       @media (min-width: 768px) {
         left: 50%;
         transform: translate(-50%, 0);
       }
       .icon-box {
-        color: var(--theme-color-primary);
+        color: var(--color-background);
       }
     }
     .textbox {
@@ -169,15 +170,15 @@
       h3, .like-h3 {
         padding-bottom: 9px;
         margin-bottom: 11px;
-        border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+        border-bottom: 1px solid var(--color-surface-inset);
         @media (min-width: 768px) {
           margin-top: 3px;
           margin-bottom: 9px;
         }
       }
       .btn {
-        --button-bg-color: var(--swatches-neutrals-white);
-        --button-text-color: var(--theme-color-primary);
+        --button-bg-color: var(--color-button-tertiary-background);
+        --button-text-color: var(--color-button-tertiary-text);
         --button-hover-shadow-opacity: 0.35;
       }
     }
@@ -190,10 +191,9 @@
       }
       .textbox {
         background: none;
-        color: var(--color-button-primary-text);
         .btn {
-          --button-bg-color: var(--swatches-neutrals-white);
-          --button-text-color: var(--color-button-primary-text);
+          --button-bg-color: var(--color-button-tertiary-background);
+            --button-text-color: var(--color-button-tertiary-text);
           --button-hover-shadow-opacity: 0.35;
         }
       }

gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss

@@ -3,7 +3,7 @@
 
 .teaser .social-box {
   position: relative;
-  border: 4px solid var(--theme-color-primary-dimmed-03);
+  border: 4px solid var(--color-surface-inset);
   margin-left: -2px;
   margin-right: -2px;
   padding: 10px;

gfi-ihk-2024/stories/components/teaser/TeaserComponent.js

@@ -48,7 +48,7 @@ export const createTeaser = ({
         imageHeight = 280;
     }
 
-    const imageBox = createElement('div', ['image-box'], '', teaser);
+    const imageBox = createElement('div', ['image-box', 'variant-solid'], '', teaser);
     const src = imageSrc.replace('420', imageWidth).replace('280', imageHeight);
     createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox);
 
@@ -59,11 +59,11 @@ export const createTeaser = ({
     }
   }
   else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) {
-    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
+    const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser);
     createElement('span', ['chart-title'], chartTitle, imageBox);
   }
   else if (type === 'picto' || type === 'pictoHero') {
-    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
+    const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser);
     const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox);
     const iconBox = createElement('div', ['icon'], null, pictoBox);
     iconBox.classList.add(picto);
@@ -73,7 +73,7 @@ export const createTeaser = ({
   }
 
   else if (type === 'picto' || type === 'pictoHero') {
-    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
+    const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser);
     const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox);
     const iconBox = createElement('div', ['icon'], null, pictoBox);
     iconBox.classList.add(picto);

gfi-ihk-2024/stories/components/teaser/teaser.scss

@@ -45,7 +45,7 @@
     position: relative;
     display: block;
     border-radius: var(--border-radius-xs);
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--color-button-tertiary-background);
     overflow: hidden;
     flex-grow: 0;
     flex-shrink: 0;
@@ -66,7 +66,7 @@
       width: 100%;
       display: block;
       height: 8px;
-      background-color: var(--theme-color-secondary);
+      background-color: var(--color-decoration);
       transition: 0.3s ease;
       z-index: 1;
       border-bottom-right-radius: 4px;
@@ -123,7 +123,7 @@
         left: 0;
         top: 0;
         font-family: "Pictograms", sans-serif;
-        color: var(--swatches-neutrals-white);
+        color: var(--color-text);
         font-size: 90px;
         line-height: 1;
         @media(min-width: 568px) {
@@ -139,7 +139,7 @@
       height: 38px;
       display: block;
       font-weight: 400 !important;
-      color: var(--theme-color-background) !important;
+      color: var(--color-text) !important;
       text-decoration-color: transparent !important;
       text-align: center;
 
@@ -173,7 +173,7 @@
     font-weight: 500 !important;
     padding: 30px;
     margin: 0 0 0.4em;
-    color: var(--theme-color-background) !important;
+    color: var(--color-text) !important;
     text-decoration-color: transparent !important;
     text-align: center;
 
@@ -186,7 +186,7 @@
 
   .kicker + .text-box {
     margin-top: 0;
-    border-top: 8px solid var(--theme-color-secondary);
+    border-top: 8px solid var(--color-decoration);
   }
 
   .text-box {
@@ -238,7 +238,7 @@
       position: absolute;
       bottom: 100%;
       z-index: 1;
-      background-color: var(--hero-background);
+      background-color: var(--swatches-neutrals-white);
       margin-right: 40px;
       padding-top: 0.4em;
       padding-right: 0.8em;

gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js

@@ -16,10 +16,11 @@ export const createSuperlistSection = ({
     createElement('h2', [], headline, container);
     createElement('p', [], paragraph, container);
     const superlistlist = createElement('div', ['superlist--list'], null, container);
-    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b'}));
-    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel'}));
+    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b', centered}));
+    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel', centered}));
     superlistlist.appendChild(createSuperlistEntrySection({
         inverted: true,
+        centered,
         icon: 'pictogram-solaranlage-a'
     }));
     const btnContainer = createElement('div', ['button-container'], null, container);