@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/components/button/utils/no-background.js

Empathy X Tailwind plugin

/**
 * Util to remove background for component `button`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the util.
 */
function noBackground(helpers) {
    const { theme } = helpers;
    return {
        // Disabled style
        '--button-disabled-border-color': 'transparent',
        '--button-disabled-background-color': 'transparent',
        borderColor: 'transparent',
        backgroundColor: 'transparent',
        color: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
        '&:hover': {
            borderColor: 'transparent',
            backgroundColor: 'transparent',
            color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
        },
        '&:active': {
            borderColor: 'transparent',
            backgroundColor: 'transparent',
            color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
        },
    };
}

export { noBackground };