sections: events

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js

@@ -22,7 +22,7 @@ export const createETLSlider =
     if (headline && headline.length > 0) {
       createElement('h1', [], headline, hcontainer);
     }
-    const sliderComponent = createElement('div', ['eventteaserlargeslider'], null, container);
+    const sliderComponent = createElement('div', ['eventteaserlargeslider','variant-subtle-primary'], null, container);
 
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
@@ -32,7 +32,7 @@ export const createETLSlider =
       if (widemode) {
         a.classList.add('widemode');
       }
-      const blueBox = createElement('div', ['blue-box'], null, a);
+      const blueBox = createElement('div', ['blue-box','variant-solid'], null, a);
       const imgCon = createElement('div', ['img-con'], null, blueBox);
       const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
       createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox);

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -145,10 +145,10 @@
       text-align: center;
       line-height: 60px;
       left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
-      color: var(--theme-color-primary);
       right: auto;
       border-radius: 24px;
-      background: var(--theme-color-primary-dimmed-04);
+      background: var(--color-background);
+      color: var(--color-text);
       --button-hover-shadow-opacity: 0.4;
       --button-hover-shadow-size: 6px;
       @media(max-width: 1470px) {

gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js

@@ -12,7 +12,7 @@ export const createEventTeasersLarge = ({
   events = EventTeasersLargeData,
   buttonLabel = 'Alle aktuellen Beteiligungen',
 }) => {
-  const section = createElement('section', ['event-teasers-large']);
+  const section = createElement('section', ['event-teasers-large','variant-subtle-primary']);
   const hlContainer = createElement('div', ['container'], null, section);
   const hl = createElement('h2', [], headline, hlContainer);
   const shl = createElement('p', [], subheadline, hlContainer);

gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.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/eventoverview-stage/EventOverviewStageComponent.js

@@ -22,13 +22,13 @@ export const createEventOverviewStage = ({
   video = false
 }) => {
   //const hasImage = imageSrc && imageSrc.length > 0;
-  const section = createElement('section', ['eventoverview-section']);
+  const section = createElement('section', ['eventoverview-section','variant-base']);
   let form = null;
 
   if (video) {
     section.appendChild(createVideoStage({}));
   } else {
-    const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section);
+    const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage','variant-solid'], null, section);
     const container = createElement('div', ['container'], null, sectiondiv);
     const row = createElement('div', ['row'], null, container);
     const col = createElement('div', ['col'], null, row);

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

@@ -13,7 +13,7 @@
 .eventoverview-stage {
   background-image: url('./hero-veranstaltung-gfx.jpg');
   background-size: cover;
-  color: var(--swatches-neutrals-white);
+  color: var(--color-text);
   min-height: calc(18vw + 400px);
   display: flex;
   align-items: center;
@@ -66,26 +66,26 @@
   }
 
   .stagetext-box a:not(.btn) {
-    color: var(--swatches-neutrals-white);
+    color: var(--color-text);
     + .btn {
       margin-left: 30px;
     }
   }
 
-  .progress {
-    --color-bg: var(--swatches-neutrals-white);
-    --color-fg: var(--swatches-neutrals-white);
-    --bg-opacity: 0.4;
-
-    + h1, + .text-2 {
-      margin-top: 0.7em;
-    }
-  }
+  //.progress {
+  //  --color-bg: var(--swatches-neutrals-white);
+  //  --color-fg: var(--swatches-neutrals-white);
+  //  --bg-opacity: 0.4;
+  //
+  //  + h1, + .text-2 {
+  //    margin-top: 0.7em;
+  //  }
+  //}
 
   &.image-stage {
     position: relative;
     background-image: none;
-    background-color: var(--theme-color-primary);
+    background-color: var(--color-button-primary-text);
     overflow: hidden;
     z-index: 1;
 
@@ -97,7 +97,7 @@
       top: 0;
       bottom: 0;
       margin: -15% 0 -15% 0;
-      background-color: var(--theme-color-primary);
+      background-color: var(--color-background);
     }
 
     .stagetext-box {

gfi-ihk-2024/stories/sections/events/EventsComponent.js

@@ -15,7 +15,7 @@ export const createEventsSection = ({
   scrollItems = 5,
   events = EventsData,
 }) => {
-  const section = createElement('section', ['events']);
+  const section = createElement('section', ['events','variant-subtle-primary']);
   const container = createElement('div', ['container'], null, section);
   if (headline && headline.length > 0) {
     createElement('h2', [], headline, container);

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

@@ -3,7 +3,7 @@
 
 .events {
   padding: var(--section-padding) 0;
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
 
   .has-sidebar &,
   .magazine-article & {
@@ -56,7 +56,7 @@
       @include focus-visible;
 
       &:hover {
-        color: var(--theme-color-link-hover);
+        color: var(--color-text-accent);
       }
     }
   }
@@ -137,7 +137,7 @@
   }
 
   a:not(.btn):hover .ev-title ~ div {
-    color: var(--theme-color-primary);
+    color: var(--color-text);
   }
 
   .ev-title {
@@ -198,14 +198,14 @@
         //@extend .icon-xsmall-offen;
 
         &:before {
-          color: var(--swatches-secondary-700);
+          color: var(--color-text-accent);
         }
 
         &.interested-parties, &.waiting-list {
           //@extend .icon-xsmall-liste;
 
           &:before {
-            color: var(--theme-color-primary);
+            color: var(--color-text);
           }
         }
 
@@ -213,7 +213,7 @@
           //@extend .icon-xsmall-geschlossen;
 
           &:before {
-            color: var(--theme-color-error);
+            color: var(--feedback-error);
           }
         }
       }