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/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 initialGlobals = {
  backgrounds: {
    value: 'white'
  }
};
export const tags = ['autodocs'];

export const decorators = [
  (Story) => {
    document.documentElement.setAttribute('data-theme', 'standard');
    document.body.classList.add('variant-base');
    return Story();
  },
];