Add default spectrum colours to existing builder components and allow spectrum dark mode toggle

packages/builder/index.html

@@ -1,12 +1,12 @@
 <!doctype html>
-<html>
+<html class="spectrum spectrum--medium spectrum--darkest" lang="en" dir="ltr">
 <head>
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
 	<title>Budibase Builder</title>
 	<link rel='icon' type='image/png' href='./src/favicon.png'>
 </head>
-<body id="app" class="spectrum spectrum--medium spectrum--darkest" lang="en" dir="ltr">
+<body id="app">
 	<script type="module" src='/src/main.js'></script>
 </body>
 </html>

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

@@ -4,18 +4,10 @@ export const getThemeStore = () => {
   const themeElement = document.documentElement
   const initialValue = {
     darkMode: true,
-    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
@@ -28,10 +20,8 @@ export const getThemeStore = () => {
 
   // Update theme when store changes
   store.subscribe(theme => {
-    themeElement.classList[theme.darkMode ? "add" : "remove"]("dark")
+    themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
-    setCSSVariable("--theme-hue", Math.round(theme.hue))
+    themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
-    setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
-    setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
   })
 
   return store

packages/builder/src/components/common/NavItem.svelte

@@ -45,27 +45,26 @@
 
 <style>
   .nav-item {
+    border-radius: var(--border-radius-s);
     cursor: pointer;
     color: var(--grey-7);
+    transition: background-color
+      var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
   }
   .nav-item.border {
-    border-top: 1px solid var(--grey-1);
+    /*border-top: 1px solid var(--grey-2);*/
   }
   .nav-item.selected {
     background-color: var(--grey-2);
     color: var(--ink);
   }
   .nav-item:hover {
-    background-color: var(--grey-1);
+    background-color: var(--grey-3);
   }
   .nav-item:hover .actions {
     display: flex;
     visibility: visible;
   }
-  .nav-item:hover,
-  .nav-item.selected {
-    border-radius: var(--border-radius-s);
-  }
 
   .content {
     padding: 0 var(--spacing-s);

packages/builder/src/components/settings/ThemeEditor.svelte

@@ -1,6 +1,6 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Label, Toggle, Button, Slider } from "@budibase/bbui"
+  import { Toggle } from "@budibase/bbui"
 
   let showAdvanced = false
 </script>
@@ -9,34 +9,6 @@
   <div>
     <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>
 
 <style>
@@ -47,8 +19,4 @@
     align-items: stretch;
     gap: var(--spacing-l);
   }
-
-  .button {
-    align-self: flex-start;
-  }
 </style>

packages/builder/src/components/start/AppCard.svelte

@@ -44,7 +44,7 @@
 
 <style>
   .apps-card {
-    background-color: var(--background);
+    background-color: var(--background-alt);
     padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
     max-width: 300px;

packages/builder/src/global.css

@@ -1,33 +1,29 @@
-html {
-    /* Light theme */
-    --background: #FFFFFF;
-    --ink: #393C44;
-}
-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: var(--font-sans);
-    color: var(--ink);
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
+    min-height: 100%;
+}
+
+body {
+    --background: var(--spectrum-alias-background-color-primary);
+    --background-alt: var(--spectrum-alias-background-color-secondary);
+    --border-light: 1px solid var(--spectrum-global-color-gray-200);
+    --border-dark: 1px solid var(--spectrum-global-color-gray-300);
+    --ink: var(--spectrum-alias-text-color);
+    --grey-1: var(--spectrum-global-color-gray-100);
+    --grey-2: var(--spectrum-global-color-gray-200);
+    --grey-3: var(--spectrum-global-color-gray-300);
+    --grey-4: var(--spectrum-global-color-gray-400);
+    --grey-5: var(--spectrum-global-color-gray-500);
+    --grey-6: var(--spectrum-global-color-gray-600);
+    --grey-7: var(--spectrum-global-color-gray-700);
+    --grey-8: var(--spectrum-global-color-gray-800);
+    --grey-9: var(--spectrum-global-color-gray-900);
+
+    font-family: var(--font-sans);
+    color: var(--ink);
     background-color: var(--background);
 }
 

packages/builder/src/main.js

@@ -1,13 +1,16 @@
 import "remixicon/fonts/remixicon.css"
-import "./global.css"
-import "./fonts.css"
-import "./budibase.css"
-import "./fonts.css"
-import "@budibase/bbui/dist/style.css"
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
+import "@spectrum-css/vars/dist/spectrum-dark.css"
+import "@spectrum-css/vars/dist/spectrum-light.css"
+import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@spectrum-css/page/dist/index-vars.css"
+import "@budibase/bbui/dist/style.css"
+import "./global.css"
+import "./fonts.css"
+import "./budibase.css"
+import "./fonts.css"
 
 import { loadSpectrumIcons } from "./spectrum-icons"
 loadSpectrumIcons()

packages/builder/src/pages/builder/[application]/_reset.svelte

@@ -132,7 +132,7 @@
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--grey-2);
+    border-bottom: var(--border-light);
   }
 
   .toprightnav {

packages/builder/src/pages/builder/[application]/automate/_layout.svelte

@@ -24,7 +24,6 @@
     height: calc(100% - 60px);
     display: grid;
     grid-template-columns: 260px minmax(510px, 1fr) 260px;
-    background: var(--grey-2);
   }
 
   .nav {
@@ -36,7 +35,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    border-right: 1px solid var(--grey-2);
+    border-right: var(--border-light);
   }
 
   .content {

packages/builder/src/pages/builder/[application]/data/_layout.svelte

@@ -95,7 +95,7 @@
     align-items: stretch;
     gap: var(--spacing-l);
     position: relative;
-    border-right: 1px solid var(--grey-2);
+    border-right: var(--border-light);
   }
 
   i {

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

@@ -167,7 +167,6 @@
   .root {
     display: grid;
     grid-template-columns: 260px 1fr 260px;
-    background: var(--grey-2);
     align-items: stretch;
     height: calc(100vh - 60px);
   }
@@ -180,6 +179,7 @@
     gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
     overflow-y: auto;
+    border-right: var(--border-light);
   }
 
   .preview-pane {
@@ -208,5 +208,6 @@
     align-items: stretch;
     gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl);
+    border-left: var(--border-light);
   }
 </style>

packages/builder/src/pages/builder/_layout.svelte

@@ -52,7 +52,6 @@
     grid-template-columns: 260px 1fr;
     height: 100%;
     width: 100%;
-    background: var(--grey-1);
   }
 
   .main {