spawntree
/
ihk24
4
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

theme toggle in storybook

master
FlorianEisenmenger 9 timmar sedan
förälder
a2ee5d7a57
incheckning
ee6bb6463d
5 ändrade filer med 194 tillägg och 7 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  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 Visa fil

@@ -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 <html>-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();
},


+ 153
- 0
gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss Visa fil

@@ -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);
}

+ 2
- 3
gfi-ihk-2024/stories/_global/styles/theme-standard.scss Visa fil

@@ -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,


+ 17
- 0
gfi-ihk-2024/stories/_global/styles/themes.config.js Visa fil

@@ -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 Visa fil

@@ -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-digitalblue' as *;
@use '../../_global/styles/theme-digitalblue' as *;

Skriv Förhandsgranska
Laddar…
Avbryt
Spara