Merge pull request #809 from Budibase/dark-mode

Dark mode and custom themes
6 years ago · 4ea37587f5
40 changed files with 377 additions and 329 deletions
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -63,7 +63,7 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^1.47.0",
+    "@budibase/bbui": "^1.50.1",
    "@budibase/client": "^0.3.1",
    "@budibase/colorpicker": "^1.0.1",
    "@budibase/svelte-ag-grid": "^0.0.16",
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@ -1,11 +1,13 @@
 import { getStore } from "./store"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
+import { getThemeStore } from "./store/theme"
 import analytics from "analytics"

 export const store = getStore()
 export const backendUiStore = getBackendUiStore()
 export const automationStore = getAutomationStore()
+export const themeStore = getThemeStore()

 export const initialise = async () => {
  try {
--- a/packages/builder/src/builderStore/store/localStorage.js
+++ b/packages/builder/src/builderStore/store/localStorage.js
@ -0,0 +1,43 @@
+import { get, writable } from "svelte/store"
+
+export const localStorageStore = (localStorageKey, initialValue) => {
+  const store = writable(initialValue, () => {
+    // Hydrate from local storage when we get a new subscriber
+    hydrate()
+
+    // Listen for local storage changes and keep store in sync
+    const storageListener = ({ key }) => key === localStorageKey && hydrate()
+    window.addEventListener("storage", storageListener)
+    return () => window.removeEventListener("storage", storageListener)
+  })
+
+  // New store setter which updates the store and localstorage
+  const set = value => {
+    store.set(value)
+    localStorage.setItem(localStorageKey, JSON.stringify(value))
+  }
+
+  // New store updater which updates the store and localstorage
+  const update = updaterFn => set(updaterFn(get(store)))
+
+  // Hydrates the store from localstorage
+  const hydrate = () => {
+    const localValue = localStorage.getItem(localStorageKey)
+    if (localValue == null) {
+      set(initialValue)
+    } else {
+      try {
+        store.set(JSON.parse(localValue))
+      } catch {
+        set(initialValue)
+      }
+    }
+  }
+
+  // Patch the default svelte store functions with our overrides
+  return {
+    ...store,
+    set,
+    update,
+  }
+}
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@ -0,0 +1,38 @@
+import { localStorageStore } from "./localStorage"
+
+export const getThemeStore = () => {
+  const themeElement = document.documentElement
+  const initialValue = {
+    darkMode: false,
+    hue: 208,
+    saturation: 9,
+    lightness: 16,
+  }
+
+  const store = localStorageStore("bb-theme", initialValue)
+
+  // Sets a CSS variable on the root document element
+  function setCSSVariable(prop, value) {
+    themeElement.style.setProperty(prop, value)
+  }
+
+  // Resets the custom theme to the default dark theme.
+  // The reset option is only available when dark theme is on, which is why it
+  // sets dark mode to true here
+  store.reset = () => {
+    store.set({
+      ...initialValue,
+      darkMode: true,
+    })
+  }
+
+  // Update theme when store changes
+  store.subscribe(theme => {
+    themeElement.classList[theme.darkMode ? "add" : "remove"]("dark")
+    setCSSVariable("--theme-hue", Math.round(theme.hue))
+    setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
+    setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
+  })
+
+  return store
+}
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
@ -4,8 +4,10 @@
  viewBox="0 0 9 75"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z" fill="#ADAEC4" />
-  <rect x="4" width="1" height="65" fill="#ADAEC4" />
+  <path
+    d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
+    fill="var(--grey-5)" />
+  <rect x="4" width="1" height="65" fill="var(--grey-5)" />
 </svg>

 <style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -54,7 +54,7 @@
    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
    background-color: var(--ink);
    font-size: 16px;
-    color: var(--white);
+    color: var(--background);
  }
  .block.selected,
  .block:hover {
@ -93,13 +93,13 @@
  }

  .ACTION {
-    background-color: var(--white);
+    background-color: var(--background);
    color: var(--ink);
  }

  .TRIGGER {
    background-color: var(--ink);
-    color: var(--white);
+    color: var(--background);
  }
  .TRIGGER header .label {
    background-color: var(--grey-9);
@ -107,7 +107,7 @@
  }

  .LOGIC {
-    background-color: var(--blue-light);
+    background-color: var(--background);
    color: var(--ink);
  }

--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@ -49,7 +49,7 @@
    border-radius: 50%;
    height: 24px;
    width: 24px;
-    background: white;
+    background: var(--background);
    right: var(--spacing-s);
    bottom: 9px;
    display: flex;
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -174,12 +174,18 @@
    height: auto;
    flex: 1 1 auto;
  }
-
-  :global(.ag-theme-alpine) {
-    --ag-border-color: var(--grey-4);
+  :global(.grid-wrapper) {
+    --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.05);
+    --ag-border-color: var(--grey-3);
    --ag-header-background-color: var(--grey-1);
    --ag-odd-row-background-color: var(--grey-1);
    --ag-row-border-color: var(--grey-3);
+    --ag-background-color: var(--background);
+    --ag-foreground-color: var(--ink);
+  }
+  :global(.ag-overlay-loading-center) {
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
+    border-color: var(--grey-2);
  }

  :global(.ag-menu) {
@ -207,7 +213,6 @@
    box-sizing: border-box;
    color: var(--ink);
    border-radius: var(--border-radius-m);
-    background: #fff;
    font-family: var(--font-sans) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  }
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
@ -21,6 +21,7 @@
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 500;
+    color: var(--ink);
  }

  .loading-overlay > * {
--- a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
@ -12,7 +12,7 @@
  }
 </script>

-<Button data-cy="edit-row" translucent small on:click={showModal}>Edit</Button>
+<Button data-cy="edit-row" secondary small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
  <CreateEditRowModal {row} />
 </Modal>
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@ -32,9 +32,7 @@
    position: relative;
    width: 20px;
    height: 20px;
-    /* background-color: #5e17e9; */
    background-color: var(--grey-2);
-    /* transform: translateY(-50%); */
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color,
      0.2s ease box-shadow;
@ -51,7 +49,7 @@
    width: 12px;
    height: 12px;
    margin: 0 auto;
-    background-color: #fff;
+    background-color: var(--background);
    transform: translateY(-50%);
    transition: 0.2s ease width, 0.2s ease height;
    border-radius: 2px;
@ -75,7 +73,7 @@
  .tick_mark:after {
    content: "";
    position: absolute;
-    background-color: #000;
+    background-color: var(--ink);
    border-radius: 2px;
    opacity: 0;
    transition: 0.2s ease transform, 0.2s ease opacity;
@ -100,9 +98,7 @@
  }

  .checked {
-    /* background-color: #5e17e9; */
    background-color: var(--grey-2);
-    /* box-shadow: 0 7px 10px #5e17e9; */
  }

  .checked:before {
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@ -43,7 +43,6 @@

 <style>
  .nav-item {
-    border-radius: var(--border-radius-m);
    cursor: pointer;
    color: var(--grey-7);
  }
@ -60,6 +59,10 @@
  .nav-item:hover .actions {
    display: flex;
  }
+  .nav-item:hover,
+  .nav-item.selected {
+    border-radius: var(--border-radius-m);
+  }

  .content {
    padding: 0 var(--spacing-m);
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@ -63,7 +63,7 @@
  .content {
    padding: 10px;
    display: block;
-    color: var(--white);
+    color: white;
    font-weight: 500;
  }
 </style>
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@ -5,7 +5,7 @@
 </script>

 <div class="spinner-container">
-  <Circle {size} color="#000000" unit="px" />
+  <Circle {size} color="var(--ink)" unit="px" />
 </div>

 <style>
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -120,7 +120,7 @@
    position: absolute;
    bottom: 0;
    width: 100%;
-    background: var(--white);
+    background: var(--background);
  }

  .deployment {
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@ -0,0 +1,95 @@
+<script>
+  import { themeStore } from "builderStore"
+  import { Label, DropdownMenu, Toggle, Button, Slider } from "@budibase/bbui"
+
+  let anchor
+  let popover
+  let showAdvanced = false
+</script>
+
+<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+  <i class="ri-paint-fill" />
+</div>
+<div class="dropdown">
+  <DropdownMenu bind:this={popover} {anchor} align="right">
+    <div class="content">
+      <div>
+        <Label extraSmall grey>Theme</Label>
+        <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
+      </div>
+      {#if $themeStore.darkMode && !showAdvanced}
+        <div class="button">
+          <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
+        </div>
+      {/if}
+      {#if $themeStore.darkMode && showAdvanced}
+        <Slider
+          label="Hue"
+          bind:value={$themeStore.hue}
+          min="0"
+          max="360"
+          showValue />
+        <Slider
+          label="Saturation"
+          bind:value={$themeStore.saturation}
+          min="0"
+          max="100"
+          showValue />
+        <Slider
+          label="Lightness"
+          bind:value={$themeStore.lightness}
+          min="0"
+          max="32"
+          showValue />
+        <div class="button">
+          <Button text on:click={themeStore.reset}>Reset</Button>
+        </div>
+      {/if}
+    </div>
+  </DropdownMenu>
+</div>
+
+<style>
+  .dropdown {
+    z-index: 2;
+  }
+
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--grey-7);
+    margin: 0 12px 0 0;
+    font-weight: 500;
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
+  }
+
+  .content {
+    padding: var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .button {
+    align-self: flex-start;
+  }
+</style>
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -19,7 +19,7 @@

 <style>
  .apps-card {
-    background-color: var(--white);
+    background-color: var(--background);
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
      var(--spacing-xl);
    max-width: 300px;
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -268,7 +268,7 @@
    border-top-left-radius: 0.5rem;
    grid-gap: 30px;
    align-content: center;
-    background: #f5f5f5;
+    background: var(--grey-1);
  }
  .heading {
    display: flex;
@ -294,7 +294,7 @@
    justify-content: end;
  }
  .spinner-container {
-    background: white;
+    background: var(--background);
    position: absolute;
    border-radius: 5px;
    left: 0;
--- a/packages/builder/src/components/start/Indicator.svelte
+++ b/packages/builder/src/components/start/Indicator.svelte
@ -29,7 +29,7 @@
          1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
          1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
          10.1122 0.329679 10.1227 0.319527H10.1212Z"
-          fill="white" />
+          fill="var(--background)" />
      </svg>
    {:else}{step}{/if}
  </div>
@ -42,7 +42,7 @@
    top: -30px;
    width: 1px;
    height: 30px;
-    background: #bdbdbd;
+    background: var(--grey-5);
  }
  .container:first-child::before {
    display: none;
@ -54,27 +54,28 @@
    place-items: center;
  }
  .container.active {
-    box-shadow: inset 3px 0 0 0 #4285f4;
+    box-shadow: inset 3px 0 0 0 var(--blue);
  }
  .circle.active {
-    background: #4285f4;
+    background: var(--blue);
    color: white;
    border: none;
  }
  .circle.done {
-    background: #bdbdbd;
+    background: var(--grey-5);
    color: white;
    border: none;
  }
  .circle {
-    color: #bdbdbd;
+    color: var(--grey-5);
    font-size: 14px;
+    font-weight: 500;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
-    border: 1px solid #bdbdbd;
+    border: 1px solid var(--grey-5);
    box-sizing: border-box;
  }
 </style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -52,7 +52,7 @@
  }

  .templates-card {
-    background-color: var(--white);
+    background-color: var(--background);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-m);
    border: var(--border-dark);
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@ -18,9 +18,9 @@

 <div class="container" bind:this={anchor}>
  <Input {...inputProps} bind:value />
-  <button on:click={popover.show}>
+  <div class="icon" on:click={popover.show}>
    <Icon name="edit" />
-  </button>
+  </div>
 </div>
 <GenericBindingPopover
  {anchor}
@ -34,25 +34,24 @@
    position: relative;
  }

-  button {
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
    position: absolute;
-    background: none;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--grey-4);
-    right: var(--spacing-s);
-    bottom: 5px;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 16px;
  }
-  button:hover {
-    background: var(--grey-5);
+  .icon:hover {
+    color: var(--ink);
    cursor: pointer;
  }
-  button :global(svg) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%) !important;
-  }
 </style>
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@ -86,7 +86,7 @@
  .controls {
    margin-top: var(--spacing-m);
    display: grid;
-    align-items: baseline;
+    align-items: center;
    grid-gap: var(--spacing-l);
    grid-template-columns: 1fr auto auto;
  }
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -67,7 +67,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    background: white;
+    background: var(--background);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
@ -98,7 +98,7 @@
  .handler-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
-    border: 2px solid #f9f9f9;
+    border: 2px solid var(--grey-1);
    height: 80px;
    width: 100%;
  }
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@ -18,9 +18,11 @@
 <div class="container" bind:this={iconContainer} on:click={popover.show}>
  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
 </div>
-<Popover bind:this={popover} anchor={iconContainer} align="right">
-  <FeedbackIframe on:finished={popover.hide} />
-</Popover>
+<div class="iframe">
+  <Popover bind:this={popover} anchor={iconContainer} align="right">
+    <FeedbackIframe on:finished={popover.hide} />
+  </Popover>
+</div>

 <style>
  i {
@ -48,4 +50,8 @@
  .container:hover i {
    color: var(--ink);
  }
+
+  .iframe :global(.menu-container) {
+    background-color: white;
+  }
 </style>
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@ -27,7 +27,7 @@
    align-items: center;
    justify-content: center;
    text-align: center;
-    background: white;
+    background: var(--background);
    color: var(--grey-7);
    border-radius: var(--border-radius-m);
    font-size: var(--font-size-xs);
--- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
@ -49,7 +49,7 @@
 <style>
  .selected {
    color: var(--blue);
-    background: #f9f9f9;
+    background: var(--grey-1);
    opacity: 1;
  }

--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@ -244,6 +244,6 @@
  }

  li:hover {
-    background-color: #e6e6e6;
+    background-color: var(--grey-3);
  }
 </style>
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@ -46,7 +46,7 @@
    padding: 0 var(--spacing-m);
    height: 32px;
    text-align: center;
-    background: #ffffff;
+    background: var(--background);
    color: var(--grey-7);
    border-radius: 5px;
    font-size: var(--font-size-xs);
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -95,9 +95,12 @@
      name={key} />
  </div>
  {#if bindable && control === Input && !key.startsWith('_')}
-    <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
+    <div
+      class="icon"
+      data-cy={`${key}-binding-button`}
+      on:click={dropdown.show}>
      <Icon name="edit" />
-    </button>
+    </div>
  {/if}
 </div>
 {#if control == Input}
@ -139,17 +142,25 @@
    padding-left: 2px;
    overflow: hidden;
  }
-  button {
+
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
    position: absolute;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 16px;
+  }
+  .icon:hover {
+    color: var(--ink);
    cursor: pointer;
-    background: none;
-    border: none;
-    height: 90%;
-    width: 2rem;
-    background: var(--grey-2);
-    right: 4px;
-    --spacing-s: 0;
-    border-left: 0.5px solid var(--grey-3);
-    outline-color: var(--blue);
  }
 </style>
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@ -1,44 +1,28 @@
-
-:root {
-
-    --white: #FFFFFF;
-    
-    --blue: #0055ff;
-    --blue-light: #F1F4FC;
-    --blue-dark: #2F4C9B;
-
+html {
+    /* Light theme */
+    --background: #FFFFFF;
    --ink: #393C44;
-    --grey-7: #808192;
-    --grey-5: #ADAEC4;
-    
-    --grey: #F2F2F2;
-    --grey-1: var(--grey-1);
-    --grey-4: #e8e8ef;
-    --grey-4: #E6E6E6;
-
-    --red: #E26D69;
-    --red-light:#FFE6E6;
-    --red-dark: #800400;
-
-
-    --font-black: "Inter Black";
-    --font-bold: "Inter Bold";
-    --fontsemibold: "Inter Medium";
-    --font-normal: "Inter";
-
-    --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
-    --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
-    --smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
-    --lightbodytext: "regular" "normal" 16pt  var(--font-normal);
-    --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
-    --quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
-    --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;
-
-
+}
+html.dark {
+    /* Dark theme */
+    --theme-hue: 208;
+    --theme-saturation: 9%;
+    --theme-brightness: 16%;
+    --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
+    --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
+    --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
+    --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
+    --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
+    --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
+    --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
+    --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
+    --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
+    --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
+    --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
 }

 html, body {
-    font-family: inter;
+    font-family: var(--font-sans);
    color: var(--ink);
    padding: 0;
    margin: 0;
@ -53,43 +37,23 @@ html, body {
 }

 h1 {
-    font-family: var(--font-black);
    font-size: 36pt;
-    color: var(--secondary100);
 }

 h2 {
-    font-family: var(--font-bold);
    font-size: 30pt;
-    color: var(--secondary100);
 }

 h3 {
-    font-family: var(--font-bold);
    font-size: 24pt;
-    color: var(--secondary60);
 }

 h4 {
-    font-family: var(--font-bold);
    font-size: 18pt;
-    color: var(--ink);
 }

 h5 {
-    font-family: var(--font-black);
    font-size: 14pt;
-    color: var(--secondary100);
-}
-
-h5 {
-    font-family: var(--font-black);
-    font-size: 12pt;
-    color: var(--darkslate);
-}
-
-textarea {
-    font-family: var(--font-normal);
 }

 .hoverable:hover {
@ -97,7 +61,6 @@ textarea {
 }

 /* Top bottom spacing */
-
 .bb-margin-m {
    margin-bottom: var(--spacing-m);
 }
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -8,10 +8,9 @@
 	<title>Budibase Builder</title>

 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
+	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/external.css'>
-	<link rel='stylesheet' href='/_builder/bbui.css'>
-
 </head>

 <body id="app">
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -2,10 +2,10 @@
  import { store, automationStore, backendUiStore } from "builderStore"
  import { Button } from "@budibase/bbui"
  import SettingsLink from "components/settings/Link.svelte"
+  import ThemeEditor from "components/settings/ThemeEditor.svelte"
  import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
  import { get } from "builderStore/api"
  import { isActive, goto, layout } from "@sveltech/routify"
-  import { PreviewIcon } from "components/common/Icons/"

  // Get Package and set store
  export let application
@ -66,6 +66,7 @@
      {/each}
    </div>
    <div class="toprightnav">
+      <ThemeEditor />
      <FeedbackNavLink />
      <div class="topnavitemright">
        <a target="_blank" href="https://docs.budibase.com">
@ -125,7 +126,7 @@
  .top-nav {
    flex: 0 0 auto;
    height: 60px;
-    background: #fff;
+    background: var(--background);
    padding: 0 20px;
    display: flex;
    box-sizing: border-box;
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@ -29,7 +29,7 @@

  .nav {
    overflow-y: auto;
-    background: var(--white);
+    background: var(--background);
    padding: var(--spacing-l) var(--spacing-xl);
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@ -31,7 +31,7 @@
  }
  .nav {
    overflow-y: auto;
-    background: var(--white);
+    background: var(--background);
    padding: var(--spacing-l) var(--spacing-xl);
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@ -75,7 +75,7 @@
  }

  h4 {
-    color: var(--white);
+    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@ -65,7 +65,7 @@

  .ui-nav {
    grid-column: 1;
-    background-color: var(--white);
+    background-color: var(--background);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
@ -84,14 +84,14 @@
    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
  }
  .preview-content {
-    background: #fff;
+    background: var(--background);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    flex: 1 1 auto;
  }

  .components-pane {
    grid-column: 3;
-    background-color: var(--white);
+    background-color: var(--background);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@ -58,7 +58,7 @@

  .ui-nav {
    grid-column: 1;
-    background-color: var(--white);
+    background-color: var(--background);
    padding: 20px;
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -103,7 +103,7 @@
  .banner-content {
    position: absolute;
    font-size: 24px;
-    color: var(--white);
+    color: white;
    font-weight: 500;
  }
 </style>
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -709,24 +709,16 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@budibase/bbui@^1.47.0":
-  version "1.47.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.47.0.tgz#f7c1f1efff12b2a62eb52536fcc9a037f9b25982"
-  integrity sha512-mWOglrEjKSOe7At2gA8HDv5MUvPzFrpGgiikAeMEulvE7sq/SCreXtAps/Jx+RKq/tUMEZkDoA3S5nuQhsNM/A==
+"@budibase/bbui@^1.50.1":
+  version "1.50.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.50.1.tgz#5fa9cc8279cc93545b1832df1aef897df7a5e4aa"
+  integrity sha512-F6a+dhUAgagV3bPPCw79ok/xoqnAnHhQ7yNrVOFdv7pPoYsqd/30jic1ytHhCXPho4nSzDPTpCA1vIHXMj/3GA==
  dependencies:
+    quill "^1.3.7"
    sirv-cli "^0.4.6"
    svelte-flatpickr "^2.4.0"
    svelte-portal "^1.0.0"

-"@budibase/client@^0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64"
-  integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@budibase/colorpicker@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@ -1415,11 +1407,6 @@ array-equal@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"

-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@ -1474,13 +1461,6 @@ atob@^2.1.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"

-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -1888,6 +1868,11 @@ cliui@^5.0.0:
    strip-ansi "^5.2.0"
    wrap-ansi "^5.1.0"

+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 clone@~0.1.9:
  version "0.1.19"
  resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
@ -2430,25 +2415,17 @@ decode-uri-component@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"

-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
+    regexp.prototype.flags "^1.2.0"

 deep-is@~0.1.3:
  version "0.1.3"
@ -2619,23 +2596,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

-es-abstract@^1.17.4:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
 es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
  version "1.18.0-next.1"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
@ -2654,19 +2614,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
    string.prototype.trimend "^1.0.1"
    string.prototype.trimstart "^1.0.1"

-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -2736,6 +2683,11 @@ eventemitter2@^6.4.2:
  version "6.4.3"
  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.3.tgz#35c563619b13f3681e7eb05cbdaf50f56ba58820"

+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@ -2838,9 +2790,10 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
    assign-symbols "^1.0.0"
    is-extendable "^1.0.1"

-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==

 extglob@^2.0.4:
  version "2.0.4"
@ -2876,6 +2829,11 @@ fast-deep-equal@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"

+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^3.0.3:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
@ -2973,7 +2931,7 @@ for-in@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"

-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@ -3356,22 +3314,12 @@ is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
  dependencies:
    binary-extensions "^2.0.0"

-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -3403,7 +3351,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@ -3469,11 +3417,6 @@ is-installed-globally@^0.3.2:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-module@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@ -3483,11 +3426,6 @@ is-negative-zero@^2.0.0:
  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=

-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -3538,23 +3476,18 @@ is-reference@^1.1.2:
  dependencies:
    "@types/estree" "0.0.39"

-is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  dependencies:
-    has "^1.0.3"
-
-is-regex@^1.1.1:
+is-regex@^1.0.4, is-regex@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
  dependencies:
    has-symbols "^1.0.1"

-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  dependencies:
+    has "^1.0.3"

 is-stream@^1.1.0:
  version "1.1.0"
@ -3564,41 +3497,16 @@ is-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"

-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
  dependencies:
    has-symbols "^1.0.1"

-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"

-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -3619,11 +3527,6 @@ isarray@1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@ -4749,7 +4652,7 @@ object-inspect@^1.8.0:
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==

-object-is@^1.1.3:
+object-is@^1.0.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
@ -4910,6 +4813,11 @@ p-try@^2.0.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"

+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@ -5157,6 +5065,27 @@ querystring@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"

+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 ramda@~0.26.1:
  version "0.26.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@ -5278,7 +5207,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

-regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@ -5286,11 +5215,6 @@ regexp.prototype.flags@^1.3.0:
    define-properties "^1.1.3"
    es-abstract "^1.17.0-next.1"

-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@ -5703,14 +5627,6 @@ shortid@^2.2.15:
  dependencies:
    nanoid "^2.1.0"

-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -6432,43 +6348,10 @@ whatwg-url@^8.0.0:
    tr46 "^2.0.2"
    webidl-conversions "^5.0.0"

-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@ -36,7 +36,7 @@
  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
  "dependencies": {
    "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.46.0",
+    "@budibase/bbui": "^1.50.1",
    "@budibase/svelte-ag-grid": "^0.0.13",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@svelteschool/svelte-forms": "^0.7.0",