@yamada-ui/react/dist/esm/core/system/create-system.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { utils_exports } from "../../utils/index.js";
import { createBreakpoints } from "./breakpoint.js";
import { DEFAULT_VAR_PREFIX } from "../constant.js";
import { createLayers } from "./layer.js";
import { createVars, mergeVars } from "./var.js";

//#region src/core/system/create-system.ts
const tokenMap = {
	primary: {
		aspectRatios: {},
		blurs: {},
		borders: {},
		colors: {},
		durations: {},
		easings: {},
		fonts: {},
		fontSizes: {},
		fontWeights: {},
		letterSpacings: {},
		lineHeights: {},
		radii: {},
		sizes: {},
		spaces: {},
		zIndices: {}
	},
	secondary: {
		gradients: {},
		keyframes: { maxDepth: 1 },
		shadows: {}
	},
	tertiary: { animations: { shouldProcess: (obj) => !obj.keyframes } }
};
const defaultSystem = {
	breakpoints: createBreakpoints(),
	config: {},
	cssMap: {},
	cssVars: {},
	layers: createLayers(),
	utils: { getClassName: utils_exports.bem }
};
function createSystem(theme, config = {}) {
	const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX;
	const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint);
	const layers = createLayers(config.css?.layers);
	const shouldProcess = config.theme?.responsive ? (obj) => !breakpoints.isResponsive(obj, true) : () => true;
	const primaryTokens = {
		...createTokens(theme, "primary", shouldProcess),
		...createColorSchemeTokens(theme, void 0, shouldProcess)
	};
	const secondaryTokens = createTokens(theme, "secondary", shouldProcess);
	const tertiaryTokens = createTokens(theme, "tertiary", shouldProcess);
	const { cssMap, cssVars } = mergeVars(createVars(prefix, theme, breakpoints)(primaryTokens), createVars(prefix, theme, breakpoints)(secondaryTokens), createVars(prefix, theme, breakpoints)(tertiaryTokens))();
	const getClassName = (block, element, modifier) => {
		if (!block) return "";
		return `${prefix}-${(0, utils_exports.bem)(block, element, modifier)}`;
	};
	if (theme.themeSchemes) {
		const themeSchemeEntries = Object.entries(theme.themeSchemes);
		for (const [themeScheme, nestedTheme] of themeSchemeEntries) {
			const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`;
			const nestedPrimaryTokens = {
				...createTokens(nestedTheme, "primary", shouldProcess),
				...createColorSchemeTokens(theme, nestedTheme, shouldProcess)
			};
			const nestedSecondaryTokens = createTokens(nestedTheme, "secondary", shouldProcess);
			const nestedTertiaryTokens = createTokens(nestedTheme, "tertiary", shouldProcess);
			const { cssVars: nestedCSSVars } = mergeVars(createVars(prefix, theme, breakpoints)(nestedPrimaryTokens), createVars(prefix, theme, breakpoints)(nestedSecondaryTokens), createVars(prefix, theme, breakpoints)(nestedTertiaryTokens))({
				...primaryTokens,
				...secondaryTokens,
				...tertiaryTokens
			});
			cssVars[themeCondition] = nestedCSSVars;
		}
	}
	return {
		breakpoints,
		config,
		cssMap,
		cssVars,
		layers,
		utils: { getClassName }
	};
}
function createColorSchemeTokens(theme, nestedTheme, shouldProcess) {
	const colors = {
		base: theme.colors ?? {},
		nested: nestedTheme?.colors ?? {}
	};
	const semanticColors = {
		base: theme.semanticTokens?.colors ?? {},
		nested: nestedTheme?.semanticTokens?.colors ?? {}
	};
	const colorSchemeTokens = (0, utils_exports.flattenObject)((nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {}, { shouldProcess });
	const results = {};
	function insertToken(primaryKey, secondaryKey, value) {
		if ((0, utils_exports.isUndefined)(value)) return;
		if (!secondaryKey || secondaryKey === "base") results[`colors.${primaryKey}`] = {
			semantic: true,
			value
		};
		else results[`colors.${primaryKey}.${secondaryKey}`] = {
			semantic: true,
			value
		};
	}
	function processValue(primaryKey, colors$1, keyOrValue) {
		const value = colors$1.nested[keyOrValue] ?? colors$1.base[keyOrValue];
		if ((0, utils_exports.isObject)(value)) {
			const tokens = (0, utils_exports.flattenObject)(value, { shouldProcess });
			Object.keys(tokens).forEach((secondaryKey) => {
				insertToken(primaryKey, secondaryKey, secondaryKey === "base" ? keyOrValue : `${keyOrValue}.${secondaryKey}`);
			});
		} else insertToken(primaryKey, void 0, keyOrValue);
	}
	function processColorModeValue(primaryKey, colors$1, keyOrValue) {
		const [lightValue, darkValue] = keyOrValue;
		const lightColors = colors$1.nested[lightValue] ?? colors$1.base[lightValue];
		const darkColors = colors$1.nested[darkValue] ?? colors$1.base[darkValue];
		if ((0, utils_exports.isObject)(lightColors) && (0, utils_exports.isObject)(darkColors)) {
			const tokens = (0, utils_exports.flattenObject)(lightColors, { shouldProcess });
			Object.keys(tokens).forEach((secondaryKey) => {
				insertToken(primaryKey, secondaryKey, [secondaryKey === "base" ? lightValue : `${lightValue}.${secondaryKey}`, secondaryKey === "base" ? darkValue : `${darkValue}.${secondaryKey}`]);
			});
		} else if (!(0, utils_exports.isObject)(lightValue) && !(0, utils_exports.isObject)(darkValue)) insertToken(primaryKey, void 0, [lightValue, darkValue]);
	}
	Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {
		if ((0, utils_exports.isArray)(value)) {
			processColorModeValue(primaryKey, colors, value);
			processColorModeValue(primaryKey, semanticColors, value);
		} else {
			processValue(primaryKey, colors, value);
			processValue(primaryKey, semanticColors, value);
		}
	});
	return results;
}
function createTokens(theme, target, shouldProcess = () => true) {
	const results = {};
	Object.entries(tokenMap[target]).forEach(([primaryKey, { shouldProcess: shouldProcessProp,...rest }]) => {
		const options = {
			...rest,
			shouldProcess: (obj) => shouldProcess(obj) && (!shouldProcessProp || shouldProcessProp(obj))
		};
		const tokens = (0, utils_exports.flattenObject)(theme[primaryKey] ?? {}, options);
		const semanticTokens = (0, utils_exports.flattenObject)(theme.semanticTokens?.[primaryKey] ?? {}, options);
		Object.entries(tokens).forEach(([secondaryKey, value]) => {
			const token = `${primaryKey}.${secondaryKey}`;
			results[token] = {
				semantic: false,
				value
			};
		});
		Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {
			let token = `${primaryKey}.${secondaryKey}`;
			if (token.endsWith(".base")) token = token.replace(".base", "");
			results[token] = {
				semantic: true,
				value
			};
		});
	});
	return results;
}

//#endregion
export { createSystem, defaultSystem };
//# sourceMappingURL=create-system.js.map