@chakra-ui/styled-system
Version:
Style function for css-in-js building component libraries
69 lines • 3.91 kB
JavaScript
/**
* The CSS transform order following the upcoming spec from CSSWG
* translate => rotate => scale => skew
* @see https://drafts.csswg.org/css-transforms-2/#ctm
* @see https://www.stefanjudis.com/blog/order-in-css-transformation-transform-functions-vs-individual-transforms/
*/
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))"];
export function getTransformTemplate() {
return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))", ...transformTemplate].join(" ");
}
export function getTransformGpuTemplate() {
return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)", ...transformTemplate].join(" ");
}
export 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(" ")
};
export 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,/*!*/ /*!*/)"
};
export 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(", ")
};
}
export 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"
}
};
var owlSelector = "& > :not(style) ~ :not(style)";
export var spaceXTemplate = {
[owlSelector]: {
marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
}
};
export var spaceYTemplate = {
[owlSelector]: {
marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
}
};
//# sourceMappingURL=templates.js.map