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

6 years ago · 105715e68e
12 changed files with 45 additions and 90 deletions
--- a/packages/builder/index.html
+++ b/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>
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/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")
-    setCSSVariable("--theme-hue", Math.round(theme.hue))
-    setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
-    setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
+    themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
+    themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
  })

  return store
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/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);
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/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>
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/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;
--- a/packages/builder/src/global.css
+++ b/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);
 }

--- a/packages/builder/src/main.js
+++ b/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()
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/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 {
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/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 {
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/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 {
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/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 {