const colors = require('tailwindcss/colors')
const appWidth = '1280px'
const sideBarWidth = '220px'
const sideBarWidthMobile = '260px'
const primary = '#1E4BC4'
const secondary = colors.gray[500]

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  future: {
    hoverOnlyWhenSupported: true
  },
  theme: {
    extend: {
      colors: {
        primary,
        secondary
      },
      maxWidth: {
        app: appWidth,
        sidebar: sideBarWidth,
        'sidebar-mobile': sideBarWidthMobile
      },
      width: {
        sidebar: sideBarWidth,
        'sidebar-mobile': sideBarWidthMobile
      },
      margin: {
        sidebar: sideBarWidth,
        'sidebar-mobile': sideBarWidthMobile
      }
    }
  },
  plugins: [require('@tailwindcss/typography'), require('daisyui')],
  daisyui: {
    prefix: 'dui-',
    themes: [
      {
        contexted: {
          ...require('daisyui/src/theming/themes')['light'],
          primary,
          secondary,
          '--btn-text-case': 'uppercase', // set default text transform for buttons
          // accent: '#37CDBE',
          neutral: primary,
          // 'base-100': '#FFFFFF',
          // info: '#3ABFF8',
          // success: '#36D399',
          // warning: '#FBBD23',
          // error: '#F87272'
        }
      }
    ],
    logs: false
  }
}