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

UI Kit styling solution.

import { palette } from "./palette.js";
import { colors } from "./tokens/colors.js";
import { baseTheme } from "./tokens/index.js";
import { hasMultipleArgs, mapCSSVars, spacingUtil } from "./utils.js";
//#region src/theme.ts
var 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" }
};
var typographyProps = {
	color: "string",
	fontSize: "string",
	letterSpacing: "string",
	lineHeight: "string",
	fontWeight: "string",
	textDecoration: "string"
};
var typographySpec = { typography: {
	display: { ...typographyProps },
	title1: { ...typographyProps },
	title2: { ...typographyProps },
	title3: { ...typographyProps },
	title4: { ...typographyProps },
	label: { ...typographyProps },
	body: { ...typographyProps },
	captionLabel: { ...typographyProps },
	caption1: { ...typographyProps },
	caption2: { ...typographyProps }
} };
var colorTokens = {
	...colors.common,
	...colors.light
};
var themeVars = mapCSSVars({
	...baseTheme,
	colors: {
		type: "light",
		...colorTokens
	},
	...componentsSpec,
	...typographySpec
});
function getColorOrFallback(color) {
	return themeVars.colors[color] || color;
}
/** Get a `color` from the theme palette, or `fallbackColor` if not found */
function getColor(color, fallbackColor) {
	return getColorOrFallback(color) || getColorOrFallback(fallbackColor);
}
/**
* Utility function to generate spacing values from the theme.
*
* @example
* theme.spacing(2) // 16px (2*8px)
* theme.spacing("md", "inherit", "42px") // 24px inherit 42px
*/
var 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";
	}
};
/**
* Utility function to mix two colors. Accepts theme and CSS colors.
*
* @example
* theme.mix("warning", 0.7) // 70% warning, 30% transparent
* theme.mix("cat1", "60%", "orange") // 60% cat1, 30% orange
*/
var mix = (color1, factor, color2 = "transparent") => {
	const percent = typeof factor === "number" ? `${factor * 100}%` : factor;
	return `color-mix(in srgb, ${getColor(color1)} ${percent}, ${getColor(color2)})`;
};
/**
* Utility function to apply an alpha channel to a color from the theme.
*
* @example
* theme.alpha("warning", 0.5) // rgb( R G B / 0.5)
*/
var alpha = (color, factor) => mix(color, factor);
/**
* UI Kit static theme object, containing values and utility functions that leverage the injected CSS variables.
* @returns string values that can be used as CSS values.
* @example
* theme.colors.primary // "var(--uikit-colors-primary)"
* theme.spacing("xs", "sm") // "var(--uikit-space-xs) var(--uikit-space-sm)"
*/
var theme = {
	...themeVars,
	palette,
	spacing,
	alpha,
	mix
};
//#endregion
export { getColor, theme };