sections

gfi-ihk-2024/stories/components/topic-teaser/TopicTeaserComponent.js

@@ -9,7 +9,7 @@ export const createTopicTeaser = ({
   icon = 'Eule Doktorhut',
   linklistData = null,
 }) => {
-  const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser', type], null);
+  const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser','variant-base', type], null);
   tile.href = link;
   createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile);
   const textBox = createElement('div', ['text-box'], null, tile);

gfi-ihk-2024/stories/sections/topic-teasers/TopicTeasersComponent.js

@@ -11,7 +11,7 @@ export const createTopicTeasersSection = ({
   maxItems = 6,
   data = type === 'single-topic' ? Topics : TopicsWithLinklist,
 }) => {
-  const section = createElement('section', ['topics']);
+  const section = createElement('section', ['topics','variant-subtle-primary']);
   section.dataset.type = type === 'single-topic' ? 'single' : 'list';
 
   const container = createElement('div', ['container'], null, section);

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

@@ -1,5 +1,5 @@
 section.topics {
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
   padding: var(--section-padding) 0;
   margin: var(--section-margin) auto;
 

gfi-ihk-2024/stories/sections/video-stage/VideoStageComponent.js

@@ -19,7 +19,7 @@ export const createVideoStage = ({
 }) => {
   const hasVideo = videoSrc && videoSrc.length > 0;
   const hasImage = imageSrc && imageSrc.length > 0;
-  const videoStage = createElement('section', ['video-stage']);
+  const videoStage = createElement('section', ['video-stage','variant-solid']);
   if(hasVideo) {
     const videoContainer = createElement('div', ['video-container'], null, videoStage);
     const video = createElement('video', [], null, videoContainer);

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

@@ -2,8 +2,8 @@
 @use '../../_global/styles/vars' as *;
 
 .video-stage {
-  background: red;
-  color: var(--swatches-neutrals-white);
+  background: var(--color-background);
+  color: var(--color-text);
   min-height: calc(18vw + 300px);
   display: flex;
   align-items: center;
@@ -50,7 +50,7 @@
         line-height: 1;
       }
       &:hover {
-        color: var(--theme-color-secondary);
+        color: var(--color-decoration);
       }
     }
     .video--play-pause {
@@ -90,9 +90,13 @@
     margin-bottom: 0.6em;
   }
 
-  .btn {
-    margin-top: 0.8em;
-    margin-bottom: 0.4em;
+  .text-box {
+    .btn {
+      margin-top: 0.8em;
+      margin-bottom: 0.4em;
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
+    }
   }
 
   .text-box {