Add better theme compatibility to color picker and client app components

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -175,11 +175,11 @@
     border-radius: 100%;
     position: relative;
     transition: border-color 130ms ease-in-out;
-    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
   }
   .preview:hover {
     cursor: pointer;
-    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-400);
   }
   .fill {
     width: 100%;

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -25,7 +25,7 @@ export default `
         flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
-        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
       }
       body {
         flex: 1 1 auto;

packages/client/src/components/ClientApp.svelte

@@ -103,5 +103,6 @@
   }
   #app-root {
     position: relative;
+    border: 1px solid var(--spectrum-global-color-gray-300);
   }
 </style>

packages/client/src/components/preview/SettingsBar.svelte

@@ -138,11 +138,11 @@
     padding: 6px 8px;
     opacity: 0;
     flex-direction: row;
-    background: var(--background);
+    background: var(--spectrum-alias-background-color-primary);
     justify-content: center;
     align-items: center;
     border-radius: 4px;
-    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     gap: 2px;
     transition: opacity 0.13s ease-in-out;
   }
@@ -155,4 +155,14 @@
     margin: 0 4px;
     background-color: var(--spectrum-global-color-gray-300);
   }
+
+  /* Theme overrides */
+  :global(.spectrum--dark) .bar,
+  :global(.spectrum--darkest) .bar {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  :global(.spectrum--dark) .divider,
+  :global(.spectrum--darkest) .divider {
+    background: var(--spectrum-global-color-gray-400);
+  }
 </style>

packages/standard-components/src/Layout.svelte

@@ -135,7 +135,12 @@
     align-items: stretch;
     background: var(--spectrum-alias-background-color-primary);
     z-index: 2;
-    box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.075);
+  }
+  :global(.spectrum--dark) .nav-wrapper,
+  :global(.spectrum-darkest) .nav-wrapper {
+    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
   }
   .layout--top .nav-wrapper.sticky {
     position: sticky;