From ee6bb6463d19abd4a3cd8dda60dc0268cde7e958 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Mon, 8 Jun 2026 10:41:17 +0200 Subject: [PATCH] theme toggle in storybook --- gfi-ihk-2024/.storybook/preview.js | 21 ++- .../_global/styles/theme-digitalblue.scss | 153 ++++++++++++++++++ .../_global/styles/theme-standard.scss | 5 +- .../stories/_global/styles/themes.config.js | 17 ++ .../stories/_global/styles/themes.scss | 5 +- 5 files changed, 194 insertions(+), 7 deletions(-) create mode 100644 gfi-ihk-2024/stories/_global/styles/themes.config.js diff --git a/gfi-ihk-2024/.storybook/preview.js b/gfi-ihk-2024/.storybook/preview.js index ac1b7b9..4e488df 100644 --- a/gfi-ihk-2024/.storybook/preview.js +++ b/gfi-ihk-2024/.storybook/preview.js @@ -1,3 +1,4 @@ +import { themes, defaultTheme } from '../stories/_global/styles/themes.config'; import '../stories/_global/styles/themes.scss'; import '../stories/_global/styles/main.scss'; import '../stories/_global/styles/fonts.scss'; @@ -60,16 +61,30 @@ export const parameters = { }, } +export const globalTypes = { + theme: { + name: 'Theme', + description: 'Theme für alle Komponenten (data-theme am -Element)', + toolbar: { + title: 'Theme', + icon: 'paintbrush', + items: themes.map(({ name, value }) => ({ value, title: name })), + dynamicTitle: true, + }, + }, +}; + export const initialGlobals = { backgrounds: { value: 'white' - } + }, + theme: defaultTheme, }; export const tags = ['autodocs']; export const decorators = [ - (Story) => { - document.documentElement.setAttribute('data-theme', 'standard'); + (Story, context) => { + document.documentElement.setAttribute('data-theme', context.globals.theme ?? defaultTheme); document.body.classList.add('variant-base'); return Story(); }, diff --git a/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss b/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss index ec3eab9..de2c581 100644 --- a/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss +++ b/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss @@ -1,2 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + [data-theme="digitalblue"] { + // swatches / primary + --swatches-primary-600: #002346; + --swatches-primary-500: #003366; + --swatches-primary-500-rgb: 0, 51, 102; + --swatches-primary-500-o20: rgba(0,51,102,0.2); // #ccd6e0 + --swatches-primary-400: #335C85; + --swatches-primary-300: #B0C4D6; + --swatches-primary-200: #CCD7E6; + --swatches-primary-100: #EDF3FA; + --swatches-primary-100-o30: rgba(237,243,250,0.3); // #fafbfd + --swatches-primary-050: #F5F8FC; + // swatches / secondary + --swatches-secondary-700: #2456D0; + --swatches-secondary-500: #2C62E8; + --swatches-secondary-500-o30: rgba(44,98,232,0.3); // #bfd0f8 + --swatches-secondary-300: #CAD8F9; + --swatches-secondary-200: #EAEFFD; + --swatches-secondary-100: #F3F6FD; + // swatches / neutrals + --swatches-neutrals-white: #FFF; + --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent + // gradient + --gradient-a: var(--swatches-secondary-500); + --gradient-b: var(--swatches-primary-500); + // buttons / secondary + --buttons-secondary-text: var(--swatches-neutrals-white); + --buttons-secondary-background: var(--swatches-secondary-500); + // buttons / tertiary + --buttons-tertiary-text: var(--swatches-primary-500); + --buttons-tertiary-background: var(--swatches-primary-200); + // text / default + --text-default-standard: var(--swatches-primary-500); + --text-default-on-accent: var(--swatches-neutrals-white); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-500); + --text-accent-on-accent: var(--swatches-secondary-300); + --text-accent-on-solid: var(--swatches-primary-200); + // feedback + --feedback-error: #D54048; + --feedback-error-light: #F7D9DA; + --feedback-warning: #FDC600; + --feedback-warning-light: #FFF4CC; + + //--text-accent-default-1-500: #4BA490; + //--text-accent-default-1-100: #DBEDE9; +} + +[data-theme="digitalblue"] .variant-base, +[data-theme="digitalblue"] .variant-base-hover:hover { + --color-background: var(--swatches-neutrals-white); + --color-text: var(--text-default-standard); + --color-text-accent: var(--text-accent-default); + --color-decoration: var(--swatches-secondary-500); + --color-border: var(--swatches-secondary-500); + --color-surface-inset: var(--swatches-primary-500-o20); + --color-button-primary-background: var(--swatches-primary-500); + --color-button-primary-text: var(--swatches-neutrals-white); + --color-button-secondary-background: var(--buttons-secondary-background); + --color-button-secondary-text: var(--buttons-secondary-text); + --color-button-tertiary-background: var(--buttons-tertiary-background); + --color-button-tertiary-text: var(--buttons-tertiary-text); + --color-button-ghost-background: var(--swatches-neutrals-white-o0); + --color-button-ghost-text: var(--color-text); + + --color-text-microsite: var(--color-text); + --color-text-microsite-secondary: var(--color-decoration); +} + +[data-theme="digitalblue"] .variant-subtle-primary, +[data-theme="digitalblue"] .variant-subtle-primary-hover:hover { + --color-background: var(--swatches-primary-100); + --color-text: var(--text-default-standard); + --color-text-accent: var(--text-accent-default); + --color-decoration: var(--swatches-secondary-500); + --color-border: var(--swatches-secondary-500); + --color-surface-inset: var(--swatches-primary-500-o20); + --color-button-primary-background: var(--swatches-primary-500); + --color-button-primary-text: var(--swatches-neutrals-white); + --color-button-secondary-background: var(--buttons-secondary-background); + --color-button-secondary-text: var(--buttons-secondary-text); + --color-button-tertiary-background: var(--swatches-neutrals-white); + --color-button-tertiary-text: var(--buttons-tertiary-text); + --color-button-ghost-background: var(--swatches-neutrals-white-o0); + --color-button-ghost-text: var(--color-text); + + --color-text-microsite: var(--color-text); + --color-text-microsite-secondary: var(--color-decoration); +} + +[data-theme="digitalblue"] .variant-subtle-secondary, +[data-theme="digitalblue"] .variant-subtle-secondary-hover:hover { + --color-background: var(--swatches-secondary-200); + --color-text: var(--text-default-standard); + --color-text-accent: var(--text-accent-default); + --color-decoration: var(--swatches-secondary-500); + --color-border: var(--swatches-secondary-500); + --color-surface-inset: var(--swatches-secondary-500-o30); + --color-button-primary-background: var(--swatches-primary-500); + --color-button-primary-text: var(--swatches-neutrals-white); + --color-button-secondary-background: var(--buttons-secondary-background); + --color-button-secondary-text: var(--buttons-secondary-text); + --color-button-tertiary-background: var(--swatches-neutrals-white); + --color-button-tertiary-text: var(--buttons-tertiary-text); + --color-button-ghost-background: var(--swatches-neutrals-white-o0); + --color-button-ghost-text: var(--color-text); + + --color-text-microsite: var(--color-text); + --color-text-microsite-secondary: var(--color-decoration); +} + +[data-theme="digitalblue"] .variant-solid, +[data-theme="digitalblue"] .variant-solid-hover:hover { + --color-background: var(--swatches-primary-500); + --color-text: var(--swatches-neutrals-white); + --color-text-accent: var(--text-accent-on-solid); + --color-decoration: var(--color-text-accent); + --color-border: var(--swatches-secondary-500); + --color-surface-inset: var(--swatches-primary-100-o30); + --color-button-primary-background: var(--swatches-neutrals-white); + --color-button-primary-text: var(--swatches-primary-500); + --color-button-secondary-background: var(--buttons-secondary-background); + --color-button-secondary-text: var(--buttons-secondary-text); + --color-button-tertiary-background: var(--buttons-tertiary-background); + --color-button-tertiary-text: var(--buttons-tertiary-text); + --color-button-ghost-background: var(--swatches-neutrals-white-o0); + --color-button-ghost-text: var(--color-text); + + --color-text-microsite: var(--color-text); + --color-text-microsite-secondary: var(--color-decoration); +} + +[data-theme="digitalblue"] .variant-accent, +[data-theme="digitalblue"] .variant-accent-hover:hover { + --color-background: var(--swatches-secondary-500); + --color-text: var(--text-default-on-accent); + --color-text-accent: var(--text-accent-on-accent); + --color-decoration: var(--color-text-accent); + --color-border: var(--swatches-secondary-500); + --color-surface-inset: var(--swatches-primary-500-o20); + --color-button-primary-background: var(--swatches-primary-500); + --color-button-primary-text: var(--swatches-neutrals-white); + --color-button-secondary-background: var(--swatches-neutrals-white); + --color-button-secondary-text: var(--text-accent-default); + --color-button-tertiary-background: var(--buttons-tertiary-background); + --color-button-tertiary-text: var(--buttons-tertiary-text); + --color-button-ghost-background: var(--swatches-neutrals-white-o0); + --color-button-ghost-text: var(--color-text); + + --color-text-microsite: var(--color-text); + --color-text-microsite-secondary: var(--color-decoration); } diff --git a/gfi-ihk-2024/stories/_global/styles/theme-standard.scss b/gfi-ihk-2024/stories/_global/styles/theme-standard.scss index 01a8c5c..74511f2 100644 --- a/gfi-ihk-2024/stories/_global/styles/theme-standard.scss +++ b/gfi-ihk-2024/stories/_global/styles/theme-standard.scss @@ -45,9 +45,8 @@ --feedback-warning: #FDC600; --feedback-warning-light: #FFF4CC; - - --text-accent-default-1-500: #4BA490; - --text-accent-default-1-100: #DBEDE9; + //--text-accent-default-1-500: #4BA490; + //--text-accent-default-1-100: #DBEDE9; } [data-theme="standard"] .variant-base, diff --git a/gfi-ihk-2024/stories/_global/styles/themes.config.js b/gfi-ihk-2024/stories/_global/styles/themes.config.js new file mode 100644 index 0000000..52649dd --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/themes.config.js @@ -0,0 +1,17 @@ +// Registry of available themes for the Storybook theme switcher. +// `value` is written to the `data-theme` attribute on and must match +// the `[data-theme="..."]` selector used in the corresponding `file`. +export const themes = [ + { + name: 'Standard', + value: 'standard', + file: 'theme-standard.scss', + }, + { + name: 'Digital Blue', + value: 'digitalblue', + file: 'theme-digitalblue.scss', + }, +]; + +export const defaultTheme = themes[0].value; diff --git a/gfi-ihk-2024/stories/_global/styles/themes.scss b/gfi-ihk-2024/stories/_global/styles/themes.scss index 8e0d42c..dbaf2c7 100644 --- a/gfi-ihk-2024/stories/_global/styles/themes.scss +++ b/gfi-ihk-2024/stories/_global/styles/themes.scss @@ -1,2 +1,5 @@ +// All themes registered in `themes.config.js` must be imported here so their +// `[data-theme="..."]` rules are present in the bundle and can be switched at +// runtime by toggling the `data-theme` attribute on (see preview.js). @use '../../_global/styles/theme-standard' as *; -//@use '../../_global/styles/theme-digitalblue' as *; +@use '../../_global/styles/theme-digitalblue' as *;