Add initial work on refactoring color picker to account for client app theme

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -9,6 +9,9 @@
 
   export let value
   export let size = "M"
+  export let spectrumTheme
+
+  $: console.log(spectrumTheme)
 
   let open = false
 
@@ -21,7 +24,8 @@
     {
       label: "Grays",
       colors: [
-        "white",
+        "gray-50",
+        "gray-75",
         "gray-100",
         "gray-200",
         "gray-300",
@@ -31,7 +35,6 @@
         "gray-700",
         "gray-800",
         "gray-900",
-        "black",
       ],
     },
     {
@@ -86,7 +89,7 @@
       return value
     }
     let found = false
-    const comparisonValue = value.substring(35, value.length - 1)
+    const comparisonValue = value.substring(28, value.length - 1)
     for (let category of categories) {
       found = category.colors.includes(comparisonValue)
       if (found) {
@@ -102,17 +105,19 @@
 
   const getCheckColor = value => {
     return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
-      ? "black"
-      : "white"
+      ? "var(--spectrum-global-color-gray-900)"
+      : "var(--spectrum-global-color-gray-50)"
   }
 </script>
 
 <div class="container">
-  <div
-    class="preview size--{size || 'M'}"
-    style="background: {color};"
-    on:click={() => (open = true)}
-  />
+  <div class="spectrum-wrapper {spectrumTheme || ''}">
+    <div
+      class="preview size--{size || 'M'}"
+      style="background: {color};"
+      on:click={() => (open = true)}
+    />
+  </div>
   {#if open}
     <div
       use:clickOutside={() => (open = false)}
@@ -124,17 +129,19 @@
           <div class="heading">{category.label}</div>
           <div class="colors">
             {#each category.colors as color}
-              <div
-                on:click={() => {
-                  onChange(`var(--spectrum-global-color-static-${color})`)
-                }}
-                class="color"
-                style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
-                title={prettyPrint(color)}
-              >
-                {#if value === `var(--spectrum-global-color-static-${color})`}
-                  <Icon name="Checkmark" size="S" />
-                {/if}
+              <div class="spectrum-wrapper {spectrumTheme || ''}">
+                <div
+                  on:click={() => {
+                    onChange(`var(--spectrum-global-color-${color})`)
+                  }}
+                  class="color"
+                  style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
+                  title={prettyPrint(color)}
+                >
+                  {#if value === `var(--spectrum-global-color-${color})`}
+                    <Icon name="Checkmark" size="S" />
+                  {/if}
+                </div>
               </div>
             {/each}
           </div>
@@ -236,4 +243,8 @@
   .category--custom .heading {
     margin-bottom: var(--spacing-xs);
   }
+
+  .spectrum-wrapper {
+    background-color: transparent;
+  }
 </style>

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,12 +1,6 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import {
-    Checkbox,
-    Input,
-    Select,
-    DetailSummary,
-    ColorPicker,
-  } from "@budibase/bbui"
+  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -31,6 +25,7 @@
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
+  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
 
   export let componentDefinition
   export let componentInstance

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte

@@ -1,42 +1,8 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import Colorpicker from "@budibase/colorpicker"
-
-  const dispatch = createEventDispatcher()
+  import { ColorPicker } from "@budibase/bbui"
+  import { store } from "builderStore"
 
   export let value
-
-  const WAIT = 150
-
-  function throttle(callback, wait, immediate = false) {
-    let timeout = null
-    let initialCall = true
-
-    return function () {
-      const callNow = immediate && initialCall
-      const next = () => {
-        callback.apply(this, arguments)
-        timeout = null
-      }
-
-      if (callNow) {
-        initialCall = false
-        next()
-      }
-
-      if (!timeout) {
-        timeout = setTimeout(next, wait)
-      }
-    }
-  }
-
-  const onChange = throttle(
-    e => {
-      dispatch("change", e.detail)
-    },
-    WAIT,
-    true
-  )
 </script>
 
-<Colorpicker value={value || "#C4C4C4"} on:change={onChange} />
+<ColorPicker {value} on:change spectrumTheme={$store.theme} />

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -1,4 +1,5 @@
-import { Input, Select, ColorPicker } from "@budibase/bbui"
+import { Input, Select } from "@budibase/bbui"
+import ColorPicker from "./PropertyControls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",

packages/standard-components/src/Layout.svelte

@@ -125,6 +125,7 @@
     overflow: auto;
     overflow-x: hidden;
     position: relative;
+    background: var(--spectrum-alias-background-color-secondary);
   }
 
   .nav-wrapper {
@@ -132,7 +133,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    background: white;
+    background: var(--spectrum-alias-background-color-primary);
     z-index: 2;
     box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
   }