@drivy/cobalt/utils/tailwindcssGenerators.js

Opinionated design system for Drivy's projects.

import require$$1 from '../src/tokens/breakpoints.js';
import { __require as requireHelpers } from './helpers.js';

var tailwindcssGenerators;
var hasRequiredTailwindcssGenerators;

function requireTailwindcssGenerators () {
	if (hasRequiredTailwindcssGenerators) return tailwindcssGenerators;
	hasRequiredTailwindcssGenerators = 1;
	const breakpoints = require$$1;
	const { hasProp } = requireHelpers();

	const COLOR_STATES = {
	  DEFAULT: "DEFAULT",
	  HOVER: "hover",
	  PRESS: "press",
	};

	const textGenerator = ({ addUtilities, theme }) => {
	  const textTheme = theme("customText");
	  const mediaQueries = {};
	  const textUtilities = Object.keys(textTheme).reduce((acc, propName) => {
	    const props = textTheme[propName];
	    acc[`.text-${propName}`] = {}
	    ;[
	      "fontFamily",
	      "fontSize",
	      "lineHeight",
	      "fontWeight",
	      "textTransform",
	      "color",
	      "letterSpacing",
	      "textDecoration",
	      "textUnderlineOffset",
	      "cursor",
	    ].forEach((cssPropName) => {
	      if (props[cssPropName]) {
	        acc[`.text-${propName}`][cssPropName] = props[cssPropName];
	      }
	    });
	    if (props.from) {
	      Object.keys(props.from).forEach((breakpoint) => {
	        const breakpointRule = `@media (min-width: ${breakpoints[breakpoint]})`;
	        if (!hasProp(mediaQueries, breakpointRule)) {
	          mediaQueries[breakpointRule] = {};
	        }
	        mediaQueries[breakpointRule] = {
	          ...mediaQueries[breakpointRule],
	          [`.text-${propName}`]: props.from[breakpoint],
	        };
	      });
	    }
	    if (props.hover) {
	      acc[`.text-${propName}:hover`] = {
	        ...props.hover,
	      };
	    }
	    if (props.focus) {
	      acc[`.text-${propName}:focus`] = {
	        ...props.focus,
	      };
	    }
	    return acc
	  }, {});
	  // For CSS priority, we have to put media queries after all text utilities
	  addUtilities(
	    { ...textUtilities, ...mediaQueries },
	    { variants: ["responsive"] }
	  );
	};

	const borderWidthGenerator = ({ addUtilities, theme }) => {
	  const widthTheme = theme("borderWidth");
	  const widthUtilities = Object.keys(widthTheme).reduce((acc, propName) => {
	    const modifier = propName === "DEFAULT" ? "" : `-${propName}`;
	    acc[`.border${modifier}`] = {
	      borderWidth: widthTheme[propName],
	      // add default solid style only if width is not 0
	      ...(widthTheme[propName] === "0" ? {} : { borderStyle: "solid" }),
	    };
	    acc[`.border-t${modifier}`] = {
	      borderTopWidth: widthTheme[propName],
	      ...(widthTheme[propName] === "0" ? {} : { borderTopStyle: "solid" }),
	    };
	    acc[`.border-r${modifier}`] = {
	      borderRightWidth: widthTheme[propName],
	      ...(widthTheme[propName] === "0" ? {} : { borderRightStyle: "solid" }),
	    };
	    acc[`.border-b${modifier}`] = {
	      borderBottomWidth: widthTheme[propName],
	      ...(widthTheme[propName] === "0" ? {} : { borderBottomStyle: "solid" }),
	    };
	    acc[`.border-l${modifier}`] = {
	      borderLeftWidth: widthTheme[propName],
	      ...(widthTheme[propName] === "0" ? {} : { borderLeftStyle: "solid" }),
	    };
	    return acc
	  }, {});
	  addUtilities(widthUtilities);
	};

	const borderStyleGenerator = ({ addUtilities, theme }) => {
	  const styleTheme = theme("borderStyle");
	  const styleUtilities = Object.keys(styleTheme).reduce((acc, propName) => {
	    acc[`.border-${propName}`] = { borderStyle: styleTheme[propName] };
	    acc[`.border-t-${propName}`] = { borderTopStyle: styleTheme[propName] };
	    acc[`.border-r-${propName}`] = { borderRightStyle: styleTheme[propName] };
	    acc[`.border-b-${propName}`] = { borderBottomStyle: styleTheme[propName] };
	    acc[`.border-l-${propName}`] = { borderLeftStyle: styleTheme[propName] };
	    return acc
	  }, {});
	  addUtilities(styleUtilities);
	};

	const getSemanticColorGenerator = ({
	  type,
	  classPrefix,
	  selectorSuffix = "",
	  cssProperty,
	  cssProperty2,
	  enableInteractiveColors = true,
	  additionalRules = {},
	}) => {
	  return ({ addUtilities, theme }) => {
	    const themeProps = theme(type);
	    if (!themeProps)
	      throw new Error(`Didn't found theme properties for "${type}".`)
	    const utilities = Object.keys(themeProps).reduce((acc, propName) => {
	      const colorProp = themeProps[propName];
	      if (typeof colorProp === "string") {
	        acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
	          [cssProperty]: colorProp,
	          ...(cssProperty2 ? { [cssProperty2]: colorProp } : {}),
	          ...(additionalRules[propName] || {}),
	        };
	      } else {
	        Object.keys(colorProp).map((colorState) => {
	          const subColorProp = colorProp[colorState];
	          if (colorState === COLOR_STATES.DEFAULT) {
	            acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
	              [cssProperty]: subColorProp,
	              ...(cssProperty2 ? { [cssProperty2]: subColorProp } : {}),
	              ...(additionalRules[propName] || {}),
	            };
	          } else if (
	            colorState === COLOR_STATES.HOVER &&
	            enableInteractiveColors
	          ) {
	            acc[`.${classPrefix}-${propName}:hover${selectorSuffix}`] = {
	              [cssProperty]: subColorProp,
	              ...(cssProperty2 ? { [cssProperty2]: subColorProp } : {}),
	            };
	            acc[`.${classPrefix}-${propName}:focus${selectorSuffix}`] = {
	              [cssProperty]: subColorProp,
	              ...(cssProperty2 ? { [cssProperty2]: subColorProp } : {}),
	            };
	          } else if (
	            colorState === COLOR_STATES.PRESS &&
	            enableInteractiveColors
	          ) {
	            acc[`.${classPrefix}-${propName}:active${selectorSuffix}`] = {
	              [cssProperty]: subColorProp,
	              ...(cssProperty2 ? { [cssProperty2]: subColorProp } : {}),
	            };
	          } else if (typeof subColorProp === "string") {
	            acc[`.${classPrefix}-${propName}-${colorState}`] = {
	              [cssProperty]: subColorProp,
	              ...(cssProperty2 ? { [cssProperty2]: subColorProp } : {}),
	            };
	          } else {
	            Object.keys(colorProp).map((subColorState) => {
	              const subSubColorProp = colorProp[colorState][subColorState];
	              if (subColorState === COLOR_STATES.DEFAULT) {
	                acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
	                  [cssProperty]: subSubColorProp,
	                  ...(cssProperty2 ? { [cssProperty2]: subSubColorProp } : {}),
	                };
	              } else if (
	                subColorState === COLOR_STATES.HOVER &&
	                enableInteractiveColors
	              ) {
	                acc[`.${classPrefix}-${propName}:hover${selectorSuffix}`] = {
	                  [cssProperty]: subSubColorProp,
	                  ...(cssProperty2 ? { [cssProperty2]: subSubColorProp } : {}),
	                };
	                acc[`.${classPrefix}-${propName}:focus${selectorSuffix}`] = {
	                  [cssProperty]: subSubColorProp,
	                  ...(cssProperty2 ? { [cssProperty2]: subSubColorProp } : {}),
	                };
	              } else if (
	                subColorState === COLOR_STATES.PRESS &&
	                enableInteractiveColors
	              ) {
	                acc[`.${classPrefix}-${propName}:active${selectorSuffix}`] = {
	                  [cssProperty]: subSubColorProp,
	                  ...(cssProperty2 ? { [cssProperty2]: subSubColorProp } : {}),
	                };
	              }
	            });
	          }
	        });
	      }
	      return acc
	    }, {});
	    addUtilities(utilities);
	  }
	};

	tailwindcssGenerators = {
	  text: textGenerator,
	  borderWidth: borderWidthGenerator,
	  borderStyle: borderStyleGenerator,
	  getSemanticColorGenerator,
	};
	return tailwindcssGenerators;
}

export { requireTailwindcssGenerators as __require };
//# sourceMappingURL=tailwindcssGenerators.js.map