Add custom theming for primary color and primary hover color to form components

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -13,6 +13,7 @@
   export let enableTime = true
   export let value = null
   export let placeholder = null
+  export let appendTo = null
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${generateID()}-wrapper`
@@ -24,6 +25,7 @@
     altInput: true,
     altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
+    appendTo,
   }
 
   const handleChange = event => {

packages/bbui/src/Form/DatePicker.svelte

@@ -10,6 +10,7 @@
   export let error = null
   export let enableTime = true
   export let placeholder = null
+  export let appendTo = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -26,6 +27,7 @@
     {value}
     {placeholder}
     {enableTime}
+    {appendTo}
     on:change={onChange}
   />
 </Field>

packages/builder/src/components/design/AppPreview/ThemeEditor.svelte

@@ -41,6 +41,7 @@
       <div class="setting">
         <Label size="L">Primary Color</Label>
         <ColorPicker
+          spectrumTheme={$store.theme}
           value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
           on:change={updateProperty("primaryColor")}
         />
@@ -48,6 +49,7 @@
       <div class="setting">
         <Label size="L">Primary Color (Hover)</Label>
         <ColorPicker
+          spectrumTheme={$store.theme}
           value={$store.customTheme?.primaryColorHover ||
             defaultTheme.primaryColorHover}
           on:change={updateProperty("primaryColorHover")}

packages/client/src/components/ClientApp.svelte

@@ -22,6 +22,7 @@
   import SettingsBar from "components/preview/SettingsBar.svelte"
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
+  import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
   import ErrorSVG from "../../../builder/assets/error.svg"
 
   // Provide contexts
@@ -84,15 +85,13 @@
       <UserBindingsProvider>
         <DeviceBindingsProvider>
           <StateBindingsProvider>
-            <div
+            <CustomThemeWrapper>
-              id="app-root"
+              <div id="app-root" class:preview={$builderStore.inBuilder}>
-              class:preview={$builderStore.inBuilder}
+                {#key $screenStore.activeLayout._id}
-              style={$themeStore.customThemeCss}
+                  <Component instance={$screenStore.activeLayout.props} />
-            >
+                {/key}
-              {#key $screenStore.activeLayout._id}
+              </div>
-                <Component instance={$screenStore.activeLayout.props} />
+            </CustomThemeWrapper>
-              {/key}
-            </div>
             <NotificationDisplay />
             <ConfirmationDisplay />
             <PeekScreenDisplay />
@@ -132,42 +131,6 @@
   #app-root.preview {
     border: 1px solid var(--spectrum-global-color-gray-300);
   }
-
-  #app-root {
-    /*  Primary */
-    --spectrum-global-color-blue-600: var(--primaryColor);
-    --spectrum-global-color-blue-700: var(--primaryColor);
-    --spectrum-global-color-static-blue-600: var(--primaryColor);
-    --spectrum-global-color-static-blue-700: var(--primaryColor);
-
-    /*  Primary hover */
-    --spectrum-global-color-blue-400: var(--primaryColorHover);
-    --spectrum-global-color-blue-500: var(--primaryColorHover);
-    --spectrum-global-color-static-blue-400: var(--primaryColorHover);
-    --spectrum-global-color-static-blue-500: var(--primaryColorHover);
-  }
-
-  /* Custom scrollbars */
-  :global(::-webkit-scrollbar) {
-    width: 8px;
-    height: 8px;
-  }
-  :global(::-webkit-scrollbar-track) {
-    background: var(--spectrum-alias-background-color-default);
-  }
-  :global(::-webkit-scrollbar-thumb) {
-    background-color: var(--spectrum-global-color-gray-400);
-    border-radius: 4px;
-  }
-  :global(::-webkit-scrollbar-corner) {
-    background: var(--spectrum-alias-background-color-default);
-  }
-  :global(*) {
-    scrollbar-width: thin;
-    scrollbar-color: var(--spectrum-global-color-gray-400)
-      var(--spectrum-alias-background-color-default);
-  }
-
   .error {
     position: absolute;
     width: 100%;

packages/client/src/components/CustomThemeWrapper.svelte

@@ -0,0 +1,87 @@
+<script>
+  import { themeStore } from "stores"
+</script>
+
+<div style={$themeStore.customThemeCss}>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: contents;
+  }
+
+  /* Themes */
+  div {
+    /* General */
+    --spectrum-global-color-blue-600: var(--primaryColor);
+    --spectrum-global-color-blue-700: var(--primaryColor);
+    --spectrum-global-color-static-blue-600: var(--primaryColor);
+    --spectrum-global-color-static-blue-700: var(--primaryColor);
+    --spectrum-global-color-blue-400: var(--primaryColorHover);
+    --spectrum-global-color-blue-500: var(--primaryColorHover);
+    --spectrum-global-color-static-blue-400: var(--primaryColorHover);
+    --spectrum-global-color-static-blue-500: var(--primaryColorHover);
+
+    /*  Buttons */
+    --spectrum-semantic-cta-color-background-default: var(--primaryColor);
+    --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
+
+    /* Loading spinners */
+    --spectrum-progresscircle-medium-track-fill-color: var(--primaryColor);
+
+    /* Form fields */
+    --spectrum-alias-border-color-mouse-focus: var(--primaryColor);
+    --spectrum-alias-border-color-focus: var(--primaryColor);
+    --spectrum-radio-m-emphasized-circle-border-color-selected: var(
+      --primaryColor
+    );
+    --spectrum-radio-m-emphasized-circle-border-color-selected-hover: var(
+      --primaryColorHover
+    );
+    --spectrum-checkbox-m-emphasized-box-border-color-selected: var(
+      --primaryColor
+    );
+    --spectrum-checkbox-m-emphasized-box-border-color-selected-hover: var(
+      --primaryColorHover
+    );
+
+    /* Icons */
+    --spectrum-alias-icon-color-selected: var(--primaryColor);
+
+    /* Links */
+    --spectrum-link-primary-m-text-color: var(--primaryColor);
+    --spectrum-link-primary-m-text-color-hover: var(--primaryColorHover);
+  }
+
+  /* Theme flatpickr */
+  :global(.flatpickr-day.selected) {
+    background: var(--primaryColor);
+    border-color: var(--primaryColor);
+  }
+  :global(.flatpickr-day.selected:hover) {
+    background: var(--primaryColorHover);
+    border-color: var(--primaryColorHover);
+  }
+
+  /* Custom scrollbars */
+  :global(::-webkit-scrollbar) {
+    width: 8px;
+    height: 8px;
+  }
+  :global(::-webkit-scrollbar-track) {
+    background: var(--spectrum-alias-background-color-default);
+  }
+  :global(::-webkit-scrollbar-thumb) {
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+  }
+  :global(::-webkit-scrollbar-corner) {
+    background: var(--spectrum-alias-background-color-default);
+  }
+  :global(*) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-400)
+      var(--spectrum-alias-background-color-default);
+  }
+</style>

packages/client/src/components/app/Layout.svelte

@@ -248,7 +248,7 @@
     transition: color 130ms ease-out;
   }
   .link:hover {
-    color: var(--spectrum-global-color-blue-600);
+    color: var(--spectrum-link-primary-m-text-color-hover);
   }
   .close {
     display: none;

packages/client/src/components/app/forms/DateTimeField.svelte

@@ -56,6 +56,7 @@
       disabled={fieldState.disabled}
       error={fieldState.error}
       id={fieldState.fieldId}
+      appendTo={document.getElementById("app-root")}
       {enableTime}
       {placeholder}
     />