Merge pull request #2561 from Budibase/custom-theming

Custom theming

LICENSE

@@ -5,7 +5,6 @@ Each Budibase package has its own license:
 builder: GPLv3
 server: GPLv3
 client: MPLv2.0
-standard-components: MPLv2.0
 
 You can consider Budibase to be GPLv3 licensed. 
 

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/bbui/src/Icon/Icon.svelte

@@ -36,7 +36,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected);
+    color: var(--spectrum-alias-icon-color-selected-hover);
     cursor: pointer;
   }
 

packages/builder/src/builderStore/dataBinding.js

@@ -266,12 +266,16 @@ const getDeviceBindings = () => {
  * Gets all state bindings that are globally available.
  */
 const getStateBindings = () => {
-  const safeState = makePropSafe("state")
-  return getAllStateVariables().map(key => ({
-    type: "context",
-    runtimeBinding: `${safeState}.${makePropSafe(key)}`,
-    readableBinding: `State.${key}`,
-  }))
+  let bindings = []
+  if (get(store).clientFeatures?.state) {
+    const safeState = makePropSafe("state")
+    bindings = getAllStateVariables().map(key => ({
+      type: "context",
+      runtimeBinding: `${safeState}.${makePropSafe(key)}`,
+      readableBinding: `State.${key}`,
+    }))
+  }
+  return bindings
 }
 
 /**

packages/builder/src/builderStore/store/frontend.js

@@ -41,6 +41,8 @@ const INITIAL_FRONTEND_STATE = {
     spectrumThemes: false,
     intelligentLoading: false,
     deviceAwareness: false,
+    state: false,
+    customThemes: false,
   },
   currentFrontEndType: "none",
   selectedScreenId: "",
@@ -53,6 +55,7 @@ const INITIAL_FRONTEND_STATE = {
   routes: {},
   clientLibPath: "",
   theme: "",
+  customTheme: {},
 }
 
 export const getFrontendStore = () => {
@@ -77,6 +80,7 @@ export const getFrontendStore = () => {
         layouts,
         screens,
         theme: application.theme || "spectrum--light",
+        customTheme: application.customTheme,
         hasAppPackage: true,
         appInstance: application.instance,
         clientLibPath,
@@ -110,6 +114,22 @@ export const getFrontendStore = () => {
         }
       },
     },
+    customTheme: {
+      save: async customTheme => {
+        const appId = get(store).appId
+        const response = await api.put(`/api/applications/${appId}`, {
+          customTheme,
+        })
+        if (response.status === 200) {
+          store.update(state => {
+            state.customTheme = customTheme
+            return state
+          })
+        } else {
+          throw new Error("Error updating theme")
+        }
+      },
+    },
     routing: {
       fetch: async () => {
         const response = await api.get("/api/routing")

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

@@ -33,6 +33,6 @@
 
 <style>
   div {
-    padding-right: 8px;
+    width: 100px;
   }
 </style>

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

@@ -49,6 +49,7 @@
     selectedComponentId,
     previewType: $store.currentFrontEndType,
     theme: $store.theme,
+    customTheme: $store.customTheme,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.

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

@@ -0,0 +1,140 @@
+<script>
+  import { get } from "svelte/store"
+  import {
+    ActionButton,
+    Modal,
+    ModalContent,
+    Layout,
+    ColorPicker,
+    Label,
+    Select,
+    Button,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import AppThemeSelect from "./AppThemeSelect.svelte"
+
+  let modal
+
+  const defaultTheme = {
+    primaryColor: "var(--spectrum-global-color-blue-600)",
+    primaryColorHover: "var(--spectrum-global-color-blue-500)",
+    buttonBorderRadius: "16px",
+    navBackground: "var(--spectrum-global-color-gray-100)",
+    navTextColor: "var(--spectrum-global-color-gray-800)",
+  }
+
+  const buttonBorderRadiusOptions = [
+    {
+      label: "None",
+      value: "0",
+    },
+    {
+      label: "Small",
+      value: "4px",
+    },
+    {
+      label: "Medium",
+      value: "8px",
+    },
+    {
+      label: "Large",
+      value: "16px",
+    },
+  ]
+
+  const updateProperty = property => {
+    return e => {
+      store.actions.customTheme.save({
+        ...get(store).customTheme,
+        [property]: e.detail,
+      })
+    }
+  }
+
+  const resetTheme = () => {
+    store.actions.customTheme.save(null)
+  }
+</script>
+
+<div class="container">
+  <ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton>
+</div>
+<Modal bind:this={modal}>
+  <ModalContent
+    showConfirmButton={false}
+    cancelText="Close"
+    showCloseIcon={false}
+    title="Theme settings"
+  >
+    <Layout noPadding gap="S">
+      <div class="setting">
+        <Label size="L">Theme</Label>
+        <AppThemeSelect />
+      </div>
+      <div class="setting">
+        <Label size="L">Button roundness</Label>
+        <div class="select-wrapper">
+          <Select
+            placeholder={null}
+            value={$store.customTheme?.buttonBorderRadius ||
+              defaultTheme.buttonBorderRadius}
+            on:change={updateProperty("buttonBorderRadius")}
+            options={buttonBorderRadiusOptions}
+          />
+        </div>
+      </div>
+      <div class="setting">
+        <Label size="L">Primary color</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
+          on:change={updateProperty("primaryColor")}
+        />
+      </div>
+      <div class="setting">
+        <Label size="L">Primary color (hover)</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.primaryColorHover ||
+            defaultTheme.primaryColorHover}
+          on:change={updateProperty("primaryColorHover")}
+        />
+      </div>
+      <div class="setting">
+        <Label size="L">Navigation bar background color</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.navBackground ||
+            defaultTheme.navBackground}
+          on:change={updateProperty("navBackground")}
+        />
+      </div>
+      <div class="setting">
+        <Label size="L">Navigation bar text color</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.navTextColor || defaultTheme.navTextColor}
+          on:change={updateProperty("navTextColor")}
+        />
+      </div>
+    </Layout>
+    <div slot="footer">
+      <Button secondary quiet on:click={resetTheme}>Reset</Button>
+    </div>
+  </ModalContent>
+</Modal>
+
+<style>
+  .container {
+    padding-right: 8px;
+  }
+  .setting {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .select-wrapper {
+    width: 100px;
+  }
+</style>

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

@@ -66,7 +66,8 @@ export default `
           screen,
           previewType,
           appId,
-          theme
+          theme,
+          customTheme
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -78,6 +79,7 @@ export default `
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
         window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
         window["##BUDIBASE_PREVIEW_THEME##"] = theme
+        window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
 
         // Initialise app
         try {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -9,11 +9,12 @@
     ActionMenu,
     MenuItem,
   } from "@budibase/bbui"
-  import actionTypes from "./actions"
+  import { getAvailableActions } from "./actions"
   import { generate } from "shortid"
 
   const flipDurationMs = 150
   const EVENT_TYPE_KEY = "##eventHandlerType"
+  const actionTypes = getAvailableActions()
 
   export let actions
   export let bindings = []

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js

@@ -1,3 +1,6 @@
+import { store } from "builderStore"
+import { get } from "svelte/store"
+
 import NavigateTo from "./NavigateTo.svelte"
 import SaveRow from "./SaveRow.svelte"
 import DeleteRow from "./DeleteRow.svelte"
@@ -17,49 +20,56 @@ import UpdateStateStep from "./UpdateState.svelte"
 // be considered as camel case too.
 // There is technical debt here to sanitize all these and standardise them
 // across the packages but it's a breaking change to existing apps.
-export default [
-  {
-    name: "Save Row",
-    component: SaveRow,
-  },
-  {
-    name: "Delete Row",
-    component: DeleteRow,
-  },
-  {
-    name: "Navigate To",
-    component: NavigateTo,
-  },
-  {
-    name: "Execute Query",
-    component: ExecuteQuery,
-  },
-  {
-    name: "Trigger Automation",
-    component: TriggerAutomation,
-  },
-  {
-    name: "Validate Form",
-    component: ValidateForm,
-  },
-  {
-    name: "Log Out",
-    component: LogOut,
-  },
-  {
-    name: "Clear Form",
-    component: ClearForm,
-  },
-  {
-    name: "Close Screen Modal",
-    component: CloseScreenModal,
-  },
-  {
-    name: "Change Form Step",
-    component: ChangeFormStep,
-  },
-  {
-    name: "Update State",
-    component: UpdateStateStep,
-  },
-]
+export const getAvailableActions = () => {
+  let actions = [
+    {
+      name: "Save Row",
+      component: SaveRow,
+    },
+    {
+      name: "Delete Row",
+      component: DeleteRow,
+    },
+    {
+      name: "Navigate To",
+      component: NavigateTo,
+    },
+    {
+      name: "Execute Query",
+      component: ExecuteQuery,
+    },
+    {
+      name: "Trigger Automation",
+      component: TriggerAutomation,
+    },
+    {
+      name: "Validate Form",
+      component: ValidateForm,
+    },
+    {
+      name: "Log Out",
+      component: LogOut,
+    },
+    {
+      name: "Clear Form",
+      component: ClearForm,
+    },
+    {
+      name: "Close Screen Modal",
+      component: CloseScreenModal,
+    },
+    {
+      name: "Change Form Step",
+      component: ChangeFormStep,
+    },
+  ]
+
+  if (get(store).clientFeatures?.state) {
+    actions.push({
+      name: "Update State",
+      component: UpdateStateStep,
+    })
+  }
+
+  return actions
+}

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -14,6 +14,7 @@
   import { findComponent, findComponentPath } from "builderStore/storeUtils"
   import { get } from "svelte/store"
   import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
+  import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -150,7 +151,9 @@
     {#if $currentAsset}
       <div class="preview-header">
         <ComponentSelectionList />
-        {#if $store.clientFeatures.spectrumThemes}
+        {#if $store.clientFeatures.customThemes}
+          <ThemeEditor />
+        {:else if $store.clientFeatures.spectrumThemes}
           <AppThemeSelect />
         {/if}
       </div>
@@ -202,9 +205,18 @@
     padding: var(--spacing-xl) 40px;
   }
   .preview-header {
-    display: grid;
-    grid-template-columns: 1fr 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
   }
+  .preview-header > :global(*) {
+    flex: 0 0 auto;
+  }
+  .preview-header > :global(*:first-child) {
+    flex: 1 1 auto;
+  }
+
   .preview-content {
     flex: 1 1 auto;
   }

packages/client/manifest.json

@@ -2,7 +2,9 @@
   "features": {
     "spectrumThemes": true,
     "intelligentLoading": true,
-    "deviceAwareness": true
+    "deviceAwareness": true,
+    "state": true,
+    "customThemes": true
   },
   "layout": {
     "name": "Layout",

packages/client/package.json

@@ -11,7 +11,8 @@
       "import": "./dist/budibase-client.js",
       "require": "./dist/budibase-client.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./manifest.json": "./manifest.json"
   },
   "scripts": {
     "build": "rollup -c",
@@ -19,15 +20,24 @@
   },
   "dependencies": {
     "@budibase/bbui": "^0.9.123-alpha.1",
-    "@budibase/standard-components": "^0.9.123-alpha.1",
     "@budibase/string-templates": "^0.9.123-alpha.1",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.5",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@spectrum-css/button": "^3.0.3",
+    "@spectrum-css/card": "^3.0.3",
+    "@spectrum-css/divider": "^1.0.3",
+    "@spectrum-css/link": "^3.1.3",
+    "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.2",
+    "@spectrum-css/vars": "^3.0.1",
+    "apexcharts": "^3.22.1",
+    "dayjs": "^1.10.5",
     "fs-extra": "^8.1.0",
     "jsdom": "^16.0.1",
     "postcss": "^8.2.10",
@@ -39,7 +49,9 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.38.2"
+    "svelte": "^3.38.2",
+    "svelte-apexcharts": "^1.0.2",
+    "svelte-flatpickr": "^3.1.0"
   },
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc"
 }

packages/client/rollup.config.js

@@ -1,5 +1,6 @@
 import commonjs from "@rollup/plugin-commonjs"
 import resolve from "@rollup/plugin-node-resolve"
+import alias from "@rollup/plugin-alias"
 import svelte from "rollup-plugin-svelte"
 import { terser } from "rollup-plugin-terser"
 import postcss from "rollup-plugin-postcss"
@@ -7,6 +8,7 @@ import svg from "rollup-plugin-svg"
 import json from "rollup-plugin-json"
 import builtins from "rollup-plugin-node-builtins"
 import globals from "rollup-plugin-node-globals"
+import path from "path"
 
 const production = !process.env.ROLLUP_WATCH
 const ignoredWarnings = [
@@ -26,6 +28,38 @@ export default {
     },
   ],
   plugins: [
+    alias({
+      entries: [
+        {
+          find: "manifest.json",
+          replacement: path.resolve("./manifest.json"),
+        },
+        {
+          find: "api",
+          replacement: path.resolve("./src/api"),
+        },
+        {
+          find: "components",
+          replacement: path.resolve("./src/components"),
+        },
+        {
+          find: "stores",
+          replacement: path.resolve("./src/stores"),
+        },
+        {
+          find: "utils",
+          replacement: path.resolve("./src/utils"),
+        },
+        {
+          find: "constants",
+          replacement: path.resolve("./src/constants"),
+        },
+        {
+          find: "sdk",
+          replacement: path.resolve("./src/sdk"),
+        },
+      ],
+    }),
     svelte({
       emitCss: true,
       onwarn: (warning, handler) => {

packages/client/src/api/api.js

@@ -1,5 +1,5 @@
-import { notificationStore } from "../store"
-import { ApiVersion } from "../constants"
+import { notificationStore } from "stores"
+import { ApiVersion } from "constants"
 
 /**
  * API cache for cached request responses.

packages/client/src/api/automations.js

@@ -1,5 +1,6 @@
-import { notificationStore } from "../store/notification"
+import { notificationStore } from "stores/notification"
 import API from "./api"
+
 /**
  * Executes an automation. Must have "App Action" trigger.
  */

packages/client/src/api/queries.js

@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
 import API from "./api"
 
 /**

packages/client/src/api/rows.js

@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
 import API from "./api"
 import { fetchTableDefinition } from "./tables"
 

packages/client/src/components/ClientApp.svelte

@@ -1,11 +1,9 @@
 <script>
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
+  import { Layout, Heading, Body } from "@budibase/bbui"
   import Component from "./Component.svelte"
-  import NotificationDisplay from "./NotificationDisplay.svelte"
-  import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
-  import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
-  import SDK from "../sdk"
+  import SDK from "sdk"
   import {
     createContextStore,
     initialise,
@@ -13,16 +11,19 @@
     authStore,
     routeStore,
     builderStore,
-    appStore,
-  } from "../store"
-  import SettingsBar from "./preview/SettingsBar.svelte"
-  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
-  import HoverIndicator from "./preview/HoverIndicator.svelte"
-  import { Layout, Heading, Body } from "@budibase/bbui"
+    themeStore,
+  } from "stores"
+  import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
+  import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
+  import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
+  import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
+  import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
+  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"
-  import UserBindingsProvider from "./UserBindingsProvider.svelte"
-  import DeviceBindingsProvider from "./DeviceBindingsProvider.svelte"
-  import StateBindingsProvider from "./StateBindingsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -63,9 +64,6 @@
       }
     }
   }
-
-  $: themeClass =
-    $builderStore.theme || $appStore.application?.theme || "spectrum--light"
 </script>
 
 {#if dataLoaded}
@@ -73,7 +71,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {themeClass}"
+    class="spectrum spectrum--medium {$themeStore.theme}"
   >
     {#if permissionError}
       <div class="error">
@@ -87,11 +85,13 @@
       <UserBindingsProvider>
         <DeviceBindingsProvider>
           <StateBindingsProvider>
-            <div id="app-root" class:preview={$builderStore.inBuilder}>
-              {#key $screenStore.activeLayout._id}
-                <Component instance={$screenStore.activeLayout.props} />
-              {/key}
-            </div>
+            <CustomThemeWrapper>
+              <div id="app-root" class:preview={$builderStore.inBuilder}>
+                {#key $screenStore.activeLayout._id}
+                  <Component instance={$screenStore.activeLayout.props} />
+                {/key}
+              </div>
+            </CustomThemeWrapper>
             <NotificationDisplay />
             <ConfirmationDisplay />
             <PeekScreenDisplay />
@@ -131,28 +131,6 @@
   #app-root.preview {
     border: 1px solid var(--spectrum-global-color-gray-300);
   }
-
-  /* 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/Component.svelte

@@ -1,17 +1,14 @@
 <script>
   import { getContext, setContext } from "svelte"
   import { writable, get } from "svelte/store"
-  import * as ComponentLibrary from "@budibase/standard-components"
+  import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
-  import { enrichProps, propsAreSame } from "../utils/componentProps"
-  import { builderStore } from "../store"
-  import { hashString } from "../utils/hash"
-  import Manifest from "@budibase/standard-components/manifest.json"
-  import { Placeholder } from "@budibase/standard-components"
-  import {
-    getActiveConditions,
-    reduceConditionActions,
-  } from "../utils/conditions"
+  import { enrichProps, propsAreSame } from "utils/componentProps"
+  import { builderStore } from "stores"
+  import { hashString } from "utils/helpers"
+  import Manifest from "manifest.json"
+  import { getActiveConditions, reduceConditionActions } from "utils/conditions"
+  import Placeholder from "components/app/Placeholder.svelte"
 
   export let instance = {}
 
@@ -95,7 +92,7 @@
     if (name === "screenslot" && $builderStore.previewType !== "layout") {
       return Router
     }
-    return ComponentLibrary[name]
+    return AppComponents[name]
   }
 
   const getComponentDefinition = component => {

packages/client/src/components/CustomThemeWrapper.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { themeStore } from "stores"
+</script>
+
+<div style={$themeStore.customThemeCss}>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: contents;
+  }
+
+  /* Themes */
+  div {
+    /*  Buttons */
+    --spectrum-semantic-cta-color-background-default: var(--primaryColor);
+    --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
+    --spectrum-button-primary-m-border-radius: var(--buttonBorderRadius);
+
+    /* 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);
+    --spectrum-alias-icon-color-selected-hover: var(--primaryColorHover);
+
+    /* 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/Router.svelte

@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore } from "../store"
+  import { routeStore } from "stores"
   import Screen from "./Screen.svelte"
 
   const { styleable } = getContext("sdk")

packages/client/src/components/Screen.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { screenStore, routeStore } from "../store"
+  import { screenStore, routeStore } from "stores"
   import Component from "./Component.svelte"
-  import Provider from "./Provider.svelte"
+  import Provider from "./context/Provider.svelte"
   import { onMount } from "svelte"
 
   // Keep route params up to date

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

@@ -36,7 +36,7 @@
     font-size: 2rem;
     font-weight: 600;
     margin: 0 1.5rem 1.5rem 1.5rem;
-    color: var(--spectrum-global-color-blue-600);
+    color: var(--spectrum-link-primary-m-text-color);
     white-space: pre-wrap;
   }
 

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

@@ -6,7 +6,7 @@
     luceneQuery,
     luceneSort,
     luceneLimit,
-  } from "./lucene"
+  } from "utils/lucene"
   import Placeholder from "./Placeholder.svelte"
 
   export let dataSource

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

@@ -20,7 +20,12 @@
 </script>
 
 {#if icon}
-  <i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+  <i
+    use:styleable={styles}
+    class="{icon} {size}"
+    on:click={onClick}
+    class:hoverable={onClick != null}
+  />
 {:else if $builderStore.inBuilder}
   <div use:styleable={styles}>
     <Placeholder />
@@ -31,4 +36,8 @@
   div {
     font-style: italic;
   }
+  .hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    cursor: pointer;
+  }
 </style>

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

@@ -1,9 +1,9 @@
 <script>
   import { getContext } from "svelte"
   import { Heading, Icon } from "@budibase/bbui"
-  import { routeStore } from "../../client/src/store"
+  import active from "svelte-spa-router/active"
 
-  const { styleable, linkable, builderStore } = getContext("sdk")
+  const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let title
@@ -96,7 +96,13 @@
           <div class="links" class:visible={mobileOpen}>
             {#each validLinks as { text, url }}
               {#if isInternal(url)}
-                <a class="link" href={url} use:linkable on:click={close}>
+                <a
+                  class="link"
+                  href={url}
+                  use:linkable
+                  on:click={close}
+                  use:active={url}
+                >
                   {text}
                 </a>
               {:else}
@@ -143,7 +149,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--navBackground);
     z-index: 2;
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
@@ -166,6 +172,18 @@
     max-width: 100%;
     gap: var(--spacing-xl);
   }
+  .nav :global(.spectrum-Icon) {
+    color: var(--navTextColor);
+    opacity: 0.75;
+  }
+  .nav :global(.spectrum-Icon:hover) {
+    color: var(--navTextColor);
+    opacity: 1;
+  }
+
+  .nav :global(h1) {
+    color: var(--navTextColor);
+  }
   .nav-header {
     flex: 0 0 auto;
     display: flex;
@@ -243,13 +261,19 @@
     margin-top: var(--spacing-xl);
   }
   .link {
-    color: var(--spectrum-alias-text-color);
+    opacity: 0.75;
+    color: var(--navTextColor);
     font-size: var(--spectrum-global-dimension-font-size-200);
     font-weight: 600;
     transition: color 130ms ease-out;
   }
+  .link.active {
+    opacity: 1;
+  }
   .link:hover {
-    color: var(--spectrum-global-color-blue-600);
+    opacity: 1;
+    text-decoration: underline;
+    text-underline-position: under;
   }
   .close {
     display: none;
@@ -333,7 +357,7 @@
       transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
       height: 100vh;
       opacity: 0;
-      background: var(--spectrum-alias-background-color-secondary);
+      background: var(--navBackground);
       z-index: 999;
       flex-direction: column;
       justify-content: flex-start;
@@ -347,8 +371,7 @@
     .links.visible {
       opacity: 1;
       transform: translateX(250px);
-      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.2);
-      border-right: 1px solid var(--spectrum-global-color-gray-300);
+      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3);
     }
     .mobile-click-handler.visible {
       position: fixed;

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

@@ -78,7 +78,7 @@
     transition: color 130ms ease-in-out;
   }
   a:hover {
-    color: var(--spectrum-global-color-blue-600) !important;
+    color: var(--spectrum-link-primary-m-text-color-hover) !important;
   }
   .placeholder {
     font-style: italic;

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

@@ -96,7 +96,7 @@
     color: var(--spectrum-alias-text-color);
   }
   a:hover {
-    color: var(--spectrum-global-color-blue-600);
+    color: var(--spectrum-link-primary-m-text-color-hover);
   }
 
   .horizontal .spectrum-Card-coverPhoto {

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}
     />

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

@@ -2,7 +2,7 @@
   import { setContext, getContext } from "svelte"
   import { derived, get, writable } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
-  import { generateID } from "../helpers"
+  import { generateID } from "utils/helpers"
 
   export let dataSource
   export let disabled = false

packages/client/src/components/app/index.js

@@ -7,9 +7,6 @@ import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/page/dist/index-vars.css"
 
-import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
-loadSpectrumIcons()
-
 // Non user-facing components
 export { default as Placeholder } from "./Placeholder.svelte"
 

packages/client/src/components/context/Provider.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, setContext, onMount } from "svelte"
-  import { dataSourceStore, createContextStore } from "../store"
-  import { ActionTypes } from "../constants"
+  import { dataSourceStore, createContextStore } from "stores"
+  import { ActionTypes } from "constants"
   import { generate } from "shortid"
 
   export let data

packages/client/src/components/context/StateBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { stateStore } from "../store"
+  import { stateStore } from "stores"
 </script>
 
 <Provider key="state" data={$stateStore}>

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore } from "../store"
-  import { ActionTypes, TableNames } from "../constants"
+  import { authStore } from "stores"
+  import { ActionTypes, TableNames } from "constants"
 
   // Register this as a refreshable datasource so that user changes cause
   // the user object to be refreshed

packages/client/src/components/overlay/ConfirmationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { confirmationStore } from "../store"
+  import { confirmationStore } from "stores"
   import { Modal, ModalContent } from "@budibase/bbui"
 </script>
 

packages/client/src/components/overlay/NotificationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { notificationStore } from "../store"
+  import { notificationStore } from "stores"
   import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
 </script>

packages/client/src/components/overlay/PeekScreenDisplay.svelte

@@ -4,7 +4,7 @@
     dataSourceStore,
     notificationStore,
     routeStore,
-  } from "../store"
+  } from "stores"
   import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "../../utils/domDebounce"
+  import { domDebounce } from "utils/domDebounce"
 
   export let componentId
   export let color

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

@@ -1,5 +1,5 @@
 <script>
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 </script>
 

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

@@ -3,8 +3,8 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore } from "../../store"
-  import { domDebounce } from "../../utils/domDebounce"
+  import { builderStore } from "stores"
+  import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 28
   const horizontalOffset = 2

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

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop

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

@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   export let prop
 

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

@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   export let prop
   export let options

packages/client/src/index.js

@@ -1,5 +1,9 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore, appStore } from "./store"
+import { builderStore, appStore } from "./stores"
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
+
+// Initialise spectrum icons
+loadSpectrumIcons()
 
 let app
 
@@ -13,6 +17,7 @@ const loadBudibase = () => {
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
+    customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real

packages/client/src/sdk.js

@@ -5,12 +5,12 @@ import {
   routeStore,
   screenStore,
   builderStore,
-} from "./store"
-import { styleable } from "./utils/styleable"
-import { linkable } from "./utils/linkable"
-import { getAction } from "./utils/getAction"
-import Provider from "./components/Provider.svelte"
-import { ActionTypes } from "./constants"
+} from "stores"
+import { styleable } from "utils/styleable"
+import { linkable } from "utils/linkable"
+import { getAction } from "utils/getAction"
+import Provider from "components/context/Provider.svelte"
+import { ActionTypes } from "constants"
 
 export default {
   API,