From c6b31f2880894e215733850adc49a72bb91171ca Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Thu, 28 May 2026 16:33:34 +0200 Subject: [PATCH] components --- gfi-ihk-2024/stories/atoms/button/button.scss | 4 ++-- .../SuperlistEntryComponent.js | 12 ++++++---- .../superlist-entry/superlist-entry.scss | 22 +++++++++---------- .../teaser-social/teaser-social.scss | 2 +- .../components/teaser/TeaserComponent.js | 8 +++---- .../stories/components/teaser/teaser.scss | 14 ++++++------ .../sections/superlist/SuperlistComponent.js | 5 +++-- 7 files changed, 36 insertions(+), 31 deletions(-) diff --git a/gfi-ihk-2024/stories/atoms/button/button.scss b/gfi-ihk-2024/stories/atoms/button/button.scss index aefc09d..acf61d2 100644 --- a/gfi-ihk-2024/stories/atoms/button/button.scss +++ b/gfi-ihk-2024/stories/atoms/button/button.scss @@ -63,8 +63,8 @@ } .btn.primary-light { - --button-bg-color: var(--swatches-primary-200); - --button-text-color: var(--color-button-primary-background); + --button-bg-color: var(--color-button-tertiary-background); + --button-text-color: var(--color-button-tertiary-text); --button-hover-shadow-opacity: 0.45; } diff --git a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js index cb3f790..28647dd 100644 --- a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js +++ b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js @@ -15,11 +15,15 @@ export const createSuperlistEntrySection = ({ let onlyForStorybook, section; if (showInStorybook) { - onlyForStorybook = createElement('div', centered ? ['superlist','variant-subtle-primary', 'centered'] : ['superlist','variant-subtle-primary']); - section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base'], null, onlyForStorybook); - } else { - section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base']); + onlyForStorybook = createElement('div', centered ? ['superlist', 'variant-subtle-primary', 'centered'] : ['superlist', 'variant-subtle-primary']); + } + const variant = centered ? null : inverted ? 'variant-solid' : 'variant-base'; + const sectionClasses = ['superlist-entry', ...(inverted ? ['inverted'] : []), ...(variant ? [variant] : [])]; + section = createElement('div', sectionClasses); + if (showInStorybook) { + onlyForStorybook.appendChild(section); } + const graphic = createElement('div', ['graphic','variant-solid'], null, section); createElement('div', ['icon-box', icon], null, graphic); const container = createElement('div', ['textbox'], null, section); diff --git a/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss b/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss index 0fb219e..1e19169 100644 --- a/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss +++ b/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss @@ -1,5 +1,6 @@ @import '../../_global/styles/mixins'; @import '../../_global/styles/vars'; +@import '../../sections/superlist/superlist'; .superlist-entry { position: relative; @@ -101,8 +102,8 @@ } .textbox { .btn { - --button-bg-color: var(--color-button-primary-background); - --button-text-color: var(--color-button-primary-text); + --button-bg-color: var(--color-button-tertiary-background); + --button-text-color: var(--color-button-tertiary-text); --button-hover-shadow-opacity: 0.35; } } @@ -119,7 +120,7 @@ &:before { left: 29px; - background: var(--theme-color-secondary); + background: var(--color-decoration); @media (min-width: 768px) { left: calc(50% - 1px); } @@ -144,13 +145,13 @@ position: absolute; left: 0; top: 0; - background: var(--theme-color-secondary); + background: var(--color-decoration); @media (min-width: 768px) { left: 50%; transform: translate(-50%, 0); } .icon-box { - color: var(--theme-color-primary); + color: var(--color-background); } } .textbox { @@ -169,15 +170,15 @@ h3, .like-h3 { padding-bottom: 9px; margin-bottom: 11px; - border-bottom: 1px solid var(--theme-color-primary-dimmed-02); + border-bottom: 1px solid var(--color-surface-inset); @media (min-width: 768px) { margin-top: 3px; margin-bottom: 9px; } } .btn { - --button-bg-color: var(--swatches-neutrals-white); - --button-text-color: var(--theme-color-primary); + --button-bg-color: var(--color-button-tertiary-background); + --button-text-color: var(--color-button-tertiary-text); --button-hover-shadow-opacity: 0.35; } } @@ -190,10 +191,9 @@ } .textbox { background: none; - color: var(--color-button-primary-text); .btn { - --button-bg-color: var(--swatches-neutrals-white); - --button-text-color: var(--color-button-primary-text); + --button-bg-color: var(--color-button-tertiary-background); + --button-text-color: var(--color-button-tertiary-text); --button-hover-shadow-opacity: 0.35; } } diff --git a/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss b/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss index e08ba6a..8b4107d 100644 --- a/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss +++ b/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss @@ -3,7 +3,7 @@ .teaser .social-box { position: relative; - border: 4px solid var(--theme-color-primary-dimmed-03); + border: 4px solid var(--color-surface-inset); margin-left: -2px; margin-right: -2px; padding: 10px; diff --git a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js index 433f456..3824dda 100644 --- a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js +++ b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js @@ -48,7 +48,7 @@ export const createTeaser = ({ imageHeight = 280; } - const imageBox = createElement('div', ['image-box'], '', teaser); + const imageBox = createElement('div', ['image-box', 'variant-solid'], '', teaser); const src = imageSrc.replace('420', imageWidth).replace('280', imageHeight); createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox); @@ -59,11 +59,11 @@ export const createTeaser = ({ } } else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) { - const imageBox = createElement('div', ['image-box', 'chart'], null, teaser); + const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser); createElement('span', ['chart-title'], chartTitle, imageBox); } else if (type === 'picto' || type === 'pictoHero') { - const imageBox = createElement('div', ['image-box', 'chart'], null, teaser); + const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser); const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox); const iconBox = createElement('div', ['icon'], null, pictoBox); iconBox.classList.add(picto); @@ -73,7 +73,7 @@ export const createTeaser = ({ } else if (type === 'picto' || type === 'pictoHero') { - const imageBox = createElement('div', ['image-box', 'chart'], null, teaser); + const imageBox = createElement('div', ['image-box', 'chart', 'variant-solid'], null, teaser); const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox); const iconBox = createElement('div', ['icon'], null, pictoBox); iconBox.classList.add(picto); diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss index 10d2597..18c6621 100644 --- a/gfi-ihk-2024/stories/components/teaser/teaser.scss +++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss @@ -45,7 +45,7 @@ position: relative; display: block; border-radius: var(--border-radius-xs); - background-color: var(--theme-color-primary-dimmed-04); + background-color: var(--color-button-tertiary-background); overflow: hidden; flex-grow: 0; flex-shrink: 0; @@ -66,7 +66,7 @@ width: 100%; display: block; height: 8px; - background-color: var(--theme-color-secondary); + background-color: var(--color-decoration); transition: 0.3s ease; z-index: 1; border-bottom-right-radius: 4px; @@ -123,7 +123,7 @@ left: 0; top: 0; font-family: "Pictograms", sans-serif; - color: var(--swatches-neutrals-white); + color: var(--color-text); font-size: 90px; line-height: 1; @media(min-width: 568px) { @@ -139,7 +139,7 @@ height: 38px; display: block; font-weight: 400 !important; - color: var(--theme-color-background) !important; + color: var(--color-text) !important; text-decoration-color: transparent !important; text-align: center; @@ -173,7 +173,7 @@ font-weight: 500 !important; padding: 30px; margin: 0 0 0.4em; - color: var(--theme-color-background) !important; + color: var(--color-text) !important; text-decoration-color: transparent !important; text-align: center; @@ -186,7 +186,7 @@ .kicker + .text-box { margin-top: 0; - border-top: 8px solid var(--theme-color-secondary); + border-top: 8px solid var(--color-decoration); } .text-box { @@ -238,7 +238,7 @@ position: absolute; bottom: 100%; z-index: 1; - background-color: var(--hero-background); + background-color: var(--swatches-neutrals-white); margin-right: 40px; padding-top: 0.4em; padding-right: 0.8em; diff --git a/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js b/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js index 24917f2..a412157 100644 --- a/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js +++ b/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js @@ -16,10 +16,11 @@ export const createSuperlistSection = ({ createElement('h2', [], headline, container); createElement('p', [], paragraph, container); const superlistlist = createElement('div', ['superlist--list'], null, container); - superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b'})); - superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel'})); + superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b', centered})); + superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel', centered})); superlistlist.appendChild(createSuperlistEntrySection({ inverted: true, + centered, icon: 'pictogram-solaranlage-a' })); const btnContainer = createElement('div', ['button-container'], null, container);