import { BrandingOptions } from 'admin-bro'

export const theme: BrandingOptions['theme'] = {
  VariantValues: [
    'primary',
    'danger',
    'success',
    'info',
    'secondary',
    'default',
    'light',
  ],
  colors: {
    primary100: '#4268F6',
    primary80: '#6483F8',
    primary60: '#879FFA',
    primary40: '#A9BAFA',
    primary20: '#CBD5FD',
    accent: '#38CAF1',
    love: '#e6282b',
    grey100: '#F6F7FB',
    grey80: '#A9AABC',
    grey60: '#898A9A',
    grey40: '#C0C0CA',
    grey20: '#303B62',
    white: '#192035',
    errorDark: '#DE405D',
    error: '#FF4567',
    errorLight: '#660040',
    successDark: '#32A887',
    success: '#70C9B0',
    successLight: '#008340',
    infoDark: '#4268F6',
    info: '#879FFA',
    infoLight: '#CBD5FD',
    filterBg: '#898A9A',
    hoverBg: '#535B8E',
    /* border: '#DDE1E5', */
    inputBorder: '#A9AABC',
    separator: '#A9AABC',
    highlight: '#20273E',
    filterInputBorder: 'rgba(255,255,255,0.8)',
    filterDisabled: 'rgba(83,91,142,0.05)',
    bg: '#20273E',
    defaultText: '#FFFFFF',
    lightText: '#A9AABC',
    border: '#2E324A',
    borderOnDark: '#2E324A',
    innerBck: '#192035',
    darkBck: '#20273E',
    lightBck: '#485899',
    superLightBack: '#303B62',
    inputBck: '#192035',
    lightSuccess: '#008340',
    lightError: '#660040',
  },
  lineHeights: {
    xs: '10px',
    sm: '12px',
    default: '16px',
    md: '16px',
    lg: '24px',
    xl: '32px',
    xxl: '40px',
  },
  fontWeights: {
    // @ts-ignore
    lighter: 200,
    // @ts-ignore
    light: 300,
    // @ts-ignore
    normal: 400,
    // @ts-ignore
    bold: 500,
    // @ts-ignore
    bolder: 900,
  },
  fontSizes: {
    xs: '10px',
    sm: '12px',
    default: '14px',
    md: '14px',
    lg: '16px',
    xl: '18px',
    h4: '24px',
    h3: '28px',
    h2: '32px',
    h1: '40px',
  },
  sizes: {
    navbarHeight: '64px',
    sidebarWidth: '300px',
    maxFormWidth: '740px',
  },
  space: {
    xs: '2px',
    sm: '4px',
    default: '8px',
    md: '8px',
    lg: '16px',
    xl: '24px',
    xxl: '32px',
    x3: '48px',
    x4: '64px',
    x5: '80px',
    x6: '128px',
  },
  // @ts-ignore
  font: "'Roboto', sans-serif",
  shadows: {
    login: '0 15px 24px 0 rgba(137,138,154,0.15)',
    cardHover: '0 4px 12px 0 rgba(137,138,154,0.4)',
    drawer: '-2px 0 8px 0 rgba(137,138,154,0.2)',
    card: '0 1px 6px 0 rgba(137,138,154,0.4)',
    inputFocus: '0 2px 4px 0 rgba(135,159,250,0.4)',
    buttonFocus: '0 4px 6px 0 rgba(56,202,241,0.3)',
  },
  borders: {
    input: '1px solid #C0C0CA',
    filterInput: ' 1px rgba(255,255,255,0. solid15)',
    bg: '1px solid #20273E',
    default: '1px solid #2E324A',
  },
  breakpoints: ['577px', '769px', '1024px', '1324px'],
  borderWidths: {
    default: '0px',
  }
}