@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/components/button/disabled.js

Empathy X Tailwind plugin

/**
 * Returns the `disabled` state for component `button`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the state.
 */
function buttonDisabled(helpers) {
    const { theme } = helpers;
    // Disabled common styles
    const disabledStyles = {
        borderColor: `var(--button-disabled-border-color,${theme('x.colors.neutral.10')})`,
        backgroundColor: `var(--button-disabled-background-color,${theme('x.colors.neutral.10')})`,
        color: theme('x.colors.neutral.25'),
    };
    return {
        '&:disabled': {
            cursor: 'not-allowed',
            ...disabledStyles,
            '&.x-selected': {
                ...disabledStyles,
            },
        },
    };
}

export { buttonDisabled };