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

UI Kit styling solution.

import { colors } from "./tokens/colors.js";
import { baseTheme } from "./tokens/index.js";
import { mergeTheme } from "./utils.js";
import { theme } from "./theme.js";
//#region src/makeTheme.ts
var getKey = (...keys) => keys.filter(Boolean).join("-");
/** Uses a Proxy to output the CSS Vars based on the `themeObject` */
var 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)})`;
	} });
};
/**
* Generate a theme base on the options received.
* Takes an incomplete theme object and adds the missing parts.
*
* @param options The options to generate the theme
* @returns The generated theme
*/
var makeTheme = (options) => {
	const newTheme = mergeTheme(baseTheme, typeof options === "function" ? options(theme) : options);
	newTheme.vars = makeVarsProxy(newTheme);
	newTheme.colors.modes = {
		dawn: newTheme.colors.light,
		wicked: newTheme.colors.dark
	};
	return newTheme;
};
/** Compatibility object between UI Kit tokens and NEXT tokens */
var 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"
};
/** Adds the NEXT compatibility colors for a given palette. @example `bgPage` => `bgPage` => `atmo2` */
var extendCompatColors = (baseColors) => {
	return Object.entries(baseColors).reduce((acc, [key, color]) => {
		const compatKey = compatMap[key];
		if (compatKey) acc[compatKey] = color;
		return acc;
	}, baseColors);
};
/**
* Takes in a subset `HvThemeColors`, where the values can be the `[light,dark]` colors theme tuple,
* or a single color for both light and dark modes.
* @private @internal internal use only
*/
var 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
		})
	};
};
//#endregion
export { makeColors, makeTheme };