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: { argTypesRegex: "^on[A-Z].*" },
  viewport: { viewports: customViewports },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'white',
    values: [
      {
        name: 'white',
        value: '#FFFFFF',
      },
      {
        name: 'primary',
        value: '#003366',
      },
      {
        name: 'secondary',
        value: '#56BD66',
      },
      {
        name: 'lightblue',
        value: '#E3EBF5',
      },
    ],
  },
}