braid-design-system
Version:
Themeable design system for the SEEK Group
62 lines (61 loc) • 2.07 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { createVar, style, keyframes, fallbackVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { animationTimeout } from "../animationTimeout.mjs";
import { vars } from "../../../themes/vars.css.mjs";
setFileScope("src/lib/components/private/Popover/Popover.css.ts", "braid-design-system");
const backdrop = style({
width: "100vw",
height: "100vh"
}, "backdrop");
const triggerVars = {
top: createVar("triggerVars_top"),
left: createVar("triggerVars_left"),
bottom: createVar("triggerVars_bottom"),
right: createVar("triggerVars_right")
};
const horizontalOffset = createVar("horizontalOffset");
const dynamicHeight = createVar("dynamicHeight");
const popoverPosition = style({
vars: {
[dynamicHeight]: "100svh"
},
top: calc(triggerVars.bottom).multiply("1px").toString(),
bottom: calc(fallbackVar(dynamicHeight, "100vh")).subtract(calc(triggerVars.top).multiply("1px")).toString(),
left: calc(triggerVars.left).add(horizontalOffset).multiply("1px").toString(),
right: calc(triggerVars.right).add(horizontalOffset).multiply("1px").toString()
}, "popoverPosition");
const placementModifier = createVar("placementModifier");
const invertPlacement = style({
vars: {
[placementModifier]: "-1"
}
}, "invertPlacement");
const transitionThreshold = "xxsmall";
const popupAnimation = keyframes({
from: {
opacity: 0,
transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
}
}, "popupAnimation");
const animation = style({
animationName: popupAnimation,
animationFillMode: "both",
animationTimingFunction: "ease",
animationDuration: "0.125s",
animationDelay: `${animationTimeout}ms`
}, "animation");
const delayVisibility = style({
animationDelay: "250ms"
}, "delayVisibility");
endFileScope();
export {
animation,
backdrop,
delayVisibility,
horizontalOffset,
invertPlacement,
popoverPosition,
transitionThreshold,
triggerVars
};