diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js index aeea6d9..fe4bbf0 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss index 29f78a4..73609e7 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss +++ b/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) { diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js index 8c74646..33d4ca6 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss index a1b7bee..6a3d94c 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss +++ b/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; diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js index 099b87a..2e590f9 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index 2ea09a3..49a603e 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/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 { diff --git a/gfi-ihk-2024/stories/sections/events/EventsComponent.js b/gfi-ihk-2024/stories/sections/events/EventsComponent.js index 9def272..f488bb4 100644 --- a/gfi-ihk-2024/stories/sections/events/EventsComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/events/events.scss b/gfi-ihk-2024/stories/sections/events/events.scss index 87fd116..cc41f17 100644 --- a/gfi-ihk-2024/stories/sections/events/events.scss +++ b/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); } } }