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

UI Kit styling solution.

import { palette } from "./palette.js";
import { baseTheme } from "./tokens/index.js";
import { colors } from "./tokens/colors.js";
import { mapCSSVars, hasMultipleArgs, spacingUtil } from "./utils.js";
const componentsSpec = {
  header: {
    height: "string",
    secondLevelHeight: "string"
  },
  form: {
    errorColor: "string"
  },
  snackbar: {
    actionButtonVariant: "string"
  },
  bulkActions: {
    actionButtonVariant: "string"
  },
  stepNavigation: {
    separatorMargin: "string",
    defaultSeparatorHeight: "string",
    simpleSeparatorHeight: "string"
  },
  filterGroup: {
    applyButtonVariant: "string",
    cancelButtonVariant: "string"
  },
  colorPicker: {
    hueDirection: "string"
  }
};
const typographyProps = {
  color: "string",
  fontSize: "string",
  letterSpacing: "string",
  lineHeight: "string",
  fontWeight: "string",
  textDecoration: "string"
};
const typographySpec = {
  typography: {
    display: { ...typographyProps },
    title1: { ...typographyProps },
    title2: { ...typographyProps },
    title3: { ...typographyProps },
    title4: { ...typographyProps },
    label: { ...typographyProps },
    body: { ...typographyProps },
    captionLabel: { ...typographyProps },
    caption1: { ...typographyProps },
    caption2: { ...typographyProps }
  }
};
const colorTokens = {
  ...colors.common,
  ...colors.light
};
const themeVars = mapCSSVars({
  ...baseTheme,
  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) => spacing(arg)).join(" ");
  }
  const [value] = args;
  switch (typeof value) {
    case "number":
    case "string":
      return spacingUtil(value, themeVars);
    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
};