const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
//   mode: "jit",
   purge: [
    './**/*.js',
    '../lib/*_web/**/*.*ex'
   ],
   darkMode: 'media',
   theme: {
       colors: {
           connection: colors.indigo,
           connect: colors.red,
           punch: colors.yellow,
           touch: colors.green,
           pulse: colors.pink,
           transparent: 'transparent',
           current: 'currentColor',
           black: colors.black,
           white: colors.white,
           gray: colors.warmGray,
           indigo: colors.indigo,
           red: colors.rose,
           yellow: colors.amber,
           blue: colors.blue,
           purple: colors.purple
       },
       extend: {
           typography: (theme) => ({
                light: {
                    css: [
                    {
                        color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
                        '[class~="lead"]': {
                        color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
                        },
                        a: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        strong: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        'ol > li::before': {
                        color: theme('colors.gray.400', defaultTheme.colors.gray[400]),
                        },
                        'ul > li::before': {
                        backgroundColor: theme('colors.gray.600', defaultTheme.colors.gray[600]),
                        },
                        hr: {
                        borderColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
                        },
                        blockquote: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        borderLeftColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
                        },
                        h1: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        h2: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        h3: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        h4: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        'figure figcaption': {
                        color: theme('colors.gray.400', defaultTheme.colors.gray[400]),
                        },
                        code: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        'a code': {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        },
                        pre: {
                        color: theme('colors.gray.700', defaultTheme.colors.gray[700]),
                        },
                        thead: {
                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
                        borderBottomColor: theme('colors.gray.600', defaultTheme.colors.gray[600]),
                        },
                        'tbody tr': {
                        borderBottomColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
                        },
                    },
                    ],
                },
           }),
       },
   },
   variants: {
       extend: {
           typography: ["dark"],
           borderWidth: ['first'],
       }
   },
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio')
    ],
 }