// @flow
import { create } from '@storybook/theming';
import { themes, type PatchworkTheme } from '../../src';
// Need to add a modulemapper for json files in .flowconfig.
// $FlowFixMe - untyped import.
import { version } from '../../package.json';

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

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

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

    // Typography
    fontBase: patchworkTheme.fonts.sans,

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

    brandTitle: `Patchwork ${version}`,
    brandUrl: 'https://github.com/wealthsimple/patchwork',
  });
