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

UI Kit styling solution for the Next Design System.

import { theme } from "./theme.mjs";
import * as index from "./tokens/index.mjs";
import { mergeTheme } from "./utils.mjs";
import { colors } from "./tokens/colors.mjs";
const makeTheme = (options) => {
  const customTheme = typeof options === "function" ? options(theme) : options;
  const newTheme = mergeTheme(index, customTheme);
  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 aliasMap = {
  bgPage: "backgroundColor",
  bgHover: "containerBackgroundHover"
};
const extendCompatColors = (colors2) => {
  return Object.entries(colors2).reduce((acc, [key, color]) => {
    const compatKey = compatMap[key];
    if (compatKey) {
      acc[compatKey] = color;
    }
    const aliasKey = aliasMap[key];
    if (aliasKey) {
      acc[aliasKey] = color;
    }
    return acc;
  }, {});
};
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 {
    // TODO: review allowing generic modes vs light/dark only
    modes: {
      dawn: {
        type: "light",
        ...colors.common,
        ...colors.light,
        ...extendCompatColors(lightColors),
        ...lightColors
      },
      wicked: {
        type: "dark",
        ...colors.common,
        ...colors.dark,
        ...extendCompatColors(darkColors),
        ...darkColors
      }
    }
  };
};
export {
  makeColors,
  makeTheme
};