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'; import '../stories/_global/styles/icons.scss'; import '../stories/_global/styles/pictograms.scss'; import '../stories/_global/styles/pictograms-mapper.scss'; import '../stories/_global/styles/typography.scss'; import '../stories/_global/styles/grid.scss'; import '../stories/_global/styles/storybook-preview.scss'; import '../stories/_global/scripts/ihk'; const customViewports = { Phone: { name: 'Phone', styles: { width: '380px', height: '720px', }, }, Tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px', } } }; export const parameters = { layout: 'padded', actions: {}, viewport: { options: customViewports }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, backgrounds: { options: { white: { name: 'white', value: '#FFFFFF', }, primary: { name: 'primary', value: '#003366', }, secondary: { name: 'secondary', value: '#56BD66', }, lightblue: { name: 'lightblue', value: '#E3EBF5', } } }, } 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, context) => { document.documentElement.setAttribute('data-theme', context.globals.theme ?? defaultTheme); document.body.classList.add('variant-base'); return Story(); }, ];