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

Empathy X Tailwind plugin

import { deepMerge } from '@empathyco/x-deep-merge';
import { backgroundOnHover } from './utils/background-on-hover.js';
import { noBackground } from './utils/no-background.js';

/**
 * Returns the `ghost` variant for component `button`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the variant.
 */
function buttonGhost(helpers) {
    const { theme } = helpers;
    return {
        ghost: deepMerge(noBackground(helpers), backgroundOnHover(helpers), {
            '&.x-selected': {
                borderColor: theme('x.colors.neutral.10'),
                backgroundColor: theme('x.colors.neutral.10'),
                color: `var(--button-color-75,${theme('x.colors.neutral.90')})`,
                '&:hover,&:active': {
                    borderColor: theme('x.colors.neutral.25'),
                    backgroundColor: theme('x.colors.neutral.25'),
                },
            },
        }),
    };
}

export { buttonGhost };