// @flow
import type { PatchworkTheme } from './theme.types';
import { createWhitelabelTheme } from './theme.utils';

// Atlas: start with a basic whitelabel to generate a set of
// defaults.
export const atlas: PatchworkTheme = createWhitelabelTheme({
  primary: '#5267d6',
  secondary: '#7eb0e4',
  name: 'atlas',
});

// Hand tune the theme afterwards.
atlas.colorPalette.background = '#ebf0f6';
atlas.colorPalette['greyscale-black'] = '#000000';
atlas.colorPalette['greyscale-dark'] = '#3E3E3F';
atlas.colorPalette['greyscale-medium'] = '#8A8A8A';
atlas.colorPalette['greyscale-light'] = '#E4E4E5';

atlas.colorPalette['brand-primary-fg'] = '#283CA8';
atlas.colorPalette['brand-primary-base'] = '#5267D6';
atlas.colorPalette['brand-primary-bg'] = '#EBF0F6';

atlas.colorPalette['brand-secondary-fg'] = '#283CA8';
atlas.colorPalette['brand-secondary-base'] = '#5267D6';
atlas.colorPalette['brand-secondary-bg'] = '#EBF0F6';

atlas.colorPalette['error-fg'] = '#BF0711';
atlas.colorPalette['error-bg'] = '#FBEAE5';

atlas.colorPalette['success-fg'] = '#0D6837';
atlas.colorPalette['success-bg'] = '#E3F1DF';

atlas.colorPalette['info-fg'] = '#084E8A';
atlas.colorPalette['info-bg'] = '#EBF5FA';

atlas.colorPalette['aux-1'] = '#CAD0F2';
atlas.colorPalette['aux-3'] = '#8A6116';
atlas.colorPalette['aux-4'] = '#FCF1CD';

// Atlas's display is information dense and less concerned with
// a feeling of simplicity than our external facing branding.
// We can use a condensed space scale to achieve this.
atlas.spacing = {
  s1: '7px',
  s2: '14px',
  s3: '21px',
  s4: '28px',
  s5: '35px',
  s6: '42px',
  s7: '49px',
};

atlas.fonts = {
  sans: "'OpenSans', 'Helvetica', sans-serif",
};

atlas.typescale = {
  f0: '12px',
  f1: '14px',
  f2: '16px',
  f3: '18px',
  f4: '20px',
  f5: '27px',
  f6: '34px',
  f7: '41px',
  f8: '48px',
};

atlas.cardBorderRadius = '5px';

atlas.defaultTextColor = 'greyscale-black';
