const schemeColors = require('./tailwindScheme')

const tailwindConfig = {
  theme: {
    colors: schemeColors,
    borderColor: schemeColors,
    backgroundColor: schemeColors,
    screens: {
      xs: 0,
      sm: '680px',
      md: '960px',
      lg: '1264px',
      xl: '1680px',
      xxl: '1900px'
    },
    borderRadius: {
      none: '0',
      0.2: '0.2rem',
      xs: '0.125rem',
      sm: '0.25rem',
      md: '0.375rem',
      lg: '0.5rem',
      xl: '0.75rem',
      full: '9999px',
      tag: '2rem',
      DEFAULT: '0.25rem'
    },
    boxShadow: {
      none: 'none',
      card: '0px 0px 5px var(--card-shadow-color)',
      'table-header': '0 1px 0 0 var(--table-shadow-color)',
      'table-row': '0 -1px 0 0 var(--table-shadow-color)',
      'focus-outer': '0 0 3px var(--active-elements--pressed)',
      'focus-outer-off': '0 0 3px var(--inactive-elements--pressed)',
      'focus-outer-primary': '0 0 3px var(--primary-actions--pressed)',
      'focus-outer-secondary': '0 0 3px var(--secondary-actions--pressed)',
      'focus-outer-destructive': '0 0 3px var(--destructive-actions--pressed)',
      'focus-inner': 'inset 0 0 3px var(--active-elements--pressed)',
      focus: '0 0 3px var(--active-elements--pressed), inset 0 0px 3px var(--active-elements--pressed)',
      hover: '0 0 3px var(--active-elements--focus), inset 0 0px 3px var(--active-elements--focus)',
      'focus-primary': '0 0 3px var(--primary-actions--pressed), inset 0 0px 3px var(--primary-actions--pressed)',
      'hover-primary': '0 0 3px var(--primary-actions--focus), inset 0 0px 3px var(--primary-actions--focus)',
      'focus-secondary': '0 0 3px var(--secondary-actions--pressed), inset 0 0px 3px var(--secondary-actions--pressed)',
      'hover-secondary': '0 0 3px var(--secondary-actions--focus), inset 0 0px 3px var(--secondary-actions--focus)',
      'focus-destructive': '0 0 3px var(--destructive-actions--pressed), inset 0 0px 3px var(--destructive-actions--pressed)',
      'hover-destructive': '0 0 3px var(--destructive-actions--focus), inset 0 0px 3px var(--destructive-actions--focus)',
      'hover-inner': 'inset 0 0 3px var(--active-elements--focus)',
      'hover-outer': '0 0 3px var(--active-elements--focus)',
      'hover-outer-off': '0 0 3px var(--inactive-elements--focus)',
      'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
      'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
      'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)'
    },
    fill: schemeColors,
    fontSize: {
      xxs: '0.65rem',
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '2rem',
      '4xl': '2.25rem',
      '5xl': '2.5rem'
    },
    stroke: {
      'active-elements': 'var(--active-elements)',
      current: 'currentColor'
    },
    extend: {
      inset: {
        unset: 'unset'
      },
      minWidth: {
        0: '0px',
        full: '100%',
        min: 'min-content',
        max: 'max-content',
        auto: 'auto',
        xs: '20rem',
        sm: '24rem',
        md: '28rem',
        lg: '32rem',
        xl: '36rem',
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%',
        screen: '100vw'
      },
      minHeight: {
        0: '0px',
        2: '2rem',
        6.5: '1.625rem',
        8: '2rem',
        full: '100%',
        screen: '100vh',
        inherit: 'inherit'
      },
      maxWidth: {
        '1/2': '50%',
        screen: '100vw'
      },
      maxHeight: {
        inherit: 'inherit'
      },
      width: {
        px: '1px',
        'full-row-md': 'calc(100% + 2rem)',
        1.5: '0.25rem'
      },
      padding: {
        0.156: '0.156rem',
        0.5: '0.125rem'
      },
      margin: {
        0.1: '0.1rem',
        0.125: '0.125rem',
        0.375: '0.375rem',
        20: '5rem'
      },
      spacing: {
        0: '0px',
        1: '0.25rem',
        1.5: '0.375rem',
        2: '0.5rem',
        2.5: '0.625rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        7: '1.75rem',
        8: '2rem',
        9: '2.25rem',
        10: '2.5rem',
        11: '2.75rem',
        12: '3rem',
        13: '3.25rem',
        14: '3.5rem',
        15: '3.75rem',
        16: '4rem',
        px: '1px',
        unset: 'unset'
      },
      zIndex: {
        1: 1
      },
      height: {
        px: '1px',
        0.5: '2px',
        1.5: '0.25rem',
        'fit-content': 'fit-content',
        7.5: '1.875rem'
      },
      rotate: {
        135: '135deg',
        225: '225deg'
      },
      boxShadow: {
        'view-switcher': '0px 0px 2px rgba(67, 67, 67, 0.15)',
        'vertical-tab-scroll': 'inset 0 0 8px white',
        'vertical-tab-item': '0 1px 6px #d1d5df',
        table: '0px 0px 5px #E0E2E5',
        'table-row': '0 10px 10px -12px #bec2c9'
      },
      borderRadius: {
        0.875: '0.875rem',
        'horizontal-tab-wrapper': '0px 6px 6px 6px',
        'horizontal-tab-item': '6px 6px 0px 0px'
      },
      lineHeight: {
        '40px': '40px'
      }
    }
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  }
}

module.exports = tailwindConfig
