From 97f97afcf7cc98fb5e1a03d43eb55e5aaacfabef Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Sat, 6 Jun 2026 12:52:10 +0200 Subject: [PATCH] sections --- .../ParticipationTeaserComponent.js | 2 +- .../ParticipationStageComponent.js | 2 +- .../participation-stage.scss | 16 ++++++++++------ .../ParticipationTeasersComponent.js | 2 +- .../participation-teasers.scss | 2 +- .../quick-facts/QuickFactsComponent.js | 2 +- .../sections/quick-facts/quick-facts.scss | 4 ++-- .../stories/sections/search/SearchComponent.js | 2 +- .../sections/search/search-typeahead.js | 2 +- .../stories/sections/search/search.scss | 18 +++++++++--------- 10 files changed, 28 insertions(+), 24 deletions(-) diff --git a/gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaserComponent.js b/gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaserComponent.js index 1b7e31f..bcf47ec 100644 --- a/gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaserComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js b/gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js index d5dbd73..22682d0 100644 --- a/gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss b/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss index d07a2ee..5fda1ed 100644 --- a/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss +++ b/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 { diff --git a/gfi-ihk-2024/stories/sections/participation-teasers/ParticipationTeasersComponent.js b/gfi-ihk-2024/stories/sections/participation-teasers/ParticipationTeasersComponent.js index 62ea2c4..3b2d221 100644 --- a/gfi-ihk-2024/stories/sections/participation-teasers/ParticipationTeasersComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/participation-teasers/participation-teasers.scss b/gfi-ihk-2024/stories/sections/participation-teasers/participation-teasers.scss index cc3c3e9..a6f059b 100644 --- a/gfi-ihk-2024/stories/sections/participation-teasers/participation-teasers.scss +++ b/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; diff --git a/gfi-ihk-2024/stories/sections/quick-facts/QuickFactsComponent.js b/gfi-ihk-2024/stories/sections/quick-facts/QuickFactsComponent.js index 05a9f5c..04a4578 100644 --- a/gfi-ihk-2024/stories/sections/quick-facts/QuickFactsComponent.js +++ b/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); diff --git a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss b/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss index 0e02a12..c2075bf 100644 --- a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss +++ b/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; diff --git a/gfi-ihk-2024/stories/sections/search/SearchComponent.js b/gfi-ihk-2024/stories/sections/search/SearchComponent.js index 8a60922..4a1552e 100644 --- a/gfi-ihk-2024/stories/sections/search/SearchComponent.js +++ b/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; }) diff --git a/gfi-ihk-2024/stories/sections/search/search-typeahead.js b/gfi-ihk-2024/stories/sections/search/search-typeahead.js index 4a1a955..a2b0ac6 100644 --- a/gfi-ihk-2024/stories/sections/search/search-typeahead.js +++ b/gfi-ihk-2024/stories/sections/search/search-typeahead.js @@ -91,7 +91,7 @@ class IHKSearchTypeahead { buildGroup(json, tileClass, title) { const tile = $('
').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper); - const outer = $('
').addClass('outer').appendTo(tile); + const outer = $('
').addClass('outer').addClass('variant-subtle-primary').appendTo(tile); const inner = $('
').addClass('inner').appendTo(outer); const p = $('

').appendTo(inner); const ul = $('

    ').appendTo(inner); diff --git a/gfi-ihk-2024/stories/sections/search/search.scss b/gfi-ihk-2024/stories/sections/search/search.scss index 20d1d3d..ce1a21b 100644 --- a/gfi-ihk-2024/stories/sections/search/search.scss +++ b/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); } } }