more sections

gfi-ihk-2024/stories/sections/feature/FeatureComponent.js

@@ -30,7 +30,7 @@ export const createFeature = ({
   ],
   icon = 'Eule',
 }) => {
-  const section = createElement('section', ['feature'], null);
+  const section = createElement('section', ['feature','variant-solid'], null);
   const container = createElement('div', ['container'], null, section);
   const row = createElement('div', ['row'], null, container);
   const textCol = createElement('div', ['col'], null, row);
@@ -44,7 +44,7 @@ export const createFeature = ({
   textBox.appendChild(linkList);
 
   if (icon && icon.length > 0) {
-    createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, iconCol);
+    createElement('div', ['icon-box','variant-base', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, iconCol);
   }
 
   return section;

gfi-ihk-2024/stories/sections/feature/feature.scss

@@ -2,19 +2,19 @@
 @use '../../_global/styles/vars' as *;
 
 .feature {
-  --theme-color-link: var(--swatches-neutrals-white);
-  --theme-color-link-hover: var(--theme-color-secondary);
-  color: var(--swatches-neutrals-white);
-  background-color: var(--theme-color-primary);
+  //--theme-color-link: var(--color-text);
+  //--theme-color-link-hover: var(--theme-color-secondary);
+  color: var(--color-text);
+  background-color: var(--color-background);
   padding: var(--section-padding) 0;
-  border-bottom: var(--border-width) solid var(--theme-color-secondary);
+  border-bottom: var(--border-width) solid var(--color-border);
   margin: var(--section-margin) auto;
   position: relative;
 
   &:after {
     content: "";
-    background: var(--theme-color-primary);
-    border-bottom: var(--border-width) solid var(--theme-color-secondary);
+    background: var(--color-background);
+    border-bottom: var(--border-width) solid var(--color-border);
     position: absolute;
     left: 50%;
     top: 0;
@@ -65,7 +65,7 @@
   }
 
   a {
-    color: var(--swatches-neutrals-white);
+    color: var(--color-text);
   }
 
   .col:nth-child(2) {
@@ -103,7 +103,7 @@
       position: relative;
       display: block;
       padding-top: 100%;
-      background-color: var(--swatches-neutrals-white);
+      background-color: var(--color-background);
     }
 
     &:before {
@@ -115,7 +115,7 @@
       font-size: 200px;
       line-height: 1;
       transform: translate(-50%, -50%);
-      color: var(--theme-color-secondary);
+      color: var(--color-decoration);
 
       @media(max-width: 767px) {
         font-size: 140px;

gfi-ihk-2024/stories/sections/infobanner/InfoBannerComponent.js

@@ -13,7 +13,7 @@ export const createInfoBanner =
     imageSrcMobile = './dummy/placeholder-1-1.svg',
     isCommercial = true,
   }) => {
-    const section = createElement('section', ['infobanner'], null);
+    const section = createElement('section', ['infobanner','variant-solid'], null);
 
     const container = createElement('div', ['container'], null, section);
     const banner = createElement('a', ['banner'], null, container);
@@ -55,7 +55,7 @@ export const createInfoBanner =
     }
 
     if (isCommercial) {
-      createElement('span', ['is-commercial'], 'Werbung', banner);
+      createElement('span', ['is-commercial','variant-subtle-primary'], 'Werbung', banner);
     }
 
     banner.href = link;

gfi-ihk-2024/stories/sections/infobanner/infobanner.scss

@@ -7,7 +7,7 @@
   .banner {
     position: relative;
     display: flex;
-    color: var(--swatches-neutrals-white);
+    color: var(--color-text);
     background: linear-gradient(130deg, var(--theme-color-gradient-01) 40%,var(--theme-color-gradient-02) 80%,var(--theme-color-gradient-03) 120%);
     border-radius: var(--border-radius-xs);
     text-decoration: none;
@@ -41,8 +41,8 @@
     top: 0;
     padding: 1px 7px;
     font-size: var(--font-size-xs);
-    color: var(--theme-color-primary);
-    background-color: rgba(#fff, 0.7);
+    color: var(--color-text);
+    background-color: var(--color-background);
     border-bottom-left-radius: var(--border-radius-xs);
   }
 
@@ -131,6 +131,10 @@
     @media(max-width: 567px) {
       padding-bottom: 30px;
     }
+    .btn {
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
+    }
   }
 /*
   .btn {

gfi-ihk-2024/stories/sections/participation-map/ParticipationMapComponent.js

@@ -8,7 +8,7 @@ export const createParticipationMap = ({
   count = 68,
   svg = ParticipationMapData,
 }) => {
-  const section = createElement('section', ['participation-map']);
+  const section = createElement('section', ['participation-map','variant-subtle-primary']);
   const headlineContainer = createElement('div', ['container'], null, section);
   const hl = createElement('h2', [], headline, headlineContainer);
   createElement('div', ['container', 'small'], svg, section);

gfi-ihk-2024/stories/sections/participation-map/participation-map.scss

@@ -3,7 +3,7 @@
 
 .participation-map {
   padding: var(--section-padding) 0;
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
 
   h2 {
     margin-top: var(--section-headline-margin);
@@ -24,12 +24,12 @@
   }
 
   .map-text {
-    fill: var(--swatches-neutrals-white);
+    fill: var(--color-button-primary-text);
     transition: 0.3s ease;
   }
 
   .map-shape {
-    fill: var(--theme-color-primary);
+    fill: var(--color-button-primary-background);
     transition: 0.3s ease;
   }
 
@@ -38,11 +38,11 @@
 
     &:hover {
       .map-text {
-        fill: var(--theme-color-primary);
+        fill: var(--color-button-tertiary-text);
       }
 
       .map-shape {
-        fill: var(--theme-color-primary-dimmed-03);
+        fill: var(--color-button-tertiary-background);
       }
     }
   }