spawntree
/
ihk24
4
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

theme toggle in storybook

master
FlorianEisenmenger 14 godzin temu
rodzic
a2ee5d7a57
commit
ee6bb6463d
5 zmienionych plików z 194 dodań i 7 usunięć
Zunifikowany widok
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +18
    -3
      gfi-ihk-2024/.storybook/preview.js
  2. +153
    -0
      gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss
  3. +2
    -3
      gfi-ihk-2024/stories/_global/styles/theme-standard.scss
  4. +17
    -0
      gfi-ihk-2024/stories/_global/styles/themes.config.js
  5. +4
    -1
      gfi-ihk-2024/stories/_global/styles/themes.scss

+ 18
- 3
gfi-ihk-2024/.storybook/preview.js Wyświetl plik

@@ -1,3 +1,4 @@
import { themes, defaultTheme } from '../stories/_global/styles/themes.config';
import '../stories/_global/styles/themes.scss'; import '../stories/_global/styles/themes.scss';
import '../stories/_global/styles/main.scss'; import '../stories/_global/styles/main.scss';
import '../stories/_global/styles/fonts.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 <html>-Element)',
toolbar: {
title: 'Theme',
icon: 'paintbrush',
items: themes.map(({ name, value }) => ({ value, title: name })),
dynamicTitle: true,
},
},
};

export const initialGlobals = { export const initialGlobals = {
backgrounds: { backgrounds: {
value: 'white' value: 'white'
}
},
theme: defaultTheme,
}; };
export const tags = ['autodocs']; export const tags = ['autodocs'];


export const decorators = [ 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'); document.body.classList.add('variant-base');
return Story(); return Story();
}, },


+ 153
- 0
gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss Wyświetl plik

@@ -1,2 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="digitalblue"] { [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);
} }

+ 2
- 3
gfi-ihk-2024/stories/_global/styles/theme-standard.scss Wyświetl plik

@@ -45,9 +45,8 @@
--feedback-warning: #FDC600; --feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC; --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, [data-theme="standard"] .variant-base,


+ 17
- 0
gfi-ihk-2024/stories/_global/styles/themes.config.js Wyświetl plik

@@ -0,0 +1,17 @@
// Registry of available themes for the Storybook theme switcher.
// `value` is written to the `data-theme` attribute on <html> 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;

+ 4
- 1
gfi-ihk-2024/stories/_global/styles/themes.scss Wyświetl plik

@@ -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 <html> (see preview.js).
@use '../../_global/styles/theme-standard' as *; @use '../../_global/styles/theme-standard' as *;
//@use '../../_global/styles/theme-digitalblue' as *;
@use '../../_global/styles/theme-digitalblue' as *;

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz