wip: bbui modal to spectrum conversion

packages/bbui/src/Modal/Modal.svelte

@@ -38,25 +38,24 @@
 <svelte:window on:keydown={handleKey} />
 
 {#if visible}
-  <Portal target="body">
-    <div
-      class="overlay"
-      on:click|self={hide}
-      transition:fade={{ duration: 200 }}>
-      <div
-        class="scroll-wrapper"
-        on:click|self={hide}
-        transition:fly={{ y: 30, duration: 200 }}>
-        <div class="content-wrapper" on:click|self={hide}>
-          <div
-            class="modal"
-            class:padding
-            class:border
-            style={width ? `flex: 0 0 ${width}` : ''}>
-            <slot />
+  <Portal target="modal-container">
+    <div class="overlay spectrum-Modal" transition:fade={{ duration: 200 }} on:click|self={hide}>
+      <section
+        class="spectrum-Dialog spectrum-Dialog--large spectrum-Dialog--dismissable" role="dialog" tabindex="-1" aria-modal="true">
+        <div
+          class="scroll-wrapper"
+          on:click|self={hide}
+          transition:fly={{ y: 30, duration: 200 }}>
+          <div class="content-wrapper" on:click|self={hide}>
+            <div
+              class="modal {width ? width : ''}"
+              class:padding
+              class:border>
+              <slot />
+            </div>
           </div>
         </div>
-      </div>
+      </section>
     </div>
   </Portal>
 {/if}
@@ -100,7 +99,6 @@
     background-color: var(--background);
     display: grid;
     align-items: stretch;
-    box-shadow: 0 0 4rem 1.5rem rgba(0, 0, 0, 0.15);
     position: relative;
     flex: 0 0 400px;
     margin: 2rem 0;
@@ -110,7 +108,4 @@
   .modal.padding {
     padding: var(--spacing-xl);
   }
-  .modal.border {
-    border: var(--border-dark);
-  }
 </style>

packages/builder/src/pages/builder/index.svelte

@@ -76,6 +76,7 @@
 
   <AppList />
 </div>
+<div id="modal-container" />
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />
@@ -121,4 +122,8 @@
     display: flex;
     flex-direction: row;
   }
+
+  #modal-container {
+    position: absolute;
+  }
 </style>