// @flow
import { create } from '@storybook/theming';
import { type PatchworkTheme } from '../../../..';

export const deriveStorybookTheme = (patchworkTheme: PatchworkTheme) =>
  create({
    base: 'light',

    colorPrimary: patchworkTheme.colorPalette['brand-primary-fg'],
    colorSecondary: patchworkTheme.colorPalette['brand-secondary-fg'],

    // UI
    appBg: patchworkTheme.colorPalette.white,
    appContentBg: patchworkTheme.colorPalette.background,
    appBorderColor: patchworkTheme.colorPalette.background,
    appBorderRadius: 6,

    // Typography
    fontBase: patchworkTheme.fonts.sans,
    fontSize: '16px',

    // Text colors
    textColor: patchworkTheme.colorPalette['greyscale-black'],
    textInverseColor: patchworkTheme.colorPalette.white,

    // Toolbar default and active colors
    barTextColor: patchworkTheme.colorPalette['greyscale-black'],
    barSelectedColor: patchworkTheme.colorPalette['greyscale-medium'],
    barBg: patchworkTheme.colorPalette.white,

    // Form colors
    inputBg: patchworkTheme.colorPalette.white,
    inputBorder: patchworkTheme.colorPalette['greyscale-medium'],
    inputTextColor: patchworkTheme.colorPalette['greyscale-dark'],
    inputBorderRadius: 6,

    // STORYBOOK_TITLE is injected by webpack
    /* eslint-disable no-undef */
    // $FlowFixMe
    brandTitle: STORYBOOK_TITLE,
    /* eslint-enable no-undef */
    brandUrl: 'https://github.com/wealthsimple/patchwork',
  });
