sections

gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaserComponent.js

@@ -20,7 +20,7 @@ export const createParticipationTeaser = ({
     target: '_self',
   }
 }) => {
-  const teaser = createElement('div', ['participation-teaser', 'tile']);
+  const teaser = createElement('div', ['participation-teaser','variant-base', 'tile']);
 
   const tb = createElement('div', ['text-box'], null, teaser);
   const kickerSpan = createElement('p', ['kicker'], kicker, tb);

gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js

@@ -25,7 +25,7 @@ export const createParticipationStage = ({
   isFirstElement = false,
 }) => {
   const hasImage = imageSrc && imageSrc.length > 0;
-  const section = createElement('section', ['participation', 'participation-stage']);
+  const section = createElement('section', ['participation', 'participation-stage','variant-solid']);
   const container = createElement('div', ['container'], null, section);
   const row = createElement('div', ['row'], null, container);
   const col = createElement('div', ['col'], null, row);

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

@@ -4,7 +4,7 @@
 .participation-stage {
   background-image: url('./beteiligung-cover.jpg');
   background-size: cover;
-  color: var(--swatches-neutrals-white);
+  color: var(--color-text);
   min-height: calc(18vw + 300px);
   display: flex;
   align-items: center;
@@ -43,10 +43,14 @@
   .text-box {
     max-width: 580px;
     padding: calc(30px + 1vw) 0;
+    .btn {
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
+    }
   }
 
   a:not(.btn) {
-    color: var(--swatches-neutrals-white);
+    color: var(--color-text);
 
     + .btn {
       margin-left: 30px;
@@ -54,8 +58,8 @@
   }
 
   .progress {
-    --color-bg: var(--swatches-neutrals-white);
-    --color-fg: var(--swatches-neutrals-white);
+    --color-bg: var(--color-text);
+    --color-fg: var(--color-text);
     --bg-opacity: 0.4;
 
     + h1, + .text-2 {
@@ -66,7 +70,7 @@
   &.image-stage {
     position: relative;
     background-image: none;
-    background-color: var(--theme-color-primary);
+    background-color: var(--color-background);
     overflow: hidden;
     z-index: 1;
 
@@ -78,7 +82,7 @@
       top: 0;
       bottom: 0;
       margin: -15% 0 -15% 0;
-      background-color: var(--theme-color-primary);
+      background-color: var(--color-background);
     }
 
     .text-box {

gfi-ihk-2024/stories/sections/participation-teasers/ParticipationTeasersComponent.js

@@ -11,7 +11,7 @@ export const createParticipationTeasers = ({
   items = ParticipationTeasersData,
   buttonLabel = 'Alle aktuellen Beteiligungen',
 }) => {
-  const section = createElement('section', ['participation-teasers']);
+  const section = createElement('section', ['participation-teasers','variant-subtle-primary']);
   const hlContainer = createElement('div', ['container'], null, section);
   const hl = createElement('h2', [], headline, hlContainer);
   const wrapper = createElement('div', ['overflow-wrapper'], null, section);

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

@@ -6,7 +6,7 @@
   display: block;
   padding: var(--section-padding) 0;
   margin: 0;
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
 
   @media(max-width: 767px) {
     margin-top: 24px;

gfi-ihk-2024/stories/sections/quick-facts/QuickFactsComponent.js

@@ -9,7 +9,7 @@ export const createQuickFacts = ({
   headline = 'Quick Facts',
   facts = QuickFactsData,
 }) => {
-  const section = createElement('section', ['quick-facts']);
+  const section = createElement('section', ['quick-facts','variant-subtle-primary']);
   const container = createElement('div', ['container'], null, section);
   if (headline && headline.length > 0) {
     createElement('h2', [], headline, container);

gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss

@@ -33,7 +33,7 @@
     position: relative;
     display: block;
     text-align: center;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--color-background);
     overflow: hidden;
 
     @media(max-width: 767px) {
@@ -138,7 +138,7 @@
     line-height: 50px;
     right: 0;
     margin: -25px 10px;
-    color: var(--theme-color-primary);
+    color: var(--color-text);
 
     @media(max-width: 767px) {
       display: none;

gfi-ihk-2024/stories/sections/search/SearchComponent.js

@@ -40,7 +40,7 @@ export const createSearch =
 
     const tilesContainer = createElement('div', ['tiles'], null, col);
     tiles.map((tile) => {
-      const div = createElement('div', ['tile'], null, tilesContainer);
+      const div = createElement('div', ['tile','variant-base'], null, tilesContainer);
       const a = createElement('a', [], tile.title, div);
       a.href = tile.link;
     })

gfi-ihk-2024/stories/sections/search/search-typeahead.js

@@ -91,7 +91,7 @@ class IHKSearchTypeahead {
 
   buildGroup(json, tileClass, title) {
     const tile = $('<div/>').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper);
-    const outer = $('<div/>').addClass('outer').appendTo(tile);
+    const outer = $('<div/>').addClass('outer').addClass('variant-subtle-primary').appendTo(tile);
     const inner = $('<div/>').addClass('inner').appendTo(outer);
     const p = $('<p/>').appendTo(inner);
     const ul = $('<ul/>').appendTo(inner);

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

@@ -94,11 +94,11 @@ section.search {
       }
 
       &[data-type="download"]::before {
-        color: var(--theme-color-link);
+        color: var(--color-text);
         @include icon-small-download;
       }
       &[data-type="external"]::before {
-        color: var(--theme-color-link);
+        color: var(--color-text);
         @include icon-small-link-external;
       }
 
@@ -125,7 +125,7 @@ section.search {
           top: 0;
           margin: 11px 10px;
           z-index: 1;
-          background-color: var(--swatches-neutrals-white);
+          //background-color: var(--swatches-neutrals-white);
           padding: 7px 6px 5px;
           border-top-right-radius: 8px;
           border-bottom-left-radius: 8px;
@@ -137,7 +137,7 @@ section.search {
         }
 
         .outer {
-          background-color: var(--theme-color-primary-dimmed-04);
+          background-color: var(--color-background);
         }
 
         p {
@@ -167,7 +167,7 @@ section.search {
       box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
       transition: 0.25s ease;
       line-height: 1.2;
-      background-color: var(--theme-color-background);
+      background-color: var(--color-background);
       overflow: hidden;
       @include focus-visible();
 
@@ -185,12 +185,12 @@ section.search {
         left: 0;
         right: 0;
         height: var(--border-width);
-        background-color: var(--theme-color-secondary);
+        background-color: var(--color-decoration);
         transition: 0.25s $easeOutQuad;
       }
 
       &:hover {
-        color: var(--swatches-secondary-700);
+        color: var(--color-text-accent);
 
         &:before {
           height: var(--border-width-hover);
@@ -205,7 +205,7 @@ section.search {
     }
 
     .outer {
-      background-color: var(--theme-primary-light-04);
+      background-color: var(--color-background);
       padding: 14px 20px 18px;
       border: 4px solid var(--swatches-neutrals-white);
 
@@ -248,7 +248,7 @@ section.search {
         font-weight: 500;
 
         &:hover {
-          color: var(--color-secondary-dark);
+          color: var(--color-text-accent);
         }
       }
     }