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

Production-grade Preact components that replicate the Figma UI design

.banner {
  position: relative;
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-32);
  border-radius: var(--border-radius-6);
  background-color: var(--figma-color-bg-brand-tertiary);
}
.success {
  background-color: var(--figma-color-bg-success);
}
.warning {
  background-color: var(--figma-color-bg-warning);
}

.icon {
  position: absolute;
  top: var(--space-20);
  left: var(--space-16);
  color: var(--figma-color-icon);
  transform: translate(-50%, -50%);
}
.success .icon {
  color: var(--figma-color-icon-onsuccess);
}
.warning .icon {
  color: var(--figma-color-icon-onwarning);
}

.children {
  flex: 1;
  color: var(--figma-color-text);
}
.success .children {
  color: var(--figma-color-text-onsuccess);
}
.warning .children {
  color: var(--figma-color-text-onwarning);
}