@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/components/progress-bar/default.js

Empathy X Tailwind plugin

import { progressBarSizes } from './sizes.js';

/**
 * Returns the default styles for component `progress-bar`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the component.
 */
function progressBarDefault(helpers) {
    const { theme } = helpers;
    return {
        borderRadius: theme('x.borderRadius.sm'),
        display: 'inline-block',
        backgroundColor: theme('x.colors.neutral.25'),
        overflow: 'hidden',
        '& > &-fill': {
            height: '100%',
            backgroundColor: `var(--progress-bar-color-50, ${theme('x.colors.neutral.90')})`,
        },
        ...progressBarSizes(helpers).md,
    };
}

export { progressBarDefault };