// @gautamankoji
import defaultTheme from 'tailwindcss/defaultTheme';

const colors = {
  transparent: 'transparent',
  white: 'hsl(0, 0%, 100%)',
  grey: 'hsl(0, 0%, 50%)',
  black: 'hsl(0, 0%, 0%)',
  light: {
    l1: 'hsl(0, 0%, 90%)',
    l2: 'hsl(0, 0%, 80%)',
    l3: 'hsl(0, 0%, 70%)',
    l4: 'hsl(0, 0%, 60%)',
    l5: 'hsl(0, 0%, 50%)',
    l6: 'hsl(0, 0%, 40%)',
    l7: 'hsl(0, 0%, 30%)',
    l8: 'hsl(0, 0%, 20%)',
    l9: 'hsl(0, 0%, 10%)',
  },
  dark: {
    l1: 'hsl(0, 0%, 20%)',
    l2: 'hsl(0, 0%, 30%)',
    l3: 'hsl(0, 0%, 40%)',
    l4: 'hsl(0, 0%, 50%)',
    l5: 'hsl(0, 0%, 60%)',
    l6: 'hsl(0, 0%, 70%)',
    l7: 'hsl(0, 0%, 80%)',
    l8: 'hsl(0, 0%, 90%)',
    l9: 'hsl(0, 0%, 95%)',
  },
  'semi-10': 'hsla(0, 0%, 0%, 0.1)',
  'semi-20': 'hsla(0, 0%, 0%, 0.2)',
  'semi-25': 'hsla(0, 0%, 0%, 0.25)',
  'semi-30': 'hsla(0, 0%, 0%, 0.3)',
  'semi-40': 'hsla(0, 0%, 0%, 0.4)',
  'semi-50': 'hsla(0, 0%, 0%, 0.5)',
  'semi-60': 'hsla(0, 0%, 0%, 0.6)',
  'semi-70': 'hsla(0, 0%, 0%, 0.7)',
  'semi-75': 'hsla(0, 0%, 0%, 0.75)',
  'semi-80': 'hsla(0, 0%, 0%, 0.8)',
  'semi-90': 'hsla(0, 0%, 0%, 0.9)',
};

module.exports = {
  darkMode: 'class', // Use class-based dark mode
  theme: {
    extend: {
      colors: {
        ...colors,
        background: colors.white,
        'background-dark': colors.black,
        text: colors.black,
        'text-dark': colors.white,
        ...colors.light,
        ...colors.dark,
      },
      screens: {
        sm: '568px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
      fontFamily: {
        'sans-serif': ['Arial', ...defaultTheme.fontFamily.sans],
        serif: ['Georgia', ...defaultTheme.fontFamily.serif],
      },
      fontSize: {
        '4xs': '.375rem',
        '3xs': '.5rem',
        '2xs': '.625rem',
        xs: '.75rem',
        sm: '.875rem',
        base: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
      },
      fontWeight: {
        hairline: 100,
        thin: 200,
        light: 300,
        book: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
        extrabold: 800,
        black: 900,
      },
      lineHeight: {
        none: 1,
        tight: 1.25,
        snug: 1.375,
        normal: 1.5,
        relaxed: 1.625,
        loose: 2,
      },
      letterSpacing: {
        condensed: '-.15em',
        tightest: '-.1em',
        tighter: '-.05em',
        tight: '-.025em',
        normal: '0',
        wide: '.025em',
        wider: '.05em',
        widest: '.1em',
        extended: '.15em',
      },
      borderRadius: {
        none: '0',
        sm: '2px',
        DEFAULT: '3px',
        lg: '5px',
        full: '9999px',
      },
      width: {
        auto: 'auto',
        px: '1px',
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        8: '2rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        24: '6rem',
        32: '8rem',
        48: '12rem',
        64: '16rem',
        '1/2': '50%',
        '1/3': '33.33333%',
        '2/3': '66.66667%',
        '1/4': '25%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.66667%',
        '5/6': '83.33333%',
        'gr-small': '38.46154%',
        'gr-large': '61.53846%',
        full: '100%',
        screen: '100vw',
      },
      height: {
        auto: 'auto',
        px: '1px',
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        8: '2rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        24: '6rem',
        32: '8rem',
        48: '12rem',
        64: '16rem',
        'gr-small': '38.46154%',
        'gr-large': '61.53846%',
        full: '100%',
        screen: '100vh',
      },
      minWidth: {
        0: '0',
        sm: '568px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        full: '100%',
        screen: '100vw',
      },
      minHeight: {
        0: '0',
        full: '100%',
        screen: '100vh',
      },
      maxWidth: {
        sm: '568px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        full: '100%',
        screen: '100vw',
      },
      maxHeight: {
        full: '100%',
        screen: '100vh',
      },
      padding: {
        px: '1px',
        0: '0',
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        8: '2rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        20: '5rem',
        24: '6rem',
        32: '8rem',
        40: '10rem',
      },
      margin: {
        auto: 'auto',
        px: '1px',
        0: '0',
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        8: '2rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        20: '5rem',
        24: '6rem',
        32: '8rem',
        40: '10rem',
      },
      boxShadow: {
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)',
        inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
        outline: '0 0 0 3px rgba(52,144,220,0.5)',
        none: 'none',
      },
      zIndex: {
        auto: 'auto',
        0: 0,
        10: 10,
        20: 20,
        30: 30,
        40: 40,
        50: 50,
      },
      opacity: {
        0: '0',
        25: '.25',
        50: '.5',
        75: '.75',
        100: '1',
      },
      fill: {
        current: 'currentColor',
      },
      stroke: {
        current: 'currentColor',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss/container')({
      // center: true,
      // padding: '1rem',
    }),
  ],
  corePlugins: {
    objectFit: false,
    objectPosition: false,
  },
  variants: {
    extend: {
      backgroundColor: ['responsive', 'hover', 'focus', 'dark'],
      borderColor: ['responsive', 'hover', 'focus', 'dark'],
      borderWidth: ['responsive'],
      textColor: ['responsive', 'hover', 'focus', 'dark'],
      textDecoration: ['responsive', 'hover', 'focus'],
      fontSize: ['responsive'],
      margin: ['responsive'],
      padding: ['responsive'],
      boxShadow: ['responsive', 'hover', 'focus'],
      outline: ['focus'],
      display: ['responsive'],
      zIndex: ['responsive'],
      opacity: ['responsive'],
      cursor: ['responsive'],
    },
  },
  prefix: '',
  important: false,
  separator: ':',
};