braid-design-system
Version:
Themeable design system for the SEEK Group
59 lines (58 loc) • 1.74 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants, createVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { space } from "../../css/atoms/atomicProperties.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
const constants = {
maxWidth: "260px",
arrowSize: "12px"
};
const maxWidth = style({
maxWidth: constants.maxWidth
}, "maxWidth");
const overflowWrap = style({
overflowWrap: "break-word"
}, "overflowWrap");
const translateZ0 = style({
transform: "translateZ(0)"
}, "translateZ0");
const borderRadius = vars.borderRadius.small;
const offset = calc(constants.arrowSize).divide(2).negate().toString();
const horizontalOffset = createVar("horizontalOffset");
const arrowEdgePadding = "medium";
const baseArrow = style({
left: `clamp(${[space[arrowEdgePadding], horizontalOffset, calc("100%").subtract(space[arrowEdgePadding])].join(", ")})`,
transform: "translateX(-50%)",
visibility: "hidden",
":before": {
visibility: "visible",
content: "''",
transform: "rotate(45deg)"
},
selectors: {
"&, &::before": {
width: calc.add(constants.arrowSize, calc.multiply(borderRadius, 2)),
height: calc.add(constants.arrowSize, calc.multiply(borderRadius, 2)),
position: "absolute",
background: "inherit",
borderRadius
}
}
}, "baseArrow");
const arrow = styleVariants({
top: [baseArrow, {
bottom: offset
}],
bottom: [baseArrow, {
top: offset
}]
}, "arrow");
endFileScope();
export {
arrow,
horizontalOffset,
maxWidth,
overflowWrap,
translateZ0
};