Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
TypeScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import * as stylex from "@stylexjs/stylex";import { use } from "react";
import type { Size } from "../types";
import { SizeContext } from "../context";import { animationDuration, animations } from "../theme/animations.stylex";import { radius } from "../theme/radius.stylex";import { shadow } from "../theme/shadow.stylex";import { gray } from "./semantic-color.stylex";
const styles = stylex.create({ overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", position: "absolute", zIndex: 100, height: "var(--page-height)", left: 0, top: 0, width: "100vw",
animationDuration: animationDuration.slow, animationName: { ":is([data-entering])": animations.fadeIn, }, animationTimingFunction: "ease-in", opacity: { default: 1, ":is([data-exiting])": 0, }, transitionDuration: { ":is([data-exiting])": animationDuration.fast, }, transitionProperty: "opacity", transitionTimingFunction: "ease-in-out", }, modal: { borderRadius: radius["lg"], outline: "none", boxShadow: shadow["lg"], display: "flex", flexDirection: "column", position: "fixed", translate: "-50% -50%", left: "50%", maxHeight: "calc(var(--visual-viewport-height) * 0.8)", top: "calc(var(--visual-viewport-height) / 2)",
animationDuration: { ":is([data-entering])": animationDuration.verySlow }, animationName: { ":is([data-entering])": animations.zoomIn }, animationTimingFunction: { ":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)", }, }, dialog: { outline: "none", display: "flex", flexDirection: "column", flexGrow: 1, minHeight: 0, }, sm: { width: 400, }, md: { width: 600, }, lg: { width: 800, },});
export function useDialogStyles({ size: sizeProp }: { size?: Size }) { const size = sizeProp || use(SizeContext);
return { overlay: styles.overlay, modal: [ styles.modal, styles.modal, gray.bg, gray.text, gray.border, styles[size], ], dialog: styles.dialog, };}