@chakra-ui/styled-system
Version:
Style function for css-in-js building component libraries
96 lines (93 loc) • 3.52 kB
JavaScript
;
const 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(" ");
}
const 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(" ")
};
const 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(", ")
};
}
const 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"
}
};
exports.backdropFilterTemplate = backdropFilterTemplate;
exports.filterTemplate = filterTemplate;
exports.flexDirectionTemplate = flexDirectionTemplate;
exports.getRingTemplate = getRingTemplate;
exports.getTransformGpuTemplate = getTransformGpuTemplate;
exports.getTransformTemplate = getTransformTemplate;