@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 STATES_COLORS = ["hover", "press", "drag", "focus"];

	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: (white) => --c-white
	const getCSSVariableNameFromColorName = ({ color, scale = "" }) => {
	  return `${COLOR_PREFIX}-${color}${scale ? `-${scale}` : scale}`
	};

	// Get the CSS Variable name from a theme color name
	// ex: (surface) => --c-surface
	const getCSSVariableNameFromThemeName = (themeName) => {
	  return `${COLOR_PREFIX}-${themeName}`
	};

	// 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.DARK) => --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.DARK) => #ff7378
	// ex: ("red/red.500/red.200", THEME_MODES.LIGHT) => #c71414
	const getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
	  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode));

	const getColorsUsingCSSVariables = ({ additionalColors } = {}) => {
	  const colorsUsingCSSVariables = {};
	  const stateColorsUsingCSSVariables = {};
	  // eslint-disable-next-line guard-for-in
	  for (const themeProp in themeTokens) {
	    if (STATES_COLORS.includes(themeProp)) {
	      stateColorsUsingCSSVariables[themeProp] =
	        `var(${getCSSVariableNameFromThemeName(themeProp)})`;
	    } else {
	      colorsUsingCSSVariables[themeProp] =
	        `var(${getCSSVariableNameFromThemeName(themeProp)})`;
	    }
	  }

	  if (additionalColors) {
	    for (const color in additionalColors) {
	      if (hasProp(additionalColors, color)) {
	        colorsUsingCSSVariables[color] = additionalColors[color];
	      }
	    }
	  }

	  return {
	    stateColors: stateColorsUsingCSSVariables,
	    themeColors: colorsUsingCSSVariables,
	  }
	};

	helpers = {
	  DEFAULT_THEME_MODE,
	  DEFAULT_KEY,
	  THEME_MODES,
	  // Following rule https://eslint.org/docs/rules/no-prototype-builtins
	  hasProp,
	  getColorCSSVariableFromThemeValue,
	  getCSSVariableNameFromThemeName,
	  getCSSVariableNameFromColorName,
	  getThemeColorFromThemeValue,
	  getColorFromThemeValue,
	  getColorsUsingCSSVariables,
	};
	return helpers;
}

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