From 6bfcb3fc2bbc4a40ee7d436cce8e477cd616a1ad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 30 Jun 2021 08:30:57 +0100
Subject: [PATCH] Add better theme compatibility to color picker and client app
 components

---
 packages/bbui/src/ColorPicker/ColorPicker.svelte   |  4 ++--
 .../components/design/AppPreview/iframeTemplate.js |  2 +-
 packages/client/src/components/ClientApp.svelte    |  1 +
 .../src/components/preview/SettingsBar.svelte      | 14 ++++++++++++--
 packages/standard-components/src/Layout.svelte     |  7 ++++++-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 957efa4067..30dab2ba10 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/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%;
diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index 71eabae4d2..e80c038ea9 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/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;
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 7167e37150..d6370baa2a 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -103,5 +103,6 @@
   }
   #app-root {
     position: relative;
+    border: 1px solid var(--spectrum-global-color-gray-300);
   }
 </style>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 5905535323..69197e6ede 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/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>
diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index 7dc85efb38..eb25e505b2 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/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;