@empathyco/x-tailwindcss/dist/cjs/x-tailwind-plugin/components/button/outlined.js

Empathy X Tailwind plugin

'use strict';

/**
 * Returns the `outlined` variant for component `button`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the variant.
 */
function buttonOutlined(helpers) {
    const { theme } = helpers;
    return {
        outlined: {
            // Disabled style
            '--button-disabled-border-color': theme('x.colors.neutral.25'),
            borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
            backgroundColor: theme('x.colors.neutral.0'),
            color: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
            '&:hover,&:active': {
                borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
                backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
                color: theme('x.colors.neutral.0'),
            },
            '&.x-selected': {
                borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
                backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
                color: theme('x.colors.neutral.0'),
                '&:hover,&:active': {
                    backgroundColor: theme('x.colors.neutral.0'),
                    color: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
                },
            },
        },
    };
}

exports.buttonOutlined = buttonOutlined;