@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
232 lines (230 loc) • 8.8 kB
JavaScript
import { utils_exports } from "../../utils/index.js";
import { DEFAULT_VAR_PREFIX } from "../constant.js";
import { defaultSystem } from "./create-system.js";
import { animation, injectKeyframes } from "../css/animation.js";
import { colorMix } from "../css/color-mix.js";
import { conditions } from "../css/conditions.js";
import { gradient } from "../css/gradient.js";
import { css, getStyle } from "../css/css.js";
//#region src/core/system/var.ts
function transformInterpolation(value, callback) {
if ((0, 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 ?? DEFAULT_VAR_PREFIX}-${token}`;
};
}
function getColorSchemeVar(system) {
return function(value, fallback) {
if (!(0, utils_exports.isString)(value)) return value;
const prefix = system.config.css?.varPrefix ?? 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, utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
function createVars(prefix = 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, utils_exports.escape)(token, "-")].filter(Boolean).join("-")}`;
return {
reference: `var(${variable})`,
variable
};
}
return function(cssMap = {}, cssVars = {}, prevTokens) {
const system = {
...defaultSystem,
cssMap
};
const options = {
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 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: utils_exports.calc.negate(reference),
negativeToken
};
}
function createAnimationVar(value) {
if ((0, utils_exports.isArray)(value)) return value.map((value$1) => animation(value$1, options)).join(",");
else return animation(value, options);
}
function createGradientVar(token, value) {
return function(semantic) {
if (!semantic) return gradient(value, options);
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : gradient(value, options);
}
};
}
function createKeyframesVar(token, value) {
return function(semantic) {
if (!semantic) return injectKeyframes(css(system, theme)(value));
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : injectKeyframes(css(system, theme)(value));
}
};
}
function createColorVar(token, properties, value) {
return function(semantic) {
if (!semantic) return colorMix(value, {
...options,
properties
});
else {
const [variable, reference] = getRelatedReference(token, value);
return variable ? reference : colorMix(value, {
...options,
properties
});
}
};
}
function createVar(token, value, variable) {
return function(semantic, queries = []) {
if (isAnimation(token)) value = createAnimationVar(value);
if ((0, utils_exports.isArray)(value)) {
const [lightValue, darkValue] = value;
createVar(token, lightValue, variable)(semantic, queries);
createVar(token, darkValue, variable)(semantic, [...queries, 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, utils_exports.isObject)(resolvedValue)) resolvedValue = { [variable]: resolvedValue };
const resolvedCssVars = queries.reduceRight((prev, key) => ({ [key]: prev }), resolvedValue);
cssVars = (0, 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, utils_exports.isUndefined)(value) || (0, utils_exports.isNull)(value)) return value;
if ((0, utils_exports.isObject)(value) || (0, utils_exports.isArray)(value)) return (0, 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 } = getStyle(prop) ?? {};
result.push([`--${target}`, token ? `{${token}.${value}, ${value}}` : value]);
} else if ((0, utils_exports.isObject)(value)) result.push([prop, injectVars(value, targets)]);
else result.push([prop, value]);
return result;
}));
}
if ((0, utils_exports.isArray)(objOrArray)) return objOrArray.map(callback);
else return callback(objOrArray);
}
//#endregion
export { createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr };
//# sourceMappingURL=var.js.map