diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte index 2f4b79b91a..77c29dc2f4 100644 --- a/packages/bbui/src/ColorPicker/ColorPicker.svelte +++ b/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)" }
-
(open = true)} - /> +
+
(open = true)} + /> +
{#if open}
(open = false)} @@ -124,17 +129,19 @@
{category.label}
{#each category.colors as color} -
{ - 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})`} - - {/if} +
+
{ + 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})`} + + {/if} +
{/each}
@@ -236,4 +243,8 @@ .category--custom .heading { margin-bottom: var(--spacing-xs); } + + .spectrum-wrapper { + background-color: transparent; + } diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 637ce22233..7bee9615bf 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -1,12 +1,6 @@ - + diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js index 95ca1e52d5..9269cef06e 100644 --- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js +++ b/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", diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte index 19a8404699..7dc85efb38 100644 --- a/packages/standard-components/src/Layout.svelte +++ b/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); }