@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
240 lines (238 loc) • 9.66 kB
JavaScript
const require_utils_index = require('../../utils/index.cjs');
const require_constant = require('../constant.cjs');
const require_create_system = require('./create-system.cjs');
const require_animation = require('../css/animation.cjs');
const require_color_mix = require('../css/color-mix.cjs');
const require_conditions = require('../css/conditions.cjs');
const require_gradient = require('../css/gradient.cjs');
const require_css = require('../css/css.cjs');
//#region src/core/system/var.ts
function transformInterpolation(value, callback) {
if ((0, require_utils_index.utils_exports.isString)(value)) return value.replace(/\{(.*?)\}/g, (_, value$1) => {
const [token, fallbackValue] = value$1.split(/,(.+)/);
return callback(token.trim(), fallbackValue?.trim());
});
else return value;
}
function getVar(token, fallback) {
if (!token.startsWith("--")) token = `--${token}`;
token = token.replace(/[^-_a-zA-Z0-9]/g, "");
return fallback ? `var(${token}, ${fallback})` : `var(${token})`;
}
function getVarName(system) {
return function(token) {
return `--${system.config.css?.varPrefix ?? require_constant.DEFAULT_VAR_PREFIX}-${token}`;
};
}
function getColorSchemeVar(system) {
return function(value, fallback) {
if (!(0, require_utils_index.utils_exports.isString)(value)) return value;
const prefix = system.config.css?.varPrefix ?? require_constant.DEFAULT_VAR_PREFIX;
const [, token] = value.split(".");
return getVar(`${prefix}-colorScheme-${token}`, fallback);
};
}
const isGradient = (token) => token.startsWith("gradients.");
const isKeyframes = (token) => token.startsWith("keyframes.");
const isAnimation = (token) => token.startsWith("animations.");
const isSpace = (token) => token.startsWith("spaces.");
const isColor = (token) => token.startsWith("colors.");
const isColorScheme = (token) => (0, require_utils_index.utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
function createVars(prefix = require_constant.DEFAULT_VAR_PREFIX, theme, breakpoints) {
return function(tokens) {
const { getQuery, isResponsive } = breakpoints;
function tokenToVar(token) {
token = token.replace(/\./g, "-");
token = token.replace(/\//g, "\\/");
const variable = `--${[prefix, (0, require_utils_index.utils_exports.escape)(token, "-")].filter(Boolean).join("-")}`;
return {
reference: `var(${variable})`,
variable
};
}
return function(cssMap = {}, cssVars = {}, prevTokens) {
const system = {
...require_create_system.defaultSystem,
cssMap
};
const options = {
css: require_css.css,
system,
theme
};
function getRelatedReference(token, value = "") {
const relatedToken = [token.split(".")[0], value].join(".");
if (token === relatedToken) return [, value];
if (!(tokens[relatedToken] ?? prevTokens?.[relatedToken])) return [, value];
const { reference, variable } = tokenToVar(relatedToken);
return [variable, reference];
}
function valueToVar(value) {
return transformInterpolation(value, (value$1, fallbackValue) => {
if (value$1.includes("colors.") || value$1.includes("colorScheme.")) {
if (isColorScheme(value$1)) return getColorSchemeVar(system)(value$1);
return require_color_mix.colorMix(value$1, {
fallback: fallbackValue,
system
});
} else if (tokens[value$1] ?? prevTokens?.[value$1]) return tokenToVar(value$1).reference;
else if (value$1 in cssMap && cssMap[value$1]?.ref) return cssMap[value$1].ref;
else if (fallbackValue) {
fallbackValue = fallbackValue in cssMap && cssMap[fallbackValue]?.ref ? cssMap[fallbackValue]?.ref : fallbackValue;
return `var(--${prefix}-${value$1}, ${fallbackValue})`;
} else return `var(--${prefix}-${value$1})`;
});
}
function createNegativeVar(token, reference) {
const [start, ...rest] = token.split(".");
const negativeToken = `${start}.-${rest.join(".")}`;
return {
negativeReference: require_utils_index.utils_exports.calc.negate(reference),
negativeToken
};
}
function createAnimationVar(value) {
if ((0, require_utils_index.utils_exports.isArray)(value)) return value.map((value$1) => require_animation.animation(value$1, options)).join(",");
else return require_animation.animation(value, options);
}
function createGradientVar(token, value) {
return function(semantic) {
if (!semantic) return require_gradient.gradient(value, options);
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : require_gradient.gradient(value, options);
}
};
}
function createKeyframesVar(token, value) {
return function(semantic) {
if (!semantic) return require_animation.injectKeyframes(require_css.css(system, theme)(value));
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : require_animation.injectKeyframes(require_css.css(system, theme)(value));
}
};
}
function createColorVar(token, properties, value) {
return function(semantic) {
if (!semantic) return require_color_mix.colorMix(value, {
...options,
properties
});
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : require_color_mix.colorMix(value, {
...options,
properties
});
}
};
}
function createVar(token, value, variable) {
return function(semantic, queries = []) {
if (isAnimation(token)) value = createAnimationVar(value);
if ((0, require_utils_index.utils_exports.isArray)(value)) {
const [lightValue, darkValue] = value;
createVar(token, lightValue, variable)(semantic, queries);
createVar(token, darkValue, variable)(semantic, [...queries, require_conditions.conditions._dark]);
} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value$1]) => {
if (key === "base") createVar(token, value$1, variable)(semantic, queries);
else {
const query = getQuery(key);
if (!query) return;
createVar(token, value$1, variable)(semantic, [...queries, query]);
}
});
else {
const computedValue = valueToVar(value);
let resolvedValue = computedValue;
if (isKeyframes(token)) resolvedValue = createKeyframesVar(token, computedValue)(semantic);
else if (isGradient(token)) resolvedValue = createGradientVar(token, computedValue)(semantic);
else if (isColor(token)) resolvedValue = createColorVar(token, [variable], computedValue)(semantic);
else if (semantic) {
const [, reference] = getRelatedReference(token, computedValue);
resolvedValue = reference;
}
if (!(0, require_utils_index.utils_exports.isObject)(resolvedValue)) resolvedValue = { [variable]: resolvedValue };
const resolvedCssVars = queries.reduceRight((prev, key) => ({ [key]: prev }), resolvedValue);
cssVars = (0, require_utils_index.utils_exports.merge)(cssVars, resolvedCssVars);
}
};
}
for (let [token, { semantic, value }] of Object.entries(tokens)) {
const { reference, variable } = tokenToVar(token);
createVar(token, value, variable)(semantic);
if (isSpace(token)) {
const { negativeReference, negativeToken } = createNegativeVar(token, reference);
cssMap[negativeToken] = {
ref: negativeReference,
var: variable
};
}
cssMap[token] = {
ref: reference,
var: variable
};
}
return {
cssMap,
cssVars
};
};
};
}
function mergeVars(...fns) {
return function(prevTokens) {
let cssMap = {};
let cssVars = {};
for (const fn of fns) {
const result = fn(cssMap, cssVars, prevTokens);
cssMap = {
...cssMap,
...result.cssMap
};
cssVars = {
...cssVars,
...result.cssVars
};
}
return {
cssMap,
cssVars
};
};
}
function varAttr(value, token, fallbackValue) {
if ((0, require_utils_index.utils_exports.isUndefined)(value) || (0, require_utils_index.utils_exports.isNull)(value)) return value;
if ((0, require_utils_index.utils_exports.isObject)(value) || (0, require_utils_index.utils_exports.isArray)(value)) return (0, require_utils_index.utils_exports.replaceObject)(value, (value$1) => varAttr(value$1, token, fallbackValue));
else return token ? `{${token}.${value}, ${fallbackValue ?? value}}` : value;
}
function injectVars(objOrArray, targets, isInvalidProp) {
if (!objOrArray) return objOrArray;
function callback(objOrArray$1) {
return Object.fromEntries(Object.entries(objOrArray$1).flatMap(function([prop, value]) {
if (isInvalidProp?.(prop)) return [[prop, value]];
const target = targets[prop];
const result = [];
if (target) {
const { token } = require_css.getStyle(prop) ?? {};
result.push([`--${target}`, token ? `{${token}.${value}, ${value}}` : value]);
} else if ((0, require_utils_index.utils_exports.isObject)(value)) result.push([prop, injectVars(value, targets)]);
else result.push([prop, value]);
return result;
}));
}
if ((0, require_utils_index.utils_exports.isArray)(objOrArray)) return objOrArray.map(callback);
else return callback(objOrArray);
}
//#endregion
exports.createVars = createVars;
exports.getColorSchemeVar = getColorSchemeVar;
exports.getVar = getVar;
exports.getVarName = getVarName;
exports.injectVars = injectVars;
exports.isColorScheme = isColorScheme;
exports.mergeVars = mergeVars;
exports.transformInterpolation = transformInterpolation;
exports.varAttr = varAttr;
//# sourceMappingURL=var.cjs.map