const tinycolor = require('tinycolor2')

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    experimental: {
        applyComplexClasses: true,
    },
    purge: {
        mode: 'layers',
        layers: ['components', 'utilities'],
        content: [
            './public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
            './public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.js',
            './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.vue',
            './public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
        ],
    },
    theme: {
        fontFamily: {
            'sans': [ 'Lato', 'sans-serif' ],
        },
        customForms: theme => ({
            default: {
                'input, textarea, select, multiselect': {
                    paddingTop: theme('spacing.4'),
                    paddingBottom: theme('spacing.4'),
                    paddingLeft: theme('spacing.8'),
                    paddingRight: theme('spacing.8'),
                    borderColor: theme('colors.gray.500'),
                    borderRadius: undefined,
                    '&:focus': {
                        borderColor: undefined,
                        boxShadow: undefined,
                    },
                },
                'checkbox, radio': {
                    width: theme('spacing.6'),
                    height: theme('spacing.6'),
                    backgroundColor: theme('colors.white'),
                    borderColor: undefined,
                    '&:focus': {
                        borderColor: undefined,
                        boxShadow: undefined,
                    },
                    '&:checked': {
                        backgroundColor: theme('colors.ep.secondary'),
                        boxShadow: undefined,
                    },
                },
            },
            error: {
                'input, textarea, select, multiselect': {
                    color: theme('colors.red.500'),
                    borderColor: theme('colors.red.500'),
                }
            },
        }),
        extend: {
            colors: {
                'overlay': {
                    'white': tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
                },
                'ep': {
                    'primary': '#009fe3',
                    'secondary': '#f0bc44',
                    'primary-light': '#009fff',
                    'primary-10': tinycolor('#009fe3').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#009fe3').setAlpha(0.8).toRgbString(),
                },
                'sbw': {
                    'primary': '#f0bc44',
                    'secondary': '#ee525a',
                    'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                },
                'snz': {
                    'primary': '#82C3C6',
                    'secondary': '#f9c33d',
                    'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
                },
                'uch': {
                    'primary': '#b5e400',
                    'secondary': '#19a3dc',
                    'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
                },
            },
            inset: {
                '100': '100%',
                '1/2': '50%',
            },
            zIndex: {
                '100': 100,
            },
        },
    },
    variants: {},
    plugins: [
        require('@tailwindcss/custom-forms'),
    ],
    corePlugins: {
        container: false,
    }
}