import plugin from 'tailwindcss/plugin';
/**
 * Buttons communicate actions that users can take such as submit a form, begin a new task,
 * trigger a new UI element to appear or take a new or next step in some process.
 *
 * Class Names:
 *
 *  btu-button - Establishes a default button container
 *  btu-button-[fill-none | container-none | outline | text-hidden] - Different types of buttons like solid,
 *                                                                    outline, icon buttons etc
 *  btu-button-[sm|md|lg|xl|2xl] - Size of buttons
 *  btu-button-[$theme-colors] - Color of buttons
 *     - required if using btu-button-outline to see outline
 *  btu-button-[pressed | disabled] - States of buttons (active or disabled)
 *
 * Example Usages:
 *
 *  Publish button in content edit page   ->      btu-button btu-button-primary btu-button-sm
 *
 *  Search toolbar icon button            ->      btu-button btu-button-text-hidden btu-button-fill-none
 *                                                btu-button-gray before:btu-icon before:btu-icon-search
 *
 * Each color variant exposes a few CSS custom properties so a parent (e.g.
 * btu-button-group) can pick up the button's color family without having to
 * name its color class:
 *
 *  --button-tint-subtle    - light shade (selected background)
 *  --button-tint-strong    - dark shade (selected text)
 *  --button-tint-highlight - mid shade (accent/highlight)
 */
module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
    const textSizes = theme('fontSize');
    const colors = theme('colors') || {};
    const iconSizes = theme('iconSize') || {};
    const prefix = '.btu-button';
    const disabledStyle = {
        '--button-disabled-color': `var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))))`,
        '--button-disabled-text-color': `var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))))`,
        pointerEvents: 'none',
        userSelect: 'none',
    };
    const activeStyle = {
        '--button-pressed': ' ',
    };
    const components = {
        '.btu-button': {
            // default button
            '--button-color': '',
            '--button-text-color': '',
            '--button-pressed': 'initial',
            '--button-fill-none': 'initial',
            // Baseline color-family tints so an uncolored .btu-button still has
            // sensible values for components that read these (e.g. btu-button-group
            // selection background). Per-color variants overwrite further below.
            '--button-tint-subtle': 'oklch(var(--btu-theme-primary-50))',
            '--button-tint-strong': 'oklch(var(--btu-theme-primary-800))',
            '--button-tint-highlight': 'oklch(var(--btu-theme-primary-200))',
            '--button-padding-xs': '0.25rem 0.5rem',
            '--button-padding-sm': '0.5rem 0.875rem',
            '--button-padding-md': '0.625rem 1rem',
            '--button-padding-lg': '0.625rem 1.125rem',
            '--button-padding-xl': '0.75rem 1.25rem',
            '--button-padding-2xl': '1rem 1.75rem',
            '--button-font-size': textSizes['sm'][0],
            '--button-line-height': textSizes['sm'][1],
            display: 'inline-flex',
            whiteSpace: 'nowrap',
            cursor: 'pointer',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '0.5rem',
            background: 'var(--button-pressed-color, var(--button-disabled-color, var(--button-color)))',
            borderRadius: 'var(--button-border-radius, 0.5rem)',
            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
            padding: 'var(--button-padding-sm)',
            fontSize: 'var(--button-font-size)',
            lineHeight: 'var(--button-line-height)',
            fontWeight: theme('fontWeight.semibold'),
            position: 'relative',
            height: 'var(--button-size-sm, auto)',
            width: 'var(--button-size-sm, auto)',
            '&[aria-pressed="true"]': activeStyle,
            '&:disabled': disabledStyle,
            '&[disabled]': disabledStyle,
            textDecoration: 'none',
            transition: 'scale 150ms ease',
            '&:hover': {
                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
            },
            '&:active': {
                scale: '0.97',
            },
            '@media (prefers-reduced-motion: reduce)': {
                transition: 'scale 0.01ms ease',
                '&:active': {
                    scale: '1',
                },
            },
        },
        '.btu-button-text-hidden': {
            '--button-padding-xs': '0.25rem',
            '--button-padding-sm': '0.5rem',
            '--button-padding-md': '0.625rem',
            '--button-padding-lg': '0.75rem',
            '--button-padding-xl': '0.875rem',
            '--button-padding-2xl': '1rem',
            '--button-icon-font-size': '0px',
            '--button-icon-line-height': '1',
            '--button-font-size': 'var(--button-icon-font-size)',
            '--button-line-height': 'var(--button-icon-line-height)',
            '--button-size-xs': '1.75rem',
            '--button-size-sm': '2.25rem',
            '--button-size-md': '2.5rem',
            '--button-size-lg': '2.75rem',
            '--button-size-xl': '3rem',
            '--button-size-2xl': '3.5rem',
            overflow: 'hidden',
            gap: '0',
        },
        '.btu-button-outline': {
            '--button-outline-offset-width': '1px',
            '--button-outline-offset-color': 'var(--button-outline-color)',
            outline: '1px solid var(--button-outline-color)',
            '&:focus-visible': {
                outline: 'none',
            },
        },
        '.btu-button-fill-none': {
            '--button-fill-none': ' ',
            backgroundColor: 'var(--button-pressed-color, var(--button-fill-none-color))',
            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
            '&:hover': {
                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
            },
        },
        '.btu-button-disabled': disabledStyle,
        '.btu-button-pressed': activeStyle,
        '.btu-button-ai': {
            '--button-color': 'transparent',
            '--button-text-color': 'oklch(100% 0 0)',
            '--button-fill-none-color': 'transparent',
            '--button-fill-none-text-color': 'oklch(0.7 0.3281 339.6)',
            '--button-outline-color': 'oklch(0.7 0.3281 339.6)',
            '--button-disabled-color-fill': 'oklch(var(--btu-theme-gray-200))',
            '--button-disabled-color-fill-none': 'var(--button-fill-none) oklch(var(--btu-theme-white))',
            '--button-disabled-text-color-fill-none': 'var(--button-fill-none) oklch(var(--btu-theme-gray-300))',
            '--button-pressed-color': 'var(--button-pressed) var(--button-disabled-color, oklch(0.5346 0.3041 294.17))',
            '--button-pressed-text-color': 'var(--button-pressed) var(--button-disabled-text-color, var(--btu-theme-white))',
            background: `var(--button-fill-none, ${theme('backgroundImage.ai-gradient')})`,
            '&:hover': {
                '--button-fill-none-color': 'oklch(0.7 0.3281 339.6 / 0.1)',
                '--button-fill-none-text-color': 'oklch(0.5346 0.3041 294.17)',
                background: `var(--button-fill-none, ${theme('backgroundImage.ai-gradient')})`,
            },
        },
    };
    // background & text colors for buttons in different states
    for (const key in colors) {
        if (key === 'currentColor' || key === 'transparent' || key === 'white' || key === 'black' || key === 'ai')
            continue;
        const ringColorKey = key === 'success' || key === 'error' ? key : 'primary';
        // Gray buttons borrow primary for their pressed/selected tint.
        const tintKey = key === 'gray' ? 'primary' : key;
        const focusStyle = {
            '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
            '--button-fill-none-color': `transparent`,
            '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
            '--tw-ring-opacity': '1',
            '--tw-ring-color': `oklch(var(--btu-theme-${ringColorKey}-100))`,
            '--tw-ring-offset-width': '1px',
            '--tw-ring-offset-color': `${key === 'success' || key === 'error' ? 'var(--button-outline-offset-color, var(--button-color))' : 'oklch(var(--btu-theme-primary-400))'}`,
        };
        const highContrastFocusStyle = {
            '--tw-ring-color': `oklch(var(--btu-theme-${ringColorKey}-400))`,
        };
        components[prefix + '-' + key] = {
            '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
            '--button-text-color': `${key === 'gray' ? 'oklch(var(--btu-theme-gray-700))' : 'var(--btu-theme-white)'}`,
            '--button-fill-none-color': 'transparent',
            '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
            '--button-outline-color': `oklch(var(--btu-theme-${key}-300))`,
            '--button-disabled-color-fill': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'primary' ? '300' : '200'}))`,
            '--button-disabled-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-white))`,
            '--button-disabled-text-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-${key}-${key === 'gray' ? '400' : '300'}))`,
            '--button-pressed-color': `var(--button-pressed) var(--button-disabled-color, oklch(var(--btu-theme-${tintKey}-50)))`,
            '--button-pressed-text-color': `var(--button-pressed) var(--button-disabled-text-color, oklch(var(--btu-theme-${tintKey}-800)))`,
            // Plain color tints other components can read (always set, no toggle).
            '--button-tint-subtle': `oklch(var(--btu-theme-${tintKey}-50))`,
            '--button-tint-strong': `oklch(var(--btu-theme-${tintKey}-800))`,
            '--button-tint-highlight': `oklch(var(--btu-theme-${tintKey}-200))`,
            '&:hover': {
                '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : key === 'success' ? '800' : '700'}))`,
                '--button-fill-none-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : '50'}))`,
                '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '900' : '800'}))`,
            },
            '&.is-focused': focusStyle,
            '&:focus-visible': focusStyle,
            ':root.is-moreContrast &:focus-visible': highContrastFocusStyle,
            '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
                ':root:not(.is-normalContrast) &:focus-visible': highContrastFocusStyle,
            },
        };
    }
    const buttonSizes = {
        xs: {
            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
            padding: 'var(--button-padding-xs)',
            width: 'var(--button-size-xs, auto)',
            height: 'var(--button-size-xs, auto)',
        },
        sm: {
            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
            padding: 'var(--button-padding-sm)',
            width: 'var(--button-size-sm, auto)',
            height: 'var(--button-size-sm, auto)',
        },
        md: {
            fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
            padding: 'var(--button-padding-md)',
            width: 'var(--button-size-md, auto)',
            height: 'var(--button-size-md, auto)',
        },
        lg: {
            fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
            padding: 'var(--button-padding-lg)',
            width: 'var(--button-size-lg, auto)',
            height: 'var(--button-size-lg, auto)',
        },
        xl: {
            fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
            padding: 'var(--button-padding-xl)',
            width: 'var(--button-size-xl, auto)',
            height: 'var(--button-size-xl, auto)',
        },
        '2xl': {
            '--icon-size': iconSizes['lg'],
            fontSize: `var(--button-icon-font-size, ${textSizes['lg'][0]})`,
            lineHeight: `var(--button-icon-line-height, ${textSizes['lg'][1]})`,
            padding: 'var(--button-padding-2xl)',
            width: 'var(--button-size-2xl, auto)',
            height: 'var(--button-size-2xl, auto)',
        },
    };
    for (const key in buttonSizes) {
        components[prefix + '-' + key] = buttonSizes[key];
    }
    addComponents(components);
    /*
      The style properties for buttons without a container should always
      override the default button styles (eg: size, fill).
      Since the classnames could be in any order in the markup or "@apply" directives,
      we're utilizing the utility (layer) approach of tailwindcss to achieve this prioritization.
    */
    const noContainerButton = {
        '.btu-button-container-none': {
            padding: '0',
            display: 'inline-flex',
            backgroundColor: 'transparent',
            color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
            '&:hover': {
                color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
            },
        },
    };
    addUtilities(noContainerButton);
});
//# sourceMappingURL=tailwind-plugin-button.js.map