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

UI Kit styling solution for the Next Design System.

import { palette } from "./palette.mjs";
import * as index from "./tokens/index.mjs";
import { mapCSSVars, hasMultipleArgs, spacingUtil, spacingUtilOld } from "./utils.mjs";
import { colors } from "./tokens/colors.mjs";
const componentsSpec = {
  header: {
    height: "string",
    secondLevelHeight: "string"
  },
  form: {
    errorColor: "string"
  },
  bulkActions: {
    actionButtonVariant: "string"
  },
  table: {
    rowStripedBackgroundColorEven: "string",
    rowStripedBackgroundColorOdd: "string",
    rowExpandBackgroundColor: "string",
    rowSortedColor: "string",
    rowSortedColorAlpha: "string"
  },
  stepNavigation: {
    separatorMargin: "string",
    defaultSeparatorHeight: "string",
    simpleSeparatorHeight: "string"
  },
  filterGroup: {
    applyButtonVariant: "string",
    cancelButtonVariant: "string"
  },
  scrollTo: {
    dotSelectedSize: "string",
    backgroundColorOpacity: "string"
  },
  colorPicker: {
    hueDirection: "string"
  },
  snackbar: {
    actionButtonVariant: "string"
  }
};
const typographyProps = {
  color: "string",
  fontSize: "string",
  letterSpacing: "string",
  lineHeight: "string",
  fontWeight: "string",
  textDecoration: "string"
};
const typographySpec = {
  typography: {
    // DS5
    display: { ...typographyProps },
    title1: { ...typographyProps },
    title2: { ...typographyProps },
    title3: { ...typographyProps },
    title4: { ...typographyProps },
    label: { ...typographyProps },
    body: { ...typographyProps },
    captionLabel: { ...typographyProps },
    caption1: { ...typographyProps },
    caption2: { ...typographyProps },
    // LEGACY UNMAPPABLE (DS3)
    "5xlTitle": { ...typographyProps },
    "4xlTitle": { ...typographyProps },
    xxlTitle: { ...typographyProps },
    lTitle: { ...typographyProps },
    sTitle: { ...typographyProps },
    xxsTitle: { ...typographyProps },
    sectionTitle: { ...typographyProps },
    placeholderText: { ...typographyProps },
    link: { ...typographyProps },
    disabledText: { ...typographyProps },
    selectedNavText: { ...typographyProps },
    vizTextDisabled: { ...typographyProps },
    xsInlineLink: { ...typographyProps }
  }
};
const colorTokens = {
  ...colors.common,
  ...colors.light
};
const themeVars = mapCSSVars({
  ...index,
  colors: {
    type: "light",
    ...colorTokens
  },
  // Flatten colors and add background color
  ...componentsSpec,
  ...typographySpec
});
function getColorOrFallback(color) {
  return themeVars.colors[color] || color;
}
function getColor(color, fallbackColor) {
  return getColorOrFallback(color) || getColorOrFallback(fallbackColor);
}
const spacing = (...args) => {
  if (hasMultipleArgs(args)) {
    return args.map((arg) => spacingUtil(arg, themeVars)).join(" ");
  }
  const [value] = args;
  switch (typeof value) {
    case "number":
    case "string":
      return spacingUtil(value, themeVars);
    // TODO: remove in v6
    case "object":
      return value && value.length > 0 ? value.map((val) => spacingUtilOld(val, themeVars)).join(" ") : "0px";
    default:
      return "0px";
  }
};
const mix = (color1, factor, color2 = "transparent") => {
  const percent = typeof factor === "number" ? `${factor * 100}%` : factor;
  return `color-mix(in srgb, ${getColor(color1)} ${percent}, ${getColor(color2)})`;
};
const alpha = (color, factor) => mix(color, factor);
const theme = {
  ...themeVars,
  palette,
  spacing,
  alpha,
  mix
};
export {
  getColor,
  theme
};