@hitachivantara/uikit-styles/dist/makeTheme.js

UI Kit styling solution.

import { theme } from "./theme.js";
import { baseTheme } from "./tokens/index.js";
import { colors } from "./tokens/colors.js";
import { mergeTheme } from "./utils.js";
const getKey = (...keys) => keys.filter(Boolean).join("-");
const makeVarsProxy = (themeObject, parentKey = "") => {
  return new Proxy(themeObject, {
    get(target, prop) {
      if (prop === "vars" || typeof prop !== "string") return null;
      if (typeof target[prop] === "object" && target[prop] != null) {
        return makeVarsProxy(target[prop], getKey(parentKey, prop));
      }
      return `var(--${getKey("uikit", parentKey, prop)})`;
    }
  });
};
const makeTheme = (options) => {
  const customTheme = typeof options === "function" ? options(theme) : options;
  const newTheme = mergeTheme(baseTheme, customTheme);
  newTheme.vars = makeVarsProxy(newTheme);
  newTheme.colors.modes = {
    dawn: newTheme.colors.light,
    wicked: newTheme.colors.dark
  };
  return newTheme;
};
const compatMap = {
  primaryStrong: "primary_80",
  primaryDimmed: "primary_20",
  positiveStrong: "positive_80",
  positiveDeep: "positive_120",
  positiveDimmed: "positive_20",
  warningStrong: "warning_120",
  warningDeep: "warning_140",
  warningDimmed: "warning_20",
  negativeStrong: "negative_80",
  negativeDeep: "negative_120",
  negativeDimmed: "negative_20",
  info: "neutral",
  infoDimmed: "neutral_20",
  text: "secondary",
  textSubtle: "secondary_80",
  textDisabled: "secondary_60",
  textDimmed: "atmo1",
  textLight: "base_light",
  textDark: "base_dark",
  bgHover: "primary_20",
  bgDisabled: "atmo3",
  bgPage: "atmo2",
  bgContainer: "atmo1",
  bgPageSecondary: "atmo3",
  border: "atmo4"
};
const extendCompatColors = (colors2) => {
  return Object.entries(colors2).reduce((acc, [key, color]) => {
    const compatKey = compatMap[key];
    if (compatKey) {
      acc[compatKey] = color;
    }
    return acc;
  }, colors2);
};
const makeColors = (inputColors) => {
  const [lightColors, darkColors] = Object.entries(inputColors).reduce(
    (acc, [key, color]) => {
      const [lightColor, darkColor] = typeof color === "string" ? [color, color] : color;
      if (lightColor) {
        acc[0][key] = lightColor;
      }
      if (darkColor) {
        acc[1][key] = darkColor;
      }
      return acc;
    },
    [{}, {}]
  );
  return {
    light: extendCompatColors({
      ...colors.common,
      ...colors.light,
      ...lightColors
    }),
    dark: extendCompatColors({
      ...colors.common,
      ...colors.dark,
      ...darkColors
    })
  };
};
export {
  makeColors,
  makeTheme
};