2084 lines
64 KiB
JavaScript
2084 lines
64 KiB
JavaScript
"use strict";
|
|
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
addPrefix: () => addPrefix,
|
|
background: () => background,
|
|
border: () => border,
|
|
calc: () => calc,
|
|
color: () => color,
|
|
createMultiStyleConfigHelpers: () => createMultiStyleConfigHelpers,
|
|
css: () => css,
|
|
cssVar: () => cssVar,
|
|
defineCssVars: () => defineCssVars,
|
|
defineStyle: () => defineStyle,
|
|
defineStyleConfig: () => defineStyleConfig,
|
|
effect: () => effect,
|
|
filter: () => filter,
|
|
flattenTokens: () => flattenTokens,
|
|
flexbox: () => flexbox,
|
|
getCSSVar: () => getCSSVar,
|
|
getCss: () => getCss,
|
|
grid: () => grid,
|
|
interactivity: () => interactivity,
|
|
isStyleProp: () => isStyleProp,
|
|
layout: () => layout,
|
|
layoutPropNames: () => layoutPropNames,
|
|
list: () => list,
|
|
omitThemingProps: () => omitThemingProps,
|
|
others: () => others,
|
|
position: () => position,
|
|
propNames: () => propNames,
|
|
pseudoPropNames: () => pseudoPropNames,
|
|
pseudoSelectors: () => pseudoSelectors,
|
|
resolveStyleConfig: () => resolveStyleConfig,
|
|
ring: () => ring,
|
|
scroll: () => scroll,
|
|
space: () => space,
|
|
systemProps: () => systemProps,
|
|
textDecoration: () => textDecoration,
|
|
toCSSVar: () => toCSSVar,
|
|
toVarDefinition: () => toVarDefinition,
|
|
toVarReference: () => toVarReference,
|
|
tokenToCSSVar: () => tokenToCSSVar,
|
|
transform: () => transform,
|
|
transition: () => transition,
|
|
typography: () => typography
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
|
|
// src/utils/create-transform.ts
|
|
var import_shared_utils = require("@chakra-ui/shared-utils");
|
|
var isImportant = (value) => /!(important)?$/.test(value);
|
|
var withoutImportant = (value) => typeof value === "string" ? value.replace(/!(important)?$/, "").trim() : value;
|
|
var tokenToCSSVar = (scale, value) => (theme) => {
|
|
const valueStr = String(value);
|
|
const important = isImportant(valueStr);
|
|
const valueWithoutImportant = withoutImportant(valueStr);
|
|
const key = scale ? `${scale}.${valueWithoutImportant}` : valueWithoutImportant;
|
|
let transformed = (0, import_shared_utils.isObject)(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value;
|
|
transformed = withoutImportant(transformed);
|
|
return important ? `${transformed} !important` : transformed;
|
|
};
|
|
function createTransform(options) {
|
|
const { scale, transform: transform2, compose } = options;
|
|
const fn = (value, theme) => {
|
|
var _a;
|
|
const _value = tokenToCSSVar(scale, value)(theme);
|
|
let result = (_a = transform2 == null ? void 0 : transform2(_value, theme)) != null ? _a : _value;
|
|
if (compose) {
|
|
result = compose(result, theme);
|
|
}
|
|
return result;
|
|
};
|
|
return fn;
|
|
}
|
|
|
|
// src/utils/pipe.ts
|
|
var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
|
|
// src/utils/prop-config.ts
|
|
function toConfig(scale, transform2) {
|
|
return (property) => {
|
|
const result = { property, scale };
|
|
result.transform = createTransform({
|
|
scale,
|
|
transform: transform2
|
|
});
|
|
return result;
|
|
};
|
|
}
|
|
var getRtl = ({ rtl, ltr }) => (theme) => theme.direction === "rtl" ? rtl : ltr;
|
|
function logical(options) {
|
|
const { property, scale, transform: transform2 } = options;
|
|
return {
|
|
scale,
|
|
property: getRtl(property),
|
|
transform: scale ? createTransform({
|
|
scale,
|
|
compose: transform2
|
|
}) : transform2
|
|
};
|
|
}
|
|
|
|
// src/utils/templates.ts
|
|
var transformTemplate = [
|
|
"rotate(var(--chakra-rotate, 0))",
|
|
"scaleX(var(--chakra-scale-x, 1))",
|
|
"scaleY(var(--chakra-scale-y, 1))",
|
|
"skewX(var(--chakra-skew-x, 0))",
|
|
"skewY(var(--chakra-skew-y, 0))"
|
|
];
|
|
function getTransformTemplate() {
|
|
return [
|
|
"translateX(var(--chakra-translate-x, 0))",
|
|
"translateY(var(--chakra-translate-y, 0))",
|
|
...transformTemplate
|
|
].join(" ");
|
|
}
|
|
function getTransformGpuTemplate() {
|
|
return [
|
|
"translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)",
|
|
...transformTemplate
|
|
].join(" ");
|
|
}
|
|
var filterTemplate = {
|
|
"--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
filter: [
|
|
"var(--chakra-blur)",
|
|
"var(--chakra-brightness)",
|
|
"var(--chakra-contrast)",
|
|
"var(--chakra-grayscale)",
|
|
"var(--chakra-hue-rotate)",
|
|
"var(--chakra-invert)",
|
|
"var(--chakra-saturate)",
|
|
"var(--chakra-sepia)",
|
|
"var(--chakra-drop-shadow)"
|
|
].join(" ")
|
|
};
|
|
var backdropFilterTemplate = {
|
|
backdropFilter: [
|
|
"var(--chakra-backdrop-blur)",
|
|
"var(--chakra-backdrop-brightness)",
|
|
"var(--chakra-backdrop-contrast)",
|
|
"var(--chakra-backdrop-grayscale)",
|
|
"var(--chakra-backdrop-hue-rotate)",
|
|
"var(--chakra-backdrop-invert)",
|
|
"var(--chakra-backdrop-opacity)",
|
|
"var(--chakra-backdrop-saturate)",
|
|
"var(--chakra-backdrop-sepia)"
|
|
].join(" "),
|
|
"--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)"
|
|
};
|
|
function getRingTemplate(value) {
|
|
return {
|
|
"--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`,
|
|
"--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`,
|
|
"--chakra-ring-width": value,
|
|
boxShadow: [
|
|
`var(--chakra-ring-offset-shadow)`,
|
|
`var(--chakra-ring-shadow)`,
|
|
`var(--chakra-shadow, 0 0 #0000)`
|
|
].join(", ")
|
|
};
|
|
}
|
|
var flexDirectionTemplate = {
|
|
"row-reverse": {
|
|
space: "--chakra-space-x-reverse",
|
|
divide: "--chakra-divide-x-reverse"
|
|
},
|
|
"column-reverse": {
|
|
space: "--chakra-space-y-reverse",
|
|
divide: "--chakra-divide-y-reverse"
|
|
}
|
|
};
|
|
|
|
// src/utils/parse-gradient.ts
|
|
var directionMap = {
|
|
"to-t": "to top",
|
|
"to-tr": "to top right",
|
|
"to-r": "to right",
|
|
"to-br": "to bottom right",
|
|
"to-b": "to bottom",
|
|
"to-bl": "to bottom left",
|
|
"to-l": "to left",
|
|
"to-tl": "to top left"
|
|
};
|
|
var valueSet = new Set(Object.values(directionMap));
|
|
var globalSet = /* @__PURE__ */ new Set([
|
|
"none",
|
|
"-moz-initial",
|
|
"inherit",
|
|
"initial",
|
|
"revert",
|
|
"unset"
|
|
]);
|
|
var trimSpace = (str) => str.trim();
|
|
function parseGradient(value, theme) {
|
|
if (value == null || globalSet.has(value))
|
|
return value;
|
|
const prevent = isCSSFunction(value) || globalSet.has(value);
|
|
if (!prevent)
|
|
return `url('${value}')`;
|
|
const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
|
|
const results = regex.exec(value);
|
|
const type = results == null ? void 0 : results[1];
|
|
const values = results == null ? void 0 : results[2];
|
|
if (!type || !values)
|
|
return value;
|
|
const _type = type.includes("-gradient") ? type : `${type}-gradient`;
|
|
const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean);
|
|
if ((stops == null ? void 0 : stops.length) === 0)
|
|
return value;
|
|
const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;
|
|
stops.unshift(direction);
|
|
const _values = stops.map((stop) => {
|
|
if (valueSet.has(stop))
|
|
return stop;
|
|
const firstStop = stop.indexOf(" ");
|
|
const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
|
|
const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" ");
|
|
const key = `colors.${_color}`;
|
|
const color2 = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
|
|
return _stopOrFunc ? [
|
|
color2,
|
|
...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]
|
|
].join(" ") : color2;
|
|
});
|
|
return `${_type}(${_values.join(", ")})`;
|
|
}
|
|
var isCSSFunction = (value) => {
|
|
return typeof value === "string" && value.includes("(") && value.includes(")");
|
|
};
|
|
var gradientTransform = (value, theme) => parseGradient(value, theme != null ? theme : {});
|
|
|
|
// src/utils/transform-functions.ts
|
|
function isCssVar(value) {
|
|
return /^var\(--.+\)$/.test(value);
|
|
}
|
|
var analyzeCSSValue = (value) => {
|
|
const num = parseFloat(value.toString());
|
|
const unit = value.toString().replace(String(num), "");
|
|
return { unitless: !unit, value: num, unit };
|
|
};
|
|
var wrap = (str) => (value) => `${str}(${value})`;
|
|
var transformFunctions = {
|
|
filter(value) {
|
|
return value !== "auto" ? value : filterTemplate;
|
|
},
|
|
backdropFilter(value) {
|
|
return value !== "auto" ? value : backdropFilterTemplate;
|
|
},
|
|
ring(value) {
|
|
return getRingTemplate(transformFunctions.px(value));
|
|
},
|
|
bgClip(value) {
|
|
return value === "text" ? { color: "transparent", backgroundClip: "text" } : { backgroundClip: value };
|
|
},
|
|
transform(value) {
|
|
if (value === "auto")
|
|
return getTransformTemplate();
|
|
if (value === "auto-gpu")
|
|
return getTransformGpuTemplate();
|
|
return value;
|
|
},
|
|
vh(value) {
|
|
return value === "$100vh" ? "var(--chakra-vh)" : value;
|
|
},
|
|
px(value) {
|
|
if (value == null)
|
|
return value;
|
|
const { unitless } = analyzeCSSValue(value);
|
|
return unitless || typeof value === "number" ? `${value}px` : value;
|
|
},
|
|
fraction(value) {
|
|
return !(typeof value === "number") || value > 1 ? value : `${value * 100}%`;
|
|
},
|
|
float(value, theme) {
|
|
const map = { left: "right", right: "left" };
|
|
return theme.direction === "rtl" ? map[value] : value;
|
|
},
|
|
degree(value) {
|
|
if (isCssVar(value) || value == null)
|
|
return value;
|
|
const unitless = typeof value === "string" && !value.endsWith("deg");
|
|
return typeof value === "number" || unitless ? `${value}deg` : value;
|
|
},
|
|
gradient: gradientTransform,
|
|
blur: wrap("blur"),
|
|
opacity: wrap("opacity"),
|
|
brightness: wrap("brightness"),
|
|
contrast: wrap("contrast"),
|
|
dropShadow: wrap("drop-shadow"),
|
|
grayscale: wrap("grayscale"),
|
|
hueRotate: (value) => wrap("hue-rotate")(transformFunctions.degree(value)),
|
|
invert: wrap("invert"),
|
|
saturate: wrap("saturate"),
|
|
sepia: wrap("sepia"),
|
|
bgImage(value) {
|
|
if (value == null)
|
|
return value;
|
|
const prevent = isCSSFunction(value) || globalSet.has(value);
|
|
return !prevent ? `url(${value})` : value;
|
|
},
|
|
outline(value) {
|
|
const isNoneOrZero = String(value) === "0" || String(value) === "none";
|
|
return value !== null && isNoneOrZero ? { outline: "2px solid transparent", outlineOffset: "2px" } : { outline: value };
|
|
},
|
|
flexDirection(value) {
|
|
var _a;
|
|
const { space: space2, divide: divide2 } = (_a = flexDirectionTemplate[value]) != null ? _a : {};
|
|
const result = { flexDirection: value };
|
|
if (space2)
|
|
result[space2] = 1;
|
|
if (divide2)
|
|
result[divide2] = 1;
|
|
return result;
|
|
}
|
|
};
|
|
|
|
// src/utils/index.ts
|
|
var t = {
|
|
borderWidths: toConfig("borderWidths"),
|
|
borderStyles: toConfig("borderStyles"),
|
|
colors: toConfig("colors"),
|
|
borders: toConfig("borders"),
|
|
gradients: toConfig("gradients", transformFunctions.gradient),
|
|
radii: toConfig("radii", transformFunctions.px),
|
|
space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
|
|
spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
|
|
degreeT(property) {
|
|
return { property, transform: transformFunctions.degree };
|
|
},
|
|
prop(property, scale, transform2) {
|
|
return {
|
|
property,
|
|
scale,
|
|
...scale && {
|
|
transform: createTransform({ scale, transform: transform2 })
|
|
}
|
|
};
|
|
},
|
|
propT(property, transform2) {
|
|
return { property, transform: transform2 };
|
|
},
|
|
sizes: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.px)),
|
|
sizesT: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.fraction)),
|
|
shadows: toConfig("shadows"),
|
|
logical,
|
|
blur: toConfig("blur", transformFunctions.blur)
|
|
};
|
|
|
|
// src/config/background.ts
|
|
var background = {
|
|
background: t.colors("background"),
|
|
backgroundColor: t.colors("backgroundColor"),
|
|
backgroundImage: t.gradients("backgroundImage"),
|
|
backgroundSize: true,
|
|
backgroundPosition: true,
|
|
backgroundRepeat: true,
|
|
backgroundAttachment: true,
|
|
backgroundClip: { transform: transformFunctions.bgClip },
|
|
bgSize: t.prop("backgroundSize"),
|
|
bgPosition: t.prop("backgroundPosition"),
|
|
bg: t.colors("background"),
|
|
bgColor: t.colors("backgroundColor"),
|
|
bgPos: t.prop("backgroundPosition"),
|
|
bgRepeat: t.prop("backgroundRepeat"),
|
|
bgAttachment: t.prop("backgroundAttachment"),
|
|
bgGradient: t.gradients("backgroundImage"),
|
|
bgClip: { transform: transformFunctions.bgClip }
|
|
};
|
|
Object.assign(background, {
|
|
bgImage: background.backgroundImage,
|
|
bgImg: background.backgroundImage
|
|
});
|
|
|
|
// src/config/border.ts
|
|
var border = {
|
|
border: t.borders("border"),
|
|
borderWidth: t.borderWidths("borderWidth"),
|
|
borderStyle: t.borderStyles("borderStyle"),
|
|
borderColor: t.colors("borderColor"),
|
|
borderRadius: t.radii("borderRadius"),
|
|
borderTop: t.borders("borderTop"),
|
|
borderBlockStart: t.borders("borderBlockStart"),
|
|
borderTopLeftRadius: t.radii("borderTopLeftRadius"),
|
|
borderStartStartRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: "borderTopLeftRadius",
|
|
rtl: "borderTopRightRadius"
|
|
}
|
|
}),
|
|
borderEndStartRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: "borderBottomLeftRadius",
|
|
rtl: "borderBottomRightRadius"
|
|
}
|
|
}),
|
|
borderTopRightRadius: t.radii("borderTopRightRadius"),
|
|
borderStartEndRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: "borderTopRightRadius",
|
|
rtl: "borderTopLeftRadius"
|
|
}
|
|
}),
|
|
borderEndEndRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: "borderBottomRightRadius",
|
|
rtl: "borderBottomLeftRadius"
|
|
}
|
|
}),
|
|
borderRight: t.borders("borderRight"),
|
|
borderInlineEnd: t.borders("borderInlineEnd"),
|
|
borderBottom: t.borders("borderBottom"),
|
|
borderBlockEnd: t.borders("borderBlockEnd"),
|
|
borderBottomLeftRadius: t.radii("borderBottomLeftRadius"),
|
|
borderBottomRightRadius: t.radii("borderBottomRightRadius"),
|
|
borderLeft: t.borders("borderLeft"),
|
|
borderInlineStart: {
|
|
property: "borderInlineStart",
|
|
scale: "borders"
|
|
},
|
|
borderInlineStartRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
|
|
rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
|
|
}
|
|
}),
|
|
borderInlineEndRadius: t.logical({
|
|
scale: "radii",
|
|
property: {
|
|
ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
|
|
rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
|
|
}
|
|
}),
|
|
borderX: t.borders(["borderLeft", "borderRight"]),
|
|
borderInline: t.borders("borderInline"),
|
|
borderY: t.borders(["borderTop", "borderBottom"]),
|
|
borderBlock: t.borders("borderBlock"),
|
|
borderTopWidth: t.borderWidths("borderTopWidth"),
|
|
borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"),
|
|
borderTopColor: t.colors("borderTopColor"),
|
|
borderBlockStartColor: t.colors("borderBlockStartColor"),
|
|
borderTopStyle: t.borderStyles("borderTopStyle"),
|
|
borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"),
|
|
borderBottomWidth: t.borderWidths("borderBottomWidth"),
|
|
borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"),
|
|
borderBottomColor: t.colors("borderBottomColor"),
|
|
borderBlockEndColor: t.colors("borderBlockEndColor"),
|
|
borderBottomStyle: t.borderStyles("borderBottomStyle"),
|
|
borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"),
|
|
borderLeftWidth: t.borderWidths("borderLeftWidth"),
|
|
borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"),
|
|
borderLeftColor: t.colors("borderLeftColor"),
|
|
borderInlineStartColor: t.colors("borderInlineStartColor"),
|
|
borderLeftStyle: t.borderStyles("borderLeftStyle"),
|
|
borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"),
|
|
borderRightWidth: t.borderWidths("borderRightWidth"),
|
|
borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"),
|
|
borderRightColor: t.colors("borderRightColor"),
|
|
borderInlineEndColor: t.colors("borderInlineEndColor"),
|
|
borderRightStyle: t.borderStyles("borderRightStyle"),
|
|
borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"),
|
|
borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
|
|
borderBottomRadius: t.radii([
|
|
"borderBottomLeftRadius",
|
|
"borderBottomRightRadius"
|
|
]),
|
|
borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
|
|
borderRightRadius: t.radii([
|
|
"borderTopRightRadius",
|
|
"borderBottomRightRadius"
|
|
])
|
|
};
|
|
Object.assign(border, {
|
|
rounded: border.borderRadius,
|
|
roundedTop: border.borderTopRadius,
|
|
roundedTopLeft: border.borderTopLeftRadius,
|
|
roundedTopRight: border.borderTopRightRadius,
|
|
roundedTopStart: border.borderStartStartRadius,
|
|
roundedTopEnd: border.borderStartEndRadius,
|
|
roundedBottom: border.borderBottomRadius,
|
|
roundedBottomLeft: border.borderBottomLeftRadius,
|
|
roundedBottomRight: border.borderBottomRightRadius,
|
|
roundedBottomStart: border.borderEndStartRadius,
|
|
roundedBottomEnd: border.borderEndEndRadius,
|
|
roundedLeft: border.borderLeftRadius,
|
|
roundedRight: border.borderRightRadius,
|
|
roundedStart: border.borderInlineStartRadius,
|
|
roundedEnd: border.borderInlineEndRadius,
|
|
borderStart: border.borderInlineStart,
|
|
borderEnd: border.borderInlineEnd,
|
|
borderTopStartRadius: border.borderStartStartRadius,
|
|
borderTopEndRadius: border.borderStartEndRadius,
|
|
borderBottomStartRadius: border.borderEndStartRadius,
|
|
borderBottomEndRadius: border.borderEndEndRadius,
|
|
borderStartRadius: border.borderInlineStartRadius,
|
|
borderEndRadius: border.borderInlineEndRadius,
|
|
borderStartWidth: border.borderInlineStartWidth,
|
|
borderEndWidth: border.borderInlineEndWidth,
|
|
borderStartColor: border.borderInlineStartColor,
|
|
borderEndColor: border.borderInlineEndColor,
|
|
borderStartStyle: border.borderInlineStartStyle,
|
|
borderEndStyle: border.borderInlineEndStyle
|
|
});
|
|
|
|
// src/config/color.ts
|
|
var color = {
|
|
color: t.colors("color"),
|
|
textColor: t.colors("color"),
|
|
fill: t.colors("fill"),
|
|
stroke: t.colors("stroke")
|
|
};
|
|
|
|
// src/config/effect.ts
|
|
var effect = {
|
|
boxShadow: t.shadows("boxShadow"),
|
|
mixBlendMode: true,
|
|
blendMode: t.prop("mixBlendMode"),
|
|
backgroundBlendMode: true,
|
|
bgBlendMode: t.prop("backgroundBlendMode"),
|
|
opacity: true
|
|
};
|
|
Object.assign(effect, {
|
|
shadow: effect.boxShadow
|
|
});
|
|
|
|
// src/config/filter.ts
|
|
var filter = {
|
|
filter: { transform: transformFunctions.filter },
|
|
blur: t.blur("--chakra-blur"),
|
|
brightness: t.propT("--chakra-brightness", transformFunctions.brightness),
|
|
contrast: t.propT("--chakra-contrast", transformFunctions.contrast),
|
|
hueRotate: t.propT("--chakra-hue-rotate", transformFunctions.hueRotate),
|
|
invert: t.propT("--chakra-invert", transformFunctions.invert),
|
|
saturate: t.propT("--chakra-saturate", transformFunctions.saturate),
|
|
dropShadow: t.propT("--chakra-drop-shadow", transformFunctions.dropShadow),
|
|
backdropFilter: { transform: transformFunctions.backdropFilter },
|
|
backdropBlur: t.blur("--chakra-backdrop-blur"),
|
|
backdropBrightness: t.propT(
|
|
"--chakra-backdrop-brightness",
|
|
transformFunctions.brightness
|
|
),
|
|
backdropContrast: t.propT("--chakra-backdrop-contrast", transformFunctions.contrast),
|
|
backdropHueRotate: t.propT(
|
|
"--chakra-backdrop-hue-rotate",
|
|
transformFunctions.hueRotate
|
|
),
|
|
backdropInvert: t.propT("--chakra-backdrop-invert", transformFunctions.invert),
|
|
backdropSaturate: t.propT("--chakra-backdrop-saturate", transformFunctions.saturate)
|
|
};
|
|
|
|
// src/config/flexbox.ts
|
|
var flexbox = {
|
|
alignItems: true,
|
|
alignContent: true,
|
|
justifyItems: true,
|
|
justifyContent: true,
|
|
flexWrap: true,
|
|
flexDirection: { transform: transformFunctions.flexDirection },
|
|
flex: true,
|
|
flexFlow: true,
|
|
flexGrow: true,
|
|
flexShrink: true,
|
|
flexBasis: t.sizes("flexBasis"),
|
|
justifySelf: true,
|
|
alignSelf: true,
|
|
order: true,
|
|
placeItems: true,
|
|
placeContent: true,
|
|
placeSelf: true,
|
|
gap: t.space("gap"),
|
|
rowGap: t.space("rowGap"),
|
|
columnGap: t.space("columnGap")
|
|
};
|
|
Object.assign(flexbox, {
|
|
flexDir: flexbox.flexDirection
|
|
});
|
|
|
|
// src/config/grid.ts
|
|
var grid = {
|
|
gridGap: t.space("gridGap"),
|
|
gridColumnGap: t.space("gridColumnGap"),
|
|
gridRowGap: t.space("gridRowGap"),
|
|
gridColumn: true,
|
|
gridRow: true,
|
|
gridAutoFlow: true,
|
|
gridAutoColumns: true,
|
|
gridColumnStart: true,
|
|
gridColumnEnd: true,
|
|
gridRowStart: true,
|
|
gridRowEnd: true,
|
|
gridAutoRows: true,
|
|
gridTemplate: true,
|
|
gridTemplateColumns: true,
|
|
gridTemplateRows: true,
|
|
gridTemplateAreas: true,
|
|
gridArea: true
|
|
};
|
|
|
|
// src/config/interactivity.ts
|
|
var interactivity = {
|
|
appearance: true,
|
|
cursor: true,
|
|
resize: true,
|
|
userSelect: true,
|
|
pointerEvents: true,
|
|
outline: { transform: transformFunctions.outline },
|
|
outlineOffset: true,
|
|
outlineColor: t.colors("outlineColor")
|
|
};
|
|
|
|
// src/config/layout.ts
|
|
var layout = {
|
|
width: t.sizesT("width"),
|
|
inlineSize: t.sizesT("inlineSize"),
|
|
height: t.sizes("height"),
|
|
blockSize: t.sizes("blockSize"),
|
|
boxSize: t.sizes(["width", "height"]),
|
|
minWidth: t.sizes("minWidth"),
|
|
minInlineSize: t.sizes("minInlineSize"),
|
|
minHeight: t.sizes("minHeight"),
|
|
minBlockSize: t.sizes("minBlockSize"),
|
|
maxWidth: t.sizes("maxWidth"),
|
|
maxInlineSize: t.sizes("maxInlineSize"),
|
|
maxHeight: t.sizes("maxHeight"),
|
|
maxBlockSize: t.sizes("maxBlockSize"),
|
|
overflow: true,
|
|
overflowX: true,
|
|
overflowY: true,
|
|
overscrollBehavior: true,
|
|
overscrollBehaviorX: true,
|
|
overscrollBehaviorY: true,
|
|
display: true,
|
|
aspectRatio: true,
|
|
hideFrom: {
|
|
scale: "breakpoints",
|
|
transform: (value, theme) => {
|
|
var _a, _b, _c;
|
|
const breakpoint = (_c = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
|
|
const mq = `@media screen and (min-width: ${breakpoint})`;
|
|
return { [mq]: { display: "none" } };
|
|
}
|
|
},
|
|
hideBelow: {
|
|
scale: "breakpoints",
|
|
transform: (value, theme) => {
|
|
var _a, _b, _c;
|
|
const breakpoint = (_c = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
|
|
const mq = `@media screen and (max-width: ${breakpoint})`;
|
|
return { [mq]: { display: "none" } };
|
|
}
|
|
},
|
|
verticalAlign: true,
|
|
boxSizing: true,
|
|
boxDecorationBreak: true,
|
|
float: t.propT("float", transformFunctions.float),
|
|
objectFit: true,
|
|
objectPosition: true,
|
|
visibility: true,
|
|
isolation: true
|
|
};
|
|
Object.assign(layout, {
|
|
w: layout.width,
|
|
h: layout.height,
|
|
minW: layout.minWidth,
|
|
maxW: layout.maxWidth,
|
|
minH: layout.minHeight,
|
|
maxH: layout.maxHeight,
|
|
overscroll: layout.overscrollBehavior,
|
|
overscrollX: layout.overscrollBehaviorX,
|
|
overscrollY: layout.overscrollBehaviorY
|
|
});
|
|
|
|
// src/config/list.ts
|
|
var list = {
|
|
listStyleType: true,
|
|
listStylePosition: true,
|
|
listStylePos: t.prop("listStylePosition"),
|
|
listStyleImage: true,
|
|
listStyleImg: t.prop("listStyleImage")
|
|
};
|
|
|
|
// src/get.ts
|
|
function get(obj, path, fallback, index) {
|
|
const key = typeof path === "string" ? path.split(".") : [path];
|
|
for (index = 0; index < key.length; index += 1) {
|
|
if (!obj)
|
|
break;
|
|
obj = obj[key[index]];
|
|
}
|
|
return obj === void 0 ? fallback : obj;
|
|
}
|
|
var memoize = (fn) => {
|
|
const cache = /* @__PURE__ */ new WeakMap();
|
|
const memoizedFn = (obj, path, fallback, index) => {
|
|
if (typeof obj === "undefined") {
|
|
return fn(obj, path, fallback);
|
|
}
|
|
if (!cache.has(obj)) {
|
|
cache.set(obj, /* @__PURE__ */ new Map());
|
|
}
|
|
const map = cache.get(obj);
|
|
if (map.has(path)) {
|
|
return map.get(path);
|
|
}
|
|
const value = fn(obj, path, fallback, index);
|
|
map.set(path, value);
|
|
return value;
|
|
};
|
|
return memoizedFn;
|
|
};
|
|
var memoizedGet = memoize(get);
|
|
|
|
// src/config/others.ts
|
|
var srOnly = {
|
|
border: "0px",
|
|
clip: "rect(0, 0, 0, 0)",
|
|
width: "1px",
|
|
height: "1px",
|
|
margin: "-1px",
|
|
padding: "0px",
|
|
overflow: "hidden",
|
|
whiteSpace: "nowrap",
|
|
position: "absolute"
|
|
};
|
|
var srFocusable = {
|
|
position: "static",
|
|
width: "auto",
|
|
height: "auto",
|
|
clip: "auto",
|
|
padding: "0",
|
|
margin: "0",
|
|
overflow: "visible",
|
|
whiteSpace: "normal"
|
|
};
|
|
var getWithPriority = (theme, key, styles) => {
|
|
const result = {};
|
|
const obj = memoizedGet(theme, key, {});
|
|
for (const prop in obj) {
|
|
const isInStyles = prop in styles && styles[prop] != null;
|
|
if (!isInStyles)
|
|
result[prop] = obj[prop];
|
|
}
|
|
return result;
|
|
};
|
|
var others = {
|
|
srOnly: {
|
|
transform(value) {
|
|
if (value === true)
|
|
return srOnly;
|
|
if (value === "focusable")
|
|
return srFocusable;
|
|
return {};
|
|
}
|
|
},
|
|
layerStyle: {
|
|
processResult: true,
|
|
transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles)
|
|
},
|
|
textStyle: {
|
|
processResult: true,
|
|
transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles)
|
|
},
|
|
apply: {
|
|
processResult: true,
|
|
transform: (value, theme, styles) => getWithPriority(theme, value, styles)
|
|
}
|
|
};
|
|
|
|
// src/config/position.ts
|
|
var position = {
|
|
position: true,
|
|
pos: t.prop("position"),
|
|
zIndex: t.prop("zIndex", "zIndices"),
|
|
inset: t.spaceT("inset"),
|
|
insetX: t.spaceT(["left", "right"]),
|
|
insetInline: t.spaceT("insetInline"),
|
|
insetY: t.spaceT(["top", "bottom"]),
|
|
insetBlock: t.spaceT("insetBlock"),
|
|
top: t.spaceT("top"),
|
|
insetBlockStart: t.spaceT("insetBlockStart"),
|
|
bottom: t.spaceT("bottom"),
|
|
insetBlockEnd: t.spaceT("insetBlockEnd"),
|
|
left: t.spaceT("left"),
|
|
insetInlineStart: t.logical({
|
|
scale: "space",
|
|
property: { ltr: "left", rtl: "right" }
|
|
}),
|
|
right: t.spaceT("right"),
|
|
insetInlineEnd: t.logical({
|
|
scale: "space",
|
|
property: { ltr: "right", rtl: "left" }
|
|
})
|
|
};
|
|
Object.assign(position, {
|
|
insetStart: position.insetInlineStart,
|
|
insetEnd: position.insetInlineEnd
|
|
});
|
|
|
|
// src/config/ring.ts
|
|
var ring = {
|
|
ring: { transform: transformFunctions.ring },
|
|
ringColor: t.colors("--chakra-ring-color"),
|
|
ringOffset: t.prop("--chakra-ring-offset-width"),
|
|
ringOffsetColor: t.colors("--chakra-ring-offset-color"),
|
|
ringInset: t.prop("--chakra-ring-inset")
|
|
};
|
|
|
|
// src/config/space.ts
|
|
var space = {
|
|
margin: t.spaceT("margin"),
|
|
marginTop: t.spaceT("marginTop"),
|
|
marginBlockStart: t.spaceT("marginBlockStart"),
|
|
marginRight: t.spaceT("marginRight"),
|
|
marginInlineEnd: t.spaceT("marginInlineEnd"),
|
|
marginBottom: t.spaceT("marginBottom"),
|
|
marginBlockEnd: t.spaceT("marginBlockEnd"),
|
|
marginLeft: t.spaceT("marginLeft"),
|
|
marginInlineStart: t.spaceT("marginInlineStart"),
|
|
marginX: t.spaceT(["marginInlineStart", "marginInlineEnd"]),
|
|
marginInline: t.spaceT("marginInline"),
|
|
marginY: t.spaceT(["marginTop", "marginBottom"]),
|
|
marginBlock: t.spaceT("marginBlock"),
|
|
padding: t.space("padding"),
|
|
paddingTop: t.space("paddingTop"),
|
|
paddingBlockStart: t.space("paddingBlockStart"),
|
|
paddingRight: t.space("paddingRight"),
|
|
paddingBottom: t.space("paddingBottom"),
|
|
paddingBlockEnd: t.space("paddingBlockEnd"),
|
|
paddingLeft: t.space("paddingLeft"),
|
|
paddingInlineStart: t.space("paddingInlineStart"),
|
|
paddingInlineEnd: t.space("paddingInlineEnd"),
|
|
paddingX: t.space(["paddingInlineStart", "paddingInlineEnd"]),
|
|
paddingInline: t.space("paddingInline"),
|
|
paddingY: t.space(["paddingTop", "paddingBottom"]),
|
|
paddingBlock: t.space("paddingBlock")
|
|
};
|
|
Object.assign(space, {
|
|
m: space.margin,
|
|
mt: space.marginTop,
|
|
mr: space.marginRight,
|
|
me: space.marginInlineEnd,
|
|
marginEnd: space.marginInlineEnd,
|
|
mb: space.marginBottom,
|
|
ml: space.marginLeft,
|
|
ms: space.marginInlineStart,
|
|
marginStart: space.marginInlineStart,
|
|
mx: space.marginX,
|
|
my: space.marginY,
|
|
p: space.padding,
|
|
pt: space.paddingTop,
|
|
py: space.paddingY,
|
|
px: space.paddingX,
|
|
pb: space.paddingBottom,
|
|
pl: space.paddingLeft,
|
|
ps: space.paddingInlineStart,
|
|
paddingStart: space.paddingInlineStart,
|
|
pr: space.paddingRight,
|
|
pe: space.paddingInlineEnd,
|
|
paddingEnd: space.paddingInlineEnd
|
|
});
|
|
|
|
// src/config/text-decoration.ts
|
|
var textDecoration = {
|
|
textDecorationColor: t.colors("textDecorationColor"),
|
|
textDecoration: true,
|
|
textDecor: { property: "textDecoration" },
|
|
textDecorationLine: true,
|
|
textDecorationStyle: true,
|
|
textDecorationThickness: true,
|
|
textUnderlineOffset: true,
|
|
textShadow: t.shadows("textShadow")
|
|
};
|
|
|
|
// src/config/transform.ts
|
|
var transform = {
|
|
clipPath: true,
|
|
transform: t.propT("transform", transformFunctions.transform),
|
|
transformOrigin: true,
|
|
translateX: t.spaceT("--chakra-translate-x"),
|
|
translateY: t.spaceT("--chakra-translate-y"),
|
|
skewX: t.degreeT("--chakra-skew-x"),
|
|
skewY: t.degreeT("--chakra-skew-y"),
|
|
scaleX: t.prop("--chakra-scale-x"),
|
|
scaleY: t.prop("--chakra-scale-y"),
|
|
scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
|
|
rotate: t.degreeT("--chakra-rotate")
|
|
};
|
|
|
|
// src/config/transition.ts
|
|
var transition = {
|
|
transition: true,
|
|
transitionDelay: true,
|
|
animation: true,
|
|
willChange: true,
|
|
transitionDuration: t.prop("transitionDuration", "transition.duration"),
|
|
transitionProperty: t.prop("transitionProperty", "transition.property"),
|
|
transitionTimingFunction: t.prop(
|
|
"transitionTimingFunction",
|
|
"transition.easing"
|
|
)
|
|
};
|
|
|
|
// src/config/typography.ts
|
|
var typography = {
|
|
fontFamily: t.prop("fontFamily", "fonts"),
|
|
fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px),
|
|
fontWeight: t.prop("fontWeight", "fontWeights"),
|
|
lineHeight: t.prop("lineHeight", "lineHeights"),
|
|
letterSpacing: t.prop("letterSpacing", "letterSpacings"),
|
|
textAlign: true,
|
|
fontStyle: true,
|
|
textIndent: true,
|
|
wordBreak: true,
|
|
overflowWrap: true,
|
|
textOverflow: true,
|
|
textTransform: true,
|
|
whiteSpace: true,
|
|
isTruncated: {
|
|
transform(value) {
|
|
if (value === true) {
|
|
return {
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap"
|
|
};
|
|
}
|
|
}
|
|
},
|
|
noOfLines: {
|
|
static: {
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
//@ts-ignore
|
|
WebkitLineClamp: "var(--chakra-line-clamp)"
|
|
},
|
|
property: "--chakra-line-clamp"
|
|
}
|
|
};
|
|
|
|
// src/config/scroll.ts
|
|
var scroll = {
|
|
scrollBehavior: true,
|
|
scrollSnapAlign: true,
|
|
scrollSnapStop: true,
|
|
scrollSnapType: true,
|
|
// scroll margin
|
|
scrollMargin: t.spaceT("scrollMargin"),
|
|
scrollMarginTop: t.spaceT("scrollMarginTop"),
|
|
scrollMarginBottom: t.spaceT("scrollMarginBottom"),
|
|
scrollMarginLeft: t.spaceT("scrollMarginLeft"),
|
|
scrollMarginRight: t.spaceT("scrollMarginRight"),
|
|
scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
|
|
scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
|
|
// scroll padding
|
|
scrollPadding: t.spaceT("scrollPadding"),
|
|
scrollPaddingTop: t.spaceT("scrollPaddingTop"),
|
|
scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
|
|
scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
|
|
scrollPaddingRight: t.spaceT("scrollPaddingRight"),
|
|
scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
|
|
scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
|
|
};
|
|
|
|
// src/create-theme-vars/calc.ts
|
|
var import_shared_utils2 = require("@chakra-ui/shared-utils");
|
|
function resolveReference(operand) {
|
|
if ((0, import_shared_utils2.isObject)(operand) && operand.reference) {
|
|
return operand.reference;
|
|
}
|
|
return String(operand);
|
|
}
|
|
var toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, "");
|
|
var add = (...operands) => `calc(${toExpression("+", ...operands)})`;
|
|
var subtract = (...operands) => `calc(${toExpression("-", ...operands)})`;
|
|
var multiply = (...operands) => `calc(${toExpression("*", ...operands)})`;
|
|
var divide = (...operands) => `calc(${toExpression("/", ...operands)})`;
|
|
var negate = (x) => {
|
|
const value = resolveReference(x);
|
|
if (value != null && !Number.isNaN(parseFloat(value))) {
|
|
return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`;
|
|
}
|
|
return multiply(value, -1);
|
|
};
|
|
var calc = Object.assign(
|
|
(x) => ({
|
|
add: (...operands) => calc(add(x, ...operands)),
|
|
subtract: (...operands) => calc(subtract(x, ...operands)),
|
|
multiply: (...operands) => calc(multiply(x, ...operands)),
|
|
divide: (...operands) => calc(divide(x, ...operands)),
|
|
negate: () => calc(negate(x)),
|
|
toString: () => x.toString()
|
|
}),
|
|
{
|
|
add,
|
|
subtract,
|
|
multiply,
|
|
divide,
|
|
negate
|
|
}
|
|
);
|
|
|
|
// src/create-theme-vars/css-var.ts
|
|
function replaceWhiteSpace(value, replaceValue = "-") {
|
|
return value.replace(/\s+/g, replaceValue);
|
|
}
|
|
function escape(value) {
|
|
const valueStr = replaceWhiteSpace(value.toString());
|
|
return escapeSymbol(escapeDot(valueStr));
|
|
}
|
|
function escapeDot(value) {
|
|
if (value.includes("\\."))
|
|
return value;
|
|
const isDecimal = !Number.isInteger(parseFloat(value.toString()));
|
|
return isDecimal ? value.replace(".", `\\.`) : value;
|
|
}
|
|
function escapeSymbol(value) {
|
|
return value.replace(/[!-,/:-@[-^`{-~]/g, "\\$&");
|
|
}
|
|
function addPrefix(value, prefix = "") {
|
|
return [prefix, value].filter(Boolean).join("-");
|
|
}
|
|
function toVarReference(name, fallback) {
|
|
return `var(${name}${fallback ? `, ${fallback}` : ""})`;
|
|
}
|
|
function toVarDefinition(value, prefix = "") {
|
|
return escape(`--${addPrefix(value, prefix)}`);
|
|
}
|
|
function cssVar(name, fallback, cssVarPrefix) {
|
|
const cssVariable = toVarDefinition(name, cssVarPrefix);
|
|
return {
|
|
variable: cssVariable,
|
|
reference: toVarReference(cssVariable, fallback)
|
|
};
|
|
}
|
|
function defineCssVars(scope, keys2) {
|
|
const vars = {};
|
|
for (const key of keys2) {
|
|
if (Array.isArray(key)) {
|
|
const [name, fallback] = key;
|
|
vars[name] = cssVar(`${scope}-${name}`, fallback);
|
|
continue;
|
|
}
|
|
vars[key] = cssVar(`${scope}-${key}`);
|
|
}
|
|
return vars;
|
|
}
|
|
|
|
// ../../utilities/breakpoint-utils/src/breakpoint.ts
|
|
var import_shared_utils3 = require("@chakra-ui/shared-utils");
|
|
function getLastItem(array) {
|
|
const length = array == null ? 0 : array.length;
|
|
return length ? array[length - 1] : void 0;
|
|
}
|
|
function analyzeCSSValue2(value) {
|
|
const num = parseFloat(value.toString());
|
|
const unit = value.toString().replace(String(num), "");
|
|
return { unitless: !unit, value: num, unit };
|
|
}
|
|
function px(value) {
|
|
if (value == null)
|
|
return value;
|
|
const { unitless } = analyzeCSSValue2(value);
|
|
return unitless || typeof value === "number" ? `${value}px` : value;
|
|
}
|
|
var sortByBreakpointValue = (a, b) => parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1;
|
|
var sortBps = (breakpoints) => Object.fromEntries(Object.entries(breakpoints).sort(sortByBreakpointValue));
|
|
function normalize(breakpoints) {
|
|
const sorted = sortBps(breakpoints);
|
|
return Object.assign(Object.values(sorted), sorted);
|
|
}
|
|
function keys(breakpoints) {
|
|
const value = Object.keys(sortBps(breakpoints));
|
|
return new Set(value);
|
|
}
|
|
function subtract2(value) {
|
|
var _a;
|
|
if (!value)
|
|
return value;
|
|
value = (_a = px(value)) != null ? _a : value;
|
|
const OFFSET = -0.02;
|
|
return typeof value === "number" ? `${value + OFFSET}` : value.replace(/(\d+\.?\d*)/u, (m) => `${parseFloat(m) + OFFSET}`);
|
|
}
|
|
function toMediaQueryString(min, max) {
|
|
const query = ["@media screen"];
|
|
if (min)
|
|
query.push("and", `(min-width: ${px(min)})`);
|
|
if (max)
|
|
query.push("and", `(max-width: ${px(max)})`);
|
|
return query.join(" ");
|
|
}
|
|
function analyzeBreakpoints(breakpoints) {
|
|
var _a;
|
|
if (!breakpoints)
|
|
return null;
|
|
breakpoints.base = (_a = breakpoints.base) != null ? _a : "0px";
|
|
const normalized = normalize(breakpoints);
|
|
const queries = Object.entries(breakpoints).sort(sortByBreakpointValue).map(([breakpoint, minW], index, entry) => {
|
|
var _a2;
|
|
let [, maxW] = (_a2 = entry[index + 1]) != null ? _a2 : [];
|
|
maxW = parseFloat(maxW) > 0 ? subtract2(maxW) : void 0;
|
|
return {
|
|
_minW: subtract2(minW),
|
|
breakpoint,
|
|
minW,
|
|
maxW,
|
|
maxWQuery: toMediaQueryString(null, maxW),
|
|
minWQuery: toMediaQueryString(minW),
|
|
minMaxQuery: toMediaQueryString(minW, maxW)
|
|
};
|
|
});
|
|
const _keys = keys(breakpoints);
|
|
const _keysArr = Array.from(_keys.values());
|
|
return {
|
|
keys: _keys,
|
|
normalized,
|
|
isResponsive(test) {
|
|
const keys2 = Object.keys(test);
|
|
return keys2.length > 0 && keys2.every((key) => _keys.has(key));
|
|
},
|
|
asObject: sortBps(breakpoints),
|
|
asArray: normalize(breakpoints),
|
|
details: queries,
|
|
get(key) {
|
|
return queries.find((q) => q.breakpoint === key);
|
|
},
|
|
media: [
|
|
null,
|
|
...normalized.map((minW) => toMediaQueryString(minW)).slice(1)
|
|
],
|
|
/**
|
|
* Converts the object responsive syntax to array syntax
|
|
*
|
|
* @example
|
|
* toArrayValue({ base: 1, sm: 2, md: 3 }) // => [1, 2, 3]
|
|
*/
|
|
toArrayValue(test) {
|
|
if (!(0, import_shared_utils3.isObject)(test)) {
|
|
throw new Error("toArrayValue: value must be an object");
|
|
}
|
|
const result = _keysArr.map((bp) => {
|
|
var _a2;
|
|
return (_a2 = test[bp]) != null ? _a2 : null;
|
|
});
|
|
while (getLastItem(result) === null) {
|
|
result.pop();
|
|
}
|
|
return result;
|
|
},
|
|
/**
|
|
* Converts the array responsive syntax to object syntax
|
|
*
|
|
* @example
|
|
* toObjectValue([1, 2, 3]) // => { base: 1, sm: 2, md: 3 }
|
|
*/
|
|
toObjectValue(test) {
|
|
if (!Array.isArray(test)) {
|
|
throw new Error("toObjectValue: value must be an array");
|
|
}
|
|
return test.reduce((acc, value, index) => {
|
|
const key = _keysArr[index];
|
|
if (key != null && value != null)
|
|
acc[key] = value;
|
|
return acc;
|
|
}, {});
|
|
}
|
|
};
|
|
}
|
|
|
|
// src/create-theme-vars/create-theme-vars.ts
|
|
var import_shared_utils4 = require("@chakra-ui/shared-utils");
|
|
|
|
// src/pseudos.ts
|
|
var state = {
|
|
hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,
|
|
focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,
|
|
focusVisible: (str, post) => `${str}:focus-visible ${post}`,
|
|
focusWithin: (str, post) => `${str}:focus-within ${post}`,
|
|
active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,
|
|
disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
|
|
invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
|
|
checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,
|
|
indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
|
|
readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
|
|
expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
|
|
placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`
|
|
};
|
|
var toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group");
|
|
var toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
|
|
var merge = (fn, ...selectors) => selectors.map(fn).join(", ");
|
|
var pseudoSelectors = {
|
|
/**
|
|
* Styles for CSS selector `&:hover`
|
|
*/
|
|
_hover: "&:hover, &[data-hover]",
|
|
/**
|
|
* Styles for CSS Selector `&:active`
|
|
*/
|
|
_active: "&:active, &[data-active]",
|
|
/**
|
|
* Styles for CSS selector `&:focus`
|
|
*
|
|
*/
|
|
_focus: "&:focus, &[data-focus]",
|
|
/**
|
|
* Styles for the highlighted state.
|
|
*/
|
|
_highlighted: "&[data-highlighted]",
|
|
/**
|
|
* Styles to apply when a child of this element has received focus
|
|
* - CSS Selector `&:focus-within`
|
|
*/
|
|
_focusWithin: "&:focus-within",
|
|
/**
|
|
* Styles to apply when this element has received focus via tabbing
|
|
* - CSS Selector `&:focus-visible`
|
|
*/
|
|
_focusVisible: "&:focus-visible, &[data-focus-visible]",
|
|
/**
|
|
* Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:
|
|
* - `&[aria-disabled=true]`
|
|
* - `&:disabled`
|
|
* - `&[data-disabled]`
|
|
* - `&[disabled]`
|
|
*/
|
|
_disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
|
|
/**
|
|
* Styles for CSS Selector `&:readonly`
|
|
*/
|
|
_readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
|
|
/**
|
|
* Styles for CSS selector `&::before`
|
|
*
|
|
* NOTE:When using this, ensure the `content` is wrapped in a backtick.
|
|
* @example
|
|
* ```jsx
|
|
* <Box _before={{content:`""` }}/>
|
|
* ```
|
|
*/
|
|
_before: "&::before",
|
|
/**
|
|
* Styles for CSS selector `&::after`
|
|
*
|
|
* NOTE:When using this, ensure the `content` is wrapped in a backtick.
|
|
* @example
|
|
* ```jsx
|
|
* <Box _after={{content:`""` }}/>
|
|
* ```
|
|
*/
|
|
_after: "&::after",
|
|
/**
|
|
* Styles for CSS selector `&:empty`
|
|
*/
|
|
_empty: "&:empty",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-expanded` is `true`
|
|
* - CSS selector `&[aria-expanded=true]`
|
|
*/
|
|
_expanded: "&[aria-expanded=true], &[data-expanded]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-checked` is `true`
|
|
* - CSS selector `&[aria-checked=true]`
|
|
*/
|
|
_checked: "&[aria-checked=true], &[data-checked]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-grabbed` is `true`
|
|
* - CSS selector `&[aria-grabbed=true]`
|
|
*/
|
|
_grabbed: "&[aria-grabbed=true], &[data-grabbed]",
|
|
/**
|
|
* Styles for CSS Selector `&[aria-pressed=true]`
|
|
* Typically used to style the current "pressed" state of toggle buttons
|
|
*/
|
|
_pressed: "&[aria-pressed=true], &[data-pressed]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-invalid` is `true`
|
|
* - CSS selector `&[aria-invalid=true]`
|
|
*/
|
|
_invalid: "&[aria-invalid=true], &[data-invalid]",
|
|
/**
|
|
* Styles for the valid state
|
|
* - CSS selector `&[data-valid], &[data-state=valid]`
|
|
*/
|
|
_valid: "&[data-valid], &[data-state=valid]",
|
|
/**
|
|
* Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`.
|
|
* Useful for styling loading states
|
|
*/
|
|
_loading: "&[data-loading], &[aria-busy=true]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-selected` is `true`
|
|
*
|
|
* - CSS selector `&[aria-selected=true]`
|
|
*/
|
|
_selected: "&[aria-selected=true], &[data-selected]",
|
|
/**
|
|
* Styles for CSS Selector `[hidden=true]`
|
|
*/
|
|
_hidden: "&[hidden], &[data-hidden]",
|
|
/**
|
|
* Styles for CSS Selector `&:-webkit-autofill`
|
|
*/
|
|
_autofill: "&:-webkit-autofill",
|
|
/**
|
|
* Styles for CSS Selector `&:nth-child(even)`
|
|
*/
|
|
_even: "&:nth-of-type(even)",
|
|
/**
|
|
* Styles for CSS Selector `&:nth-child(odd)`
|
|
*/
|
|
_odd: "&:nth-of-type(odd)",
|
|
/**
|
|
* Styles for CSS Selector `&:first-of-type`
|
|
*/
|
|
_first: "&:first-of-type",
|
|
/**
|
|
* Styles for CSS selector `&::first-letter`
|
|
*
|
|
* NOTE: This selector is only applied for block-level elements and not preceded by an image or table.
|
|
* @example
|
|
* ```jsx
|
|
* <Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
|
|
* ```
|
|
*/
|
|
_firstLetter: "&::first-letter",
|
|
/**
|
|
* Styles for CSS Selector `&:last-of-type`
|
|
*/
|
|
_last: "&:last-of-type",
|
|
/**
|
|
* Styles for CSS Selector `&:not(:first-of-type)`
|
|
*/
|
|
_notFirst: "&:not(:first-of-type)",
|
|
/**
|
|
* Styles for CSS Selector `&:not(:last-of-type)`
|
|
*/
|
|
_notLast: "&:not(:last-of-type)",
|
|
/**
|
|
* Styles for CSS Selector `&:visited`
|
|
*/
|
|
_visited: "&:visited",
|
|
/**
|
|
* Used to style the active link in a navigation
|
|
* Styles for CSS Selector `&[aria-current=page]`
|
|
*/
|
|
_activeLink: "&[aria-current=page]",
|
|
/**
|
|
* Used to style the current step within a process
|
|
* Styles for CSS Selector `&[aria-current=step]`
|
|
*/
|
|
_activeStep: "&[aria-current=step]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-checked` is `mixed`
|
|
* - CSS selector `&[aria-checked=mixed]`
|
|
*/
|
|
_indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
|
|
*/
|
|
_groupHover: toGroup(state.hover),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
|
|
*/
|
|
_peerHover: toPeer(state.hover),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
|
|
*/
|
|
_groupFocus: toGroup(state.focus),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is focused
|
|
*/
|
|
_peerFocus: toPeer(state.focus),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
|
|
*/
|
|
_groupFocusVisible: toGroup(state.focusVisible),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
|
|
*/
|
|
_peerFocusVisible: toPeer(state.focusVisible),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
|
|
*/
|
|
_groupActive: toGroup(state.active),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is active
|
|
*/
|
|
_peerActive: toPeer(state.active),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
|
|
*/
|
|
_groupDisabled: toGroup(state.disabled),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
|
|
*/
|
|
_peerDisabled: toPeer(state.disabled),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
|
|
*/
|
|
_groupInvalid: toGroup(state.invalid),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
|
|
*/
|
|
_peerInvalid: toPeer(state.invalid),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
|
|
*/
|
|
_groupChecked: toGroup(state.checked),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is checked
|
|
*/
|
|
_peerChecked: toPeer(state.checked),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
|
|
*/
|
|
_groupFocusWithin: toGroup(state.focusWithin),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
|
|
*/
|
|
_peerFocusWithin: toPeer(state.focusWithin),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
|
|
*/
|
|
_peerPlaceholderShown: toPeer(state.placeholderShown),
|
|
/**
|
|
* Styles for CSS Selector `&::placeholder`.
|
|
*/
|
|
_placeholder: "&::placeholder",
|
|
/**
|
|
* Styles for CSS Selector `&:placeholder-shown`.
|
|
*/
|
|
_placeholderShown: "&:placeholder-shown",
|
|
/**
|
|
* Styles for CSS Selector `&:fullscreen`.
|
|
*/
|
|
_fullScreen: "&:fullscreen",
|
|
/**
|
|
* Styles for CSS Selector `&::selection`
|
|
*/
|
|
_selection: "&::selection",
|
|
/**
|
|
* Styles for CSS Selector `[dir=rtl] &`
|
|
* It is applied when a parent element or this element has `dir="rtl"`
|
|
*/
|
|
_rtl: "[dir=rtl] &, &[dir=rtl]",
|
|
/**
|
|
* Styles for CSS Selector `[dir=ltr] &`
|
|
* It is applied when a parent element or this element has `dir="ltr"`
|
|
*/
|
|
_ltr: "[dir=ltr] &, &[dir=ltr]",
|
|
/**
|
|
* Styles for CSS Selector `@media (prefers-color-scheme: dark)`
|
|
* It is used when the user has requested the system use a light or dark color theme.
|
|
*/
|
|
_mediaDark: "@media (prefers-color-scheme: dark)",
|
|
/**
|
|
* Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
|
|
* It is used when the user has requested the system to reduce the amount of animations.
|
|
*/
|
|
_mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
|
|
/**
|
|
* Styles for when `data-theme` is applied to any parent of
|
|
* this component or element.
|
|
*/
|
|
_dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
|
|
/**
|
|
* Styles for when `data-theme` is applied to any parent of
|
|
* this component or element.
|
|
*/
|
|
_light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-orientation=horizontal]`
|
|
*/
|
|
_horizontal: "&[data-orientation=horizontal]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-orientation=vertical]`
|
|
*/
|
|
_vertical: "&[data-orientation=vertical]"
|
|
};
|
|
var pseudoPropNames = Object.keys(
|
|
pseudoSelectors
|
|
);
|
|
|
|
// src/create-theme-vars/create-theme-vars.ts
|
|
var import_lodash = __toESM(require("lodash.mergewith"));
|
|
function tokenToCssVar(token, prefix) {
|
|
return cssVar(String(token).replace(/\./g, "-"), void 0, prefix);
|
|
}
|
|
function createThemeVars(flatTokens, options) {
|
|
let cssVars = {};
|
|
const cssMap = {};
|
|
for (const [token, tokenValue] of Object.entries(flatTokens)) {
|
|
const { isSemantic, value } = tokenValue;
|
|
const { variable, reference } = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix);
|
|
if (!isSemantic) {
|
|
if (token.startsWith("space")) {
|
|
const keys2 = token.split(".");
|
|
const [firstKey, ...referenceKeys] = keys2;
|
|
const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`;
|
|
const negativeValue = calc.negate(value);
|
|
const negatedReference = calc.negate(reference);
|
|
cssMap[negativeLookupKey] = {
|
|
value: negativeValue,
|
|
var: variable,
|
|
varRef: negatedReference
|
|
};
|
|
}
|
|
cssVars[variable] = value;
|
|
cssMap[token] = {
|
|
value,
|
|
var: variable,
|
|
varRef: reference
|
|
};
|
|
continue;
|
|
}
|
|
const lookupToken = (maybeToken) => {
|
|
const scale = String(token).split(".")[0];
|
|
const withScale = [scale, maybeToken].join(".");
|
|
const resolvedTokenValue = flatTokens[withScale];
|
|
if (!resolvedTokenValue)
|
|
return maybeToken;
|
|
const { reference: reference2 } = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix);
|
|
return reference2;
|
|
};
|
|
const normalizedValue = (0, import_shared_utils4.isObject)(value) ? value : { default: value };
|
|
cssVars = (0, import_lodash.default)(
|
|
cssVars,
|
|
Object.entries(normalizedValue).reduce(
|
|
(acc, [conditionAlias, conditionValue]) => {
|
|
var _a, _b;
|
|
if (!conditionValue)
|
|
return acc;
|
|
const tokenReference = lookupToken(`${conditionValue}`);
|
|
if (conditionAlias === "default") {
|
|
acc[variable] = tokenReference;
|
|
return acc;
|
|
}
|
|
const conditionSelector = (_b = (_a = pseudoSelectors) == null ? void 0 : _a[conditionAlias]) != null ? _b : conditionAlias;
|
|
acc[conditionSelector] = { [variable]: tokenReference };
|
|
return acc;
|
|
},
|
|
{}
|
|
)
|
|
);
|
|
cssMap[token] = {
|
|
value: reference,
|
|
var: variable,
|
|
varRef: reference
|
|
};
|
|
}
|
|
return {
|
|
cssVars,
|
|
cssMap
|
|
};
|
|
}
|
|
|
|
// ../../utilities/object-utils/src/omit.ts
|
|
function omit(object, keysToOmit = []) {
|
|
const clone = Object.assign({}, object);
|
|
for (const key of keysToOmit) {
|
|
if (key in clone) {
|
|
delete clone[key];
|
|
}
|
|
}
|
|
return clone;
|
|
}
|
|
|
|
// ../../utilities/object-utils/src/pick.ts
|
|
function pick(object, keysToPick) {
|
|
const result = {};
|
|
for (const key of keysToPick) {
|
|
if (key in object) {
|
|
result[key] = object[key];
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// ../../utilities/object-utils/src/walk-object.ts
|
|
function isObject5(value) {
|
|
return typeof value === "object" && value != null && !Array.isArray(value);
|
|
}
|
|
function walkObject(target, predicate, options = {}) {
|
|
const { stop, getKey } = options;
|
|
function inner(value, path = []) {
|
|
var _a;
|
|
if (isObject5(value) || Array.isArray(value)) {
|
|
const result = {};
|
|
for (const [prop, child] of Object.entries(value)) {
|
|
const key = (_a = getKey == null ? void 0 : getKey(prop)) != null ? _a : prop;
|
|
const childPath = [...path, key];
|
|
if (stop == null ? void 0 : stop(value, childPath)) {
|
|
return predicate(value, path);
|
|
}
|
|
result[key] = inner(child, childPath);
|
|
}
|
|
return result;
|
|
}
|
|
return predicate(value, path);
|
|
}
|
|
return inner(target);
|
|
}
|
|
|
|
// src/create-theme-vars/theme-tokens.ts
|
|
var tokens = [
|
|
"colors",
|
|
"borders",
|
|
"borderWidths",
|
|
"borderStyles",
|
|
"fonts",
|
|
"fontSizes",
|
|
"fontWeights",
|
|
"gradients",
|
|
"letterSpacings",
|
|
"lineHeights",
|
|
"radii",
|
|
"space",
|
|
"shadows",
|
|
"sizes",
|
|
"zIndices",
|
|
"transition",
|
|
"blur",
|
|
"breakpoints"
|
|
];
|
|
function extractTokens(theme) {
|
|
const _tokens = tokens;
|
|
return pick(theme, _tokens);
|
|
}
|
|
function extractSemanticTokens(theme) {
|
|
return theme.semanticTokens;
|
|
}
|
|
function omitVars(rawTheme) {
|
|
const { __cssMap, __cssVars, __breakpoints, ...cleanTheme } = rawTheme;
|
|
return cleanTheme;
|
|
}
|
|
|
|
// src/create-theme-vars/flatten-tokens.ts
|
|
var isSemanticCondition = (key) => pseudoPropNames.includes(key) || "default" === key;
|
|
function flattenTokens({
|
|
tokens: tokens2,
|
|
semanticTokens
|
|
}) {
|
|
const result = {};
|
|
walkObject(tokens2, (value, path) => {
|
|
if (value == null)
|
|
return;
|
|
result[path.join(".")] = { isSemantic: false, value };
|
|
});
|
|
walkObject(
|
|
semanticTokens,
|
|
(value, path) => {
|
|
if (value == null)
|
|
return;
|
|
result[path.join(".")] = { isSemantic: true, value };
|
|
},
|
|
{
|
|
stop: (value) => Object.keys(value).every(isSemanticCondition)
|
|
}
|
|
);
|
|
return result;
|
|
}
|
|
|
|
// src/create-theme-vars/to-css-var.ts
|
|
function toCSSVar(rawTheme) {
|
|
var _a;
|
|
const theme = omitVars(rawTheme);
|
|
const tokens2 = extractTokens(theme);
|
|
const semanticTokens = extractSemanticTokens(theme);
|
|
const flatTokens = flattenTokens({ tokens: tokens2, semanticTokens });
|
|
const cssVarPrefix = (_a = theme.config) == null ? void 0 : _a.cssVarPrefix;
|
|
const {
|
|
/**
|
|
* This is more like a dictionary of tokens users will type `green.500`,
|
|
* and their equivalent css variable.
|
|
*/
|
|
cssMap,
|
|
/**
|
|
* The extracted css variables will be stored here, and used in
|
|
* the emotion's <Global/> component to attach variables to `:root`
|
|
*/
|
|
cssVars
|
|
} = createThemeVars(flatTokens, { cssVarPrefix });
|
|
const defaultCssVars = {
|
|
"--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
|
|
"--chakra-ring-offset-width": "0px",
|
|
"--chakra-ring-offset-color": "#fff",
|
|
"--chakra-ring-color": "rgba(66, 153, 225, 0.6)",
|
|
"--chakra-ring-offset-shadow": "0 0 #0000",
|
|
"--chakra-ring-shadow": "0 0 #0000",
|
|
"--chakra-space-x-reverse": "0",
|
|
"--chakra-space-y-reverse": "0"
|
|
};
|
|
Object.assign(theme, {
|
|
__cssVars: { ...defaultCssVars, ...cssVars },
|
|
__cssMap: cssMap,
|
|
__breakpoints: analyzeBreakpoints(theme.breakpoints)
|
|
});
|
|
return theme;
|
|
}
|
|
|
|
// src/css.ts
|
|
var import_shared_utils6 = require("@chakra-ui/shared-utils");
|
|
var import_lodash3 = __toESM(require("lodash.mergewith"));
|
|
|
|
// src/system.ts
|
|
var import_lodash2 = __toESM(require("lodash.mergewith"));
|
|
var systemProps = (0, import_lodash2.default)(
|
|
{},
|
|
background,
|
|
border,
|
|
color,
|
|
flexbox,
|
|
layout,
|
|
filter,
|
|
ring,
|
|
interactivity,
|
|
grid,
|
|
others,
|
|
position,
|
|
effect,
|
|
space,
|
|
scroll,
|
|
typography,
|
|
textDecoration,
|
|
transform,
|
|
list,
|
|
transition
|
|
);
|
|
var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
|
|
var layoutPropNames = Object.keys(
|
|
layoutSystem
|
|
);
|
|
var propNames = [...Object.keys(systemProps), ...pseudoPropNames];
|
|
var styleProps = { ...systemProps, ...pseudoSelectors };
|
|
var isStyleProp = (prop) => prop in styleProps;
|
|
|
|
// src/utils/expand-responsive.ts
|
|
var import_shared_utils5 = require("@chakra-ui/shared-utils");
|
|
var expandResponsive = (styles) => (theme) => {
|
|
if (!theme.__breakpoints)
|
|
return styles;
|
|
const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints;
|
|
const computedStyles = {};
|
|
for (const key in styles) {
|
|
let value = (0, import_shared_utils5.runIfFn)(styles[key], theme);
|
|
if (value == null)
|
|
continue;
|
|
value = (0, import_shared_utils5.isObject)(value) && isResponsive(value) ? toArrayValue(value) : value;
|
|
if (!Array.isArray(value)) {
|
|
computedStyles[key] = value;
|
|
continue;
|
|
}
|
|
const queries = value.slice(0, medias.length).length;
|
|
for (let index = 0; index < queries; index += 1) {
|
|
const media = medias == null ? void 0 : medias[index];
|
|
if (!media) {
|
|
computedStyles[key] = value[index];
|
|
continue;
|
|
}
|
|
computedStyles[media] = computedStyles[media] || {};
|
|
if (value[index] == null) {
|
|
continue;
|
|
}
|
|
computedStyles[media][key] = value[index];
|
|
}
|
|
}
|
|
return computedStyles;
|
|
};
|
|
|
|
// src/utils/split-by-comma.ts
|
|
function splitByComma(value) {
|
|
const chunks = [];
|
|
let chunk = "";
|
|
let inParens = false;
|
|
for (let i = 0; i < value.length; i++) {
|
|
const char = value[i];
|
|
if (char === "(") {
|
|
inParens = true;
|
|
chunk += char;
|
|
} else if (char === ")") {
|
|
inParens = false;
|
|
chunk += char;
|
|
} else if (char === "," && !inParens) {
|
|
chunks.push(chunk);
|
|
chunk = "";
|
|
} else {
|
|
chunk += char;
|
|
}
|
|
}
|
|
chunk = chunk.trim();
|
|
if (chunk) {
|
|
chunks.push(chunk);
|
|
}
|
|
return chunks;
|
|
}
|
|
|
|
// src/css.ts
|
|
function isCssVar2(value) {
|
|
return /^var\(--.+\)$/.test(value);
|
|
}
|
|
var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && typeof value === "string" && !isCssVar2(value);
|
|
var resolveTokenValue = (theme, value) => {
|
|
var _a, _b;
|
|
if (value == null)
|
|
return value;
|
|
const getVar = (val) => {
|
|
var _a2, _b2;
|
|
return (_b2 = (_a2 = theme.__cssMap) == null ? void 0 : _a2[val]) == null ? void 0 : _b2.varRef;
|
|
};
|
|
const getValue = (val) => {
|
|
var _a2;
|
|
return (_a2 = getVar(val)) != null ? _a2 : val;
|
|
};
|
|
const [tokenValue, fallbackValue] = splitByComma(value);
|
|
value = (_b = (_a = getVar(tokenValue)) != null ? _a : getValue(fallbackValue)) != null ? _b : getValue(value);
|
|
return value;
|
|
};
|
|
function getCss(options) {
|
|
const { configs = {}, pseudos = {}, theme } = options;
|
|
const css2 = (stylesOrFn, nested = false) => {
|
|
var _a, _b, _c;
|
|
const _styles = (0, import_shared_utils6.runIfFn)(stylesOrFn, theme);
|
|
const styles = expandResponsive(_styles)(theme);
|
|
let computedStyles = {};
|
|
for (let key in styles) {
|
|
const valueOrFn = styles[key];
|
|
let value = (0, import_shared_utils6.runIfFn)(valueOrFn, theme);
|
|
if (key in pseudos) {
|
|
key = pseudos[key];
|
|
}
|
|
if (isCSSVariableTokenValue(key, value)) {
|
|
value = resolveTokenValue(theme, value);
|
|
}
|
|
let config = configs[key];
|
|
if (config === true) {
|
|
config = { property: key };
|
|
}
|
|
if ((0, import_shared_utils6.isObject)(value)) {
|
|
computedStyles[key] = (_a = computedStyles[key]) != null ? _a : {};
|
|
computedStyles[key] = (0, import_lodash3.default)(
|
|
{},
|
|
computedStyles[key],
|
|
css2(value, true)
|
|
);
|
|
continue;
|
|
}
|
|
let rawValue = (_c = (_b = config == null ? void 0 : config.transform) == null ? void 0 : _b.call(config, value, theme, _styles)) != null ? _c : value;
|
|
rawValue = (config == null ? void 0 : config.processResult) ? css2(rawValue, true) : rawValue;
|
|
const configProperty = (0, import_shared_utils6.runIfFn)(config == null ? void 0 : config.property, theme);
|
|
if (!nested && (config == null ? void 0 : config.static)) {
|
|
const staticStyles = (0, import_shared_utils6.runIfFn)(config.static, theme);
|
|
computedStyles = (0, import_lodash3.default)({}, computedStyles, staticStyles);
|
|
}
|
|
if (configProperty && Array.isArray(configProperty)) {
|
|
for (const property of configProperty) {
|
|
computedStyles[property] = rawValue;
|
|
}
|
|
continue;
|
|
}
|
|
if (configProperty) {
|
|
if (configProperty === "&" && (0, import_shared_utils6.isObject)(rawValue)) {
|
|
computedStyles = (0, import_lodash3.default)({}, computedStyles, rawValue);
|
|
} else {
|
|
computedStyles[configProperty] = rawValue;
|
|
}
|
|
continue;
|
|
}
|
|
if ((0, import_shared_utils6.isObject)(rawValue)) {
|
|
computedStyles = (0, import_lodash3.default)({}, computedStyles, rawValue);
|
|
continue;
|
|
}
|
|
computedStyles[key] = rawValue;
|
|
}
|
|
return computedStyles;
|
|
};
|
|
return css2;
|
|
}
|
|
var css = (styles) => (theme) => {
|
|
const cssFn = getCss({
|
|
theme,
|
|
pseudos: pseudoSelectors,
|
|
configs: systemProps
|
|
});
|
|
return cssFn(styles);
|
|
};
|
|
|
|
// src/define-styles.ts
|
|
function defineStyle(styles) {
|
|
return styles;
|
|
}
|
|
function defineStyleConfig(config) {
|
|
return config;
|
|
}
|
|
function createMultiStyleConfigHelpers(parts) {
|
|
return {
|
|
definePartsStyle(config) {
|
|
return config;
|
|
},
|
|
defineMultiStyleConfig(config) {
|
|
return { parts, ...config };
|
|
}
|
|
};
|
|
}
|
|
|
|
// src/style-config.ts
|
|
var import_shared_utils7 = require("@chakra-ui/shared-utils");
|
|
var import_lodash4 = __toESM(require("lodash.mergewith"));
|
|
function normalize2(value, toArray) {
|
|
if (Array.isArray(value))
|
|
return value;
|
|
if ((0, import_shared_utils7.isObject)(value))
|
|
return toArray(value);
|
|
if (value != null)
|
|
return [value];
|
|
}
|
|
function getNextIndex(values, i) {
|
|
for (let j = i + 1; j < values.length; j++) {
|
|
if (values[j] != null)
|
|
return j;
|
|
}
|
|
return -1;
|
|
}
|
|
function createResolver(theme) {
|
|
const breakpointUtil = theme.__breakpoints;
|
|
return function resolver(config, prop, value, props) {
|
|
var _a, _b;
|
|
if (!breakpointUtil)
|
|
return;
|
|
const result = {};
|
|
const normalized = normalize2(value, breakpointUtil.toArrayValue);
|
|
if (!normalized)
|
|
return result;
|
|
const len = normalized.length;
|
|
const isSingle = len === 1;
|
|
const isMultipart = !!config.parts;
|
|
for (let i = 0; i < len; i++) {
|
|
const key = breakpointUtil.details[i];
|
|
const nextKey = breakpointUtil.details[getNextIndex(normalized, i)];
|
|
const query = toMediaQueryString(key.minW, nextKey == null ? void 0 : nextKey._minW);
|
|
const styles = (0, import_shared_utils7.runIfFn)((_a = config[prop]) == null ? void 0 : _a[normalized[i]], props);
|
|
if (!styles)
|
|
continue;
|
|
if (isMultipart) {
|
|
(_b = config.parts) == null ? void 0 : _b.forEach((part) => {
|
|
(0, import_lodash4.default)(result, {
|
|
[part]: isSingle ? styles[part] : { [query]: styles[part] }
|
|
});
|
|
});
|
|
continue;
|
|
}
|
|
if (!isMultipart) {
|
|
if (isSingle)
|
|
(0, import_lodash4.default)(result, styles);
|
|
else
|
|
result[query] = styles;
|
|
continue;
|
|
}
|
|
result[query] = styles;
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
function resolveStyleConfig(config) {
|
|
return (props) => {
|
|
var _a;
|
|
const { variant, size, theme } = props;
|
|
const recipe = createResolver(theme);
|
|
return (0, import_lodash4.default)(
|
|
{},
|
|
(0, import_shared_utils7.runIfFn)((_a = config.baseStyle) != null ? _a : {}, props),
|
|
recipe(config, "sizes", size, props),
|
|
recipe(config, "variants", variant, props)
|
|
);
|
|
};
|
|
}
|
|
|
|
// src/get-css-var.ts
|
|
function getCSSVar(theme, scale, value) {
|
|
var _a, _b, _c;
|
|
return (_c = (_b = (_a = theme.__cssMap) == null ? void 0 : _a[`${scale}.${value}`]) == null ? void 0 : _b.varRef) != null ? _c : value;
|
|
}
|
|
|
|
// src/theming-props.ts
|
|
function omitThemingProps(props) {
|
|
return omit(props, ["styleConfig", "size", "variant", "colorScheme"]);
|
|
}
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
addPrefix,
|
|
background,
|
|
border,
|
|
calc,
|
|
color,
|
|
createMultiStyleConfigHelpers,
|
|
css,
|
|
cssVar,
|
|
defineCssVars,
|
|
defineStyle,
|
|
defineStyleConfig,
|
|
effect,
|
|
filter,
|
|
flattenTokens,
|
|
flexbox,
|
|
getCSSVar,
|
|
getCss,
|
|
grid,
|
|
interactivity,
|
|
isStyleProp,
|
|
layout,
|
|
layoutPropNames,
|
|
list,
|
|
omitThemingProps,
|
|
others,
|
|
position,
|
|
propNames,
|
|
pseudoPropNames,
|
|
pseudoSelectors,
|
|
resolveStyleConfig,
|
|
ring,
|
|
scroll,
|
|
space,
|
|
systemProps,
|
|
textDecoration,
|
|
toCSSVar,
|
|
toVarDefinition,
|
|
toVarReference,
|
|
tokenToCSSVar,
|
|
transform,
|
|
transition,
|
|
typography
|
|
});
|