@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/utils/map-colors.js

Empathy X Tailwind plugin

import { reduce } from '@empathyco/x-utils';

/**
 * This functions takes all the Theme colors and maps them to custom CSS defined by the mapperFn.
 *
 * @example
 * ```
 * mapColors(color=> ({backgroundColor: color['50']}))
 *
 * returns:
 * {
 *   'neutral'{ backgroundColor: '#808080' },
 *   'lead'{ backgroundColor: '#243D48' },
 *   'auxiliary'{ backgroundColor: '#0086B2' },
 *   'accent'{ backgroundColor: '#D44A6F' },
 *   'highlight'{ backgroundColor: '#8B6391' },
 *   'neutral'{ backgroundColor: '#10B981' },
 *   'warning'{ backgroundColor: '#F59E0B' },
 *   'error'{ backgroundColor: '#EF4444' },
 * }
 * ```
 *
 * @param mapperFn - The function to map each Theme color to the final CSS.
 * @param helpers - The {@link TailwindHelpers} used to generate CSS.
 *
 *@returns The {@link CssStyleOptions} with styles for all the colors.
 */
function mapColors(mapperFn, { theme }) {
    const colors = theme('x.colors');
    return reduce(colors, (mappedColors, colorName, color) => {
        if (!['transparent', 'current'].includes(colorName)) {
            mappedColors[colorName] = {
                ...mapperFn(color, colorName),
            };
        }
        return mappedColors;
    }, {});
}

export { mapColors };