@create-figma-plugin/ui/lib/components/modal/modal.module.css

Production-grade Preact components that replicate the Figma UI design

.modal {
  position: fixed;
  z-index: var(--z-index-2);
  display: flex;
  flex-direction: column;
  background-color: var(--figma-color-bg);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.noTransition {
  transition: none;
}

.center {
  top: 50%;
  left: 50%;
  border-radius: var(--border-radius-2);
  box-shadow: var(--box-shadow-modal);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition-property: opacity;
}
.open.center {
  opacity: 1;
  pointer-events: all;
}

.bottom {
  top: 100%;
  left: 0;
  width: 100%;
}
.open.bottom {
  box-shadow: var(--box-shadow-modal);
  transform: translate(0, -100%);
}

.left {
  top: 0;
  right: 100%;
  height: 100%;
}
.open.left {
  box-shadow: var(--box-shadow-modal);
  transform: translate(100%, 0);
}

.right {
  top: 0;
  left: 100%;
  height: 100%;
}
.open.right {
  box-shadow: var(--box-shadow-modal);
  transform: translate(-100%, 0);
}

.topBar {
  display: flex;
  min-height: 41px;
  align-items: center;
  order: -1;
  padding: 4px;
  border-color: var(--figma-color-border);
  border-bottom-width: 1px;
}

.closeButton {
  display: flex;
}
.closeButtonLeft {
  order: -1;
}

.title {
  flex-grow: 1;
  padding: 0 var(--space-extra-small);
}

.overlay {
  position: fixed;
  z-index: var(--z-index-1);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-bg-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity ease 0.3s;
}
.open ~ .overlay {
  opacity: 1;
  pointer-events: all;
}
.noTransition ~ .overlay {
  transition: none;
}