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

Empathy X Tailwind plugin

'use strict';

var xDeepMerge = require('@empathyco/x-deep-merge');
var noBackground = require('./utils/no-background.js');
var noHorizontalPadding = require('./utils/no-horizontal-padding.js');

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

exports.buttonTight = buttonTight;