const schemeColors = require('./src/core/theme/tailwindScheme.js')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [ './src/**/*.{vue,js,ts,scss}', './documentation/**/*.{vue,scss}' ],
    plugins: [
        require('tailwindcss/plugin')(({ addUtilities }) => {
            addUtilities({
                '.justify-normal': {
                    justifyContent: 'normal'
                }
            })
        })
    ],
    theme: {
        fontFamily: {
            main: [ 'Inter', 'system-ui', 'sans-serif' ],
            heebo: [ 'Heebo', 'sans-serif' ],
            inter: [
                'Inter',
                'sans-serif'
            ]
        },
        screens: {
            sm: '680px',
            md: '960px',
            lg: '1264px',
            xl: '1680px',
            xxl: '1900px'
        },
        colors: schemeColors,
        borderColor: schemeColors,
        backgroundColor: schemeColors,
        boxShadow: {
            none: 'none',
            card: '0px 0px 5px var(--card-shadow-color)',
            'card-no-active': '0px 0px 5px var(--inactive-elements)',
            'table-header': '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-outer-success': '0 0 3px var(--success-actions--pressed)',
            'focus-outer-warning': '0 0 3px var(--warning-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)',
            'focus-success': '0 0 3px var(--success-actions--pressed), inset 0 0px 3px var(--success-actions--pressed)',
            'hover-success': '0 0 3px var(--success-actions--focus), inset 0 0px 3px var(--success-actions--focus)',
            'focus-warning': '0 0 3px var(--warning-actions--pressed), inset 0 0px 3px var(--warning-actions--pressed)',
            'hover-warning': '0 0 3px var(--warning-actions--focus), inset 0 0px 3px var(--warning-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-active': '0 0 3px var(--active-elements--focus)',
            'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
            'hover-outer-primary-alternative': '0 0 3px var(--primary-alternative-actions--focus)',
            'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
            'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)',
            'hover-outer-success': '0 0 3px var(--success-actions--focus)',
            'hover-outer-warning': '0 0 3px var(--warning-actions--focus)',
            'view-switcher': '0px 0px 4px var(--overlay-bg)',
            'vertical-tab-scroll': 'inset 0 0 8px (--light-bg)',
            'vertical-tab-item': '0 1px 6px var(--card-shadow-color)',
            'vertical-tab-item-hover': '0 1px 6px var(--active-elements--focus)',
            table: '0px 0px 5px var(--card-shadow-color)',
            'table-row': '0 10px 10px -12px var(--table-shadow-color)'
        },
        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',
            '6xl': '3rem'
        },
        fill: schemeColors,
        stroke: {
            'active-elements': 'var(--active-elements)',
            current: 'currentColor'
        },
        borderRadius: {
            none: '0',
            xs: '0.125rem',
            sm: '0.25rem',
            md: '0.375rem',
            lg: '0.5rem',
            xl: '0.75rem',
            xxl: '0.875rem',
            full: '9999px',
            tag: '2rem',
            DEFAULT: '0.25rem',
            'horizontal-tab-wrapper': '0px 6px 6px 6px',
            'horizontal-tab-item': '6px 6px 0px 0px'
        },
        extend: {
            inset: {
                unset: 'unset'
            },
            minWidth: {
                auto: 'auto',
                xs: '20rem',
                sm: '24rem',
                md: '28rem',
                lg: '32rem',
                xl: '36rem',
                '1/4': '25%',
                '1/2': '50%',
                '3/4': '75%',
                screen: '100vw'
            },
            minHeight: {
                2: '2rem',
                5.5: '1.375rem',
                6.5: '1.625rem',
                8: '2rem',
                screen: '100vh',
                inherit: 'inherit'
            },
            maxWidth: {
                '1/2': '50%',
                screen: '100vw'
            },
            maxHeight: {
                inherit: 'inherit'
            },
            height: {
                0.5: '2px',
                'fit-content': 'fit-content',
                'modal-wizard': '680px'
            },
            spacing: {
                15: '3.75rem',
                unset: 'unset'
            },
            width: {},
            lineHeight: {
                '40px': '40px'
            },
            zIndex: {
                1: 1,
                5: 5
            },
            rotate: {
                135: '135deg',
                225: '225deg'
            }
        }
    },
    safelist: [
        // Essential text sizes
        {
            pattern: /text-(xxs|xs|sm|base|lg|2xl|3xl|4xl|5xl|6xl)/,
            variants: [ 'hover', 'focus' ]
        },
        // Essential fonts
        {
            pattern: /font-(main|heebo|inter)/,
        },
        // Essential color classes for dynamic theming
        {
            pattern: /text-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
            variants: [ 'hover', 'focus' ]
        },
        {
            pattern: /bg-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
            variants: [ 'hover', 'focus' ]
        },
        {
            pattern: /border-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
            variants: [ 'hover', 'focus' ]
        }
    ],
    variants: {
        backgroundColor: [ 'responsive', 'hover', 'focus', 'active' ]
    }
}

