@drivy/cobalt/utils/helpers.js

Opinionated design system for Drivy's projects.

import require$$0 from '../src/tokens/theme.js';
import require$$1 from '../src/tokens/palette.js';

var helpers;
var hasRequiredHelpers;

function requireHelpers () {
	if (hasRequiredHelpers) return helpers;
	hasRequiredHelpers = 1;
	const themeTokens = require$$0;
	const palette = require$$1;

	const DEFAULT_KEY = "DEFAULT";
	const COLOR_PREFIX = "--c";

	const THEME_MODES = {
	  LIGHT: "light",
	  DARK: "dark",
	};
	const DEFAULT_THEME_MODE = THEME_MODES.LIGHT;
	const MODIFIERS = {
	  HOVER: "hover",
	  PRESS: "press",
	};

	const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);

	// Get the CSS Variable name from a palette/colors name
	// ex: (green, 900) => --c-green-900
	// ex: (turquoise, "", true) => --c-l-turquoise
	const getCSSVariableNameFromColorName = ({ color, modifier = "" }) => {
	  return `${COLOR_PREFIX}-${color}${modifier ? `-${modifier}` : modifier}`
	};

	// Get the CSS Variable name from a theme color name and category
	// ex: (background, connect) => --c-background-connect
	// ex: (background, accentInteractive, hover) => --c-background-connect--hover
	const getCSSVariableNameFromThemeName = ({
	  category,
	  color,
	  modifier = "",
	}) => {
	  return `${COLOR_PREFIX}-${category}-${color}${
	    modifier && modifier !== DEFAULT_KEY ? `--${modifier}` : ""
	  }`
	};

	// Get theme value from theme color name and category
	// ex: (background, connect) => "turquoise.500/turquoise.500"
	// ex: (background, accentInteractive, hover) => "purple.700/purpleDeep.400"
	const getThemeValueFromThemeColor = ({ category, color, modifier = "" }) => {
	  const colorProp = themeTokens[category][color];
	  if (typeof colorProp !== "object") return colorProp
	  if (modifier && modifier in colorProp) {
	    return colorProp[modifier]
	  }
	  if (!modifier && "DEFAULT" in colorProp) {
	    return colorProp.DEFAULT
	  } else {
	    return colorProp
	  }
	};

	// Get the theme final color from the theme color value
	// ex: ("red.500/red.200", THEME_MODES.LIGHT) => red.500
	// ex: ("red.500/red.200", THEME_MODES.DARK) => red.200
	const getThemeColorFromThemeValue = (themeValue, mode = DEFAULT_THEME_MODE) => {
	  const splitPosition = mode === THEME_MODES.LIGHT ? 0 : 1;

	  return themeValue.split("/")[splitPosition]
	};

	// Get the CSS Variable from the theme final color
	// ex: (green.900) => --c-green-900
	const getColorCSSVariableFromThemeColor = (value) => {
	  const [colorName, colorVariant] = value.split(".");
	  if (colorVariant) {
	    return `${COLOR_PREFIX}-${colorName}-${colorVariant}`
	  } else {
	    return `${COLOR_PREFIX}-${value}`
	  }
	};

	// Get the color value from the theme final color
	// (red) => #ff7378
	// (red.500) => #c71414
	const getColorFromThemeColor = (name) => {
	  const [colorName, colorVariant] = name.split(".");
	  if (hasProp(palette, colorName)) {
	    if (colorVariant) {
	      return palette[colorName][colorVariant]
	    } else if (typeof palette[colorName] === "string") {
	      return palette[colorName]
	    } else {
	      return palette[colorName][DEFAULT_KEY]
	    }
	  }
	};

	// Get color CSS Variable from theme value
	// ex: ("red/red.500/red.200", THEME_MODES.LEGACY) => --c-l-red
	// ex: ("red/red.500/red.200", THEME_MODES.LIGHT) => --c-red-500
	const getColorCSSVariableFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
	  getColorCSSVariableFromThemeColor(getThemeColorFromThemeValue(value, mode));

	// Get color value from the theme value
	// ex: ("red/red.500/red.200", THEME_MODES.LEGACY) => #ff7378
	// ex: ("red/red.500/red.200", THEME_MODES.LIGHT) => #c71414
	const getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
	  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode));

	helpers = {
	  DEFAULT_THEME_MODE,
	  DEFAULT_KEY,
	  COLOR_PREFIX,
	  MODIFIERS,
	  THEME_MODES,
	  // Following rule https://eslint.org/docs/rules/no-prototype-builtins
	  hasProp,
	  getColorCSSVariableFromThemeValue,
	  getCSSVariableNameFromThemeName,
	  getCSSVariableNameFromColorName,
	  getThemeValueFromThemeColor,
	  getThemeColorFromThemeValue,
	  getColorFromThemeValue,
	  getColorsUsingCSSVariables: ({ additionalColors } = {}) => {
	    const colorsUsingCSSVariables = JSON.parse(JSON.stringify(themeTokens));
	    // eslint-disable-next-line guard-for-in
	    for (const category in themeTokens) {
	      for (const color in themeTokens[category]) {
	        if (typeof themeTokens[category][color] === "string") {
	          colorsUsingCSSVariables[category][color] =
	            `var(${getCSSVariableNameFromThemeName({ category, color })})`;
	        } else {
	          // eslint-disable-next-line guard-for-in
	          for (const modifier in themeTokens[category][color]) {
	            colorsUsingCSSVariables[category][color][modifier] =
	              `var(${getCSSVariableNameFromThemeName({
	                category,
	                color,
	                modifier,
	              })})`;
	          }
	        }
	      }
	      if (additionalColors) {
	        for (const color in additionalColors) {
	          if (hasProp(additionalColors, color)) {
	            colorsUsingCSSVariables[category][color] = additionalColors[color];
	          }
	        }
	      }
	    }
	    return colorsUsingCSSVariables
	  },
	};
	return helpers;
}

export { requireHelpers as __require };
//# sourceMappingURL=helpers.js.map