import icons from '../icons'
import { Theme } from '../index'

import { boxSizes } from './box-sizes'
import { buttonThemes } from './button-themes'
import { colors } from './colors'

const controlStyles = {
  fill: 'surfaceTertiary',
  stroke: 'separatorSecondary',
  focusStroke: 'blue-5',
  checkedFill: 'primary-light',
  checkedStroke: 'primary',
}

const defaultTheme: Theme = {
  boxSizes,
  colors,
  icons,
  breakpoints: { xs: 480, sm: 600, md: 720, lg: 960, xl: 1200 },
  button: { themes: buttonThemes },
  calendar: { weekStartsOn: 0 },
  checkbox: controlStyles,
  radio: controlStyles,
  elevations: [
    '0 2px 5px rgba(219,219,219,0.3)',
    '0 4px 12px rgba(0,0,0,0.12)',
    '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
    '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
    '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
    '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
  ],
  fontSizes: [30, 21, 18, 16, 14, 12, 10],
  lineHeights: [40, 32, 24, 24, 20, 16, 16],
  group: { radius: 3 },
  spinner: {
    color: 'primary',
    sizes: { xxs: 1.5, xs: 1.75, sm: 2, md: 2.5, lg: 3, xl: 5, xxl: 8 },
    thickness: { xxs: 3, xs: 3, sm: 3, md: 4, lg: 5, xl: 7, xxl: 9 },
    trackColor: 'primary-lighter',
  },
}

export default defaultTheme