@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/components/input/colors.js

Empathy X Tailwind plugin

import { mapColors } from '../../utils/map-colors.js';

/**
 * Returns the `color` variants for component `input`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the variant.
 */
function inputColors(helpers) {
    return mapColors(color => ({
        '--input-color-25': color['25'],
        '--input-color-50': color['50'],
        '--input-color-75': color['75'],
        borderColor: 'var(--input-color-50)',
        '&:focus': {
            borderColor: 'var(--input-color-75)',
        },
    }), helpers);
}

export { inputColors };