Add missing styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/css/styles.css

@@ -10838,6 +10838,129 @@
 
 @layer legacy;
 
+.bui-DialogOverlay {
+  z-index: 1000;
+  background: #e8e8e8cc;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+[data-theme="dark"] .bui-Dialog {
+  background: #00000080;
+}
+
+.bui-DialogOverlay[data-entering] {
+  animation: .2s ease-out forwards fade-in;
+}
+
+.bui-DialogOverlay[data-exiting] {
+  animation: .15s ease-out forwards fade-out;
+}
+
+.bui-Dialog {
+  background: var(--bui-bg-surface-1);
+  border: 1px solid var(--bui-border);
+  color: var(--bui-fg-primary);
+  width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
+  max-width: calc(100vw - 3rem);
+  height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));
+  border-radius: .5rem;
+  outline: none;
+  flex-direction: column;
+  max-height: calc(100vh - 3rem);
+  display: flex;
+  position: relative;
+}
+
+.bui-DialogOverlay[data-entering] .bui-Dialog {
+  animation: .15s ease-out forwards dialog-enter;
+}
+
+.bui-DialogOverlay[data-exiting] .bui-Dialog {
+  animation: .15s ease-out forwards dialog-exit;
+}
+
+.bui-DialogHeader {
+  padding-inline: var(--bui-space-3);
+  padding-block: var(--bui-space-2);
+  border-bottom: 1px solid var(--bui-border);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.bui-DialogHeaderTitle {
+  font-size: var(--bui-font-size-3);
+  font-weight: var(--bui-font-weight-bold);
+  margin: 0;
+}
+
+.bui-DialogFooter {
+  justify-content: end;
+  align-items: center;
+  gap: var(--bui-space-2);
+  padding-inline: var(--bui-space-3);
+  padding-block: var(--bui-space-3);
+  border-top: 1px solid var(--bui-border);
+  display: flex;
+}
+
+.bui-DialogBody {
+  padding: var(--bui-space-3);
+  flex: 1;
+  overflow-y: auto;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-enter {
+  from {
+    opacity: .5;
+    transform: scale(.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.95);
+  }
+}
+
 .bui-MenuPopover {
   border: 1px solid var(--bui-border);
   border-radius: var(--bui-radius-2);

packages/ui/src/css/styles.css

@@ -32,6 +32,7 @@
 @import '../components/Checkbox/styles.css';
 @import '../components/Collapsible/Collapsible.styles.css';
 @import '../components/Container/styles.css';
+@import '../components/Dialog/Dialog.styles.css';
 @import '../components/FieldError/FieldError.styles.css';
 @import '../components/FieldLabel/FieldLabel.styles.css';
 @import '../components/Flex/styles.css';