@hitachivantara/uikit-styles/dist/esm/utils.mjs

UI Kit styling solution for the Next Design System.

const spacingUtil = (value, vars) => {
  switch (typeof value) {
    case "number":
      return value === 0 ? "0" : `calc(${vars.space.base} * ${value}px)`;
    case "string":
      return vars.space[value] || value;
    default:
      return value;
  }
};
const spacingUtilOld = (value, vars) => {
  switch (typeof value) {
    case "number":
      return `${value}px`;
    case "string":
      return vars.space[value] || value;
    default:
      return "0px";
  }
};
const toCSSVars = (obj, prefix = "--uikit") => {
  const vars = {};
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === "object") {
      const nestedVars = toCSSVars(value, `${prefix}-${key}`);
      for (const [nestedKey, nestedValue] of Object.entries(nestedVars)) {
        vars[nestedKey] = nestedValue;
      }
    } else {
      vars[`${prefix}-${key}`] = value;
    }
  }
  return vars;
};
const hasMultipleArgs = (args) => {
  return args.length > 1;
};
const mapCSSVars = (obj, prefix = "--uikit") => {
  const vars = {};
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === "object") {
      vars[key] = mapCSSVars(value, `${prefix}-${key}`);
    } else {
      vars[key] = `var(${prefix}-${key})`;
    }
  }
  return vars;
};
const mergeTheme = (...objects) => {
  const isObject = (obj) => obj && typeof obj === "object";
  return objects.reduce((prev, obj) => {
    Object.keys(obj).forEach((key) => {
      const pVal = prev[key];
      const oVal = obj[key];
      if (isObject(pVal) && isObject(oVal)) {
        prev[key] = mergeTheme(pVal, oVal);
      } else {
        prev[key] = oVal !== void 0 ? oVal : pVal;
      }
    });
    return prev;
  }, {});
};
const parseTheme = (themes, theme = "", colorMode = "") => {
  const names = themes.map((t) => t.name);
  const selectedTheme = names.includes(theme) ? theme : names[0];
  const themeStructure = themes.find((t) => t.name === selectedTheme) || themes[0];
  const colorModes = Object.keys(themeStructure.colors.modes);
  const selectedMode = colorModes.includes(colorMode) ? colorMode : colorModes[0];
  const colorScheme = themeStructure.colors.modes[selectedMode].type;
  return {
    theme: themeStructure,
    selectedTheme,
    selectedMode,
    colorModes,
    colorScheme
  };
};
const getThemesList = (themes) => {
  const list = {};
  Object.keys(themes).forEach((themeName) => {
    const theme = themes[themeName];
    const colorModes = Object.keys(theme.colors.modes);
    list[themeName] = {
      colorModes: {}
    };
    colorModes.forEach((colorMode) => {
      list[themeName].colorModes[colorMode] = toCSSVars({
        ...theme,
        colors: {
          ...theme.colors.modes[colorMode]
        }
      });
    });
  });
  return list;
};
const getThemesVars = (themes) => {
  const vars = {};
  themes.forEach((theme) => {
    const colorModes = Object.keys(theme.colors.modes);
    colorModes.forEach((colorMode) => {
      const styleName = `[data-theme="${theme.name}"][data-color-mode="${colorMode}"]`;
      const themeName = `[data-theme="${theme.name}"]`;
      const { components, name, colors, palette, ...rest } = theme;
      vars[styleName] = toCSSVars({
        colors: {
          ...colors.modes[colorMode]
        }
      });
      vars[themeName] = toCSSVars({
        ...rest
      });
    });
  });
  return vars;
};
export {
  getThemesList,
  getThemesVars,
  hasMultipleArgs,
  mapCSSVars,
  mergeTheme,
  parseTheme,
  spacingUtil,
  spacingUtilOld
};