From eb6269a0bb6359794b3e38d30f72d915f29aeaa9 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 30 Aug 2023 09:27:23 +0100
Subject: [PATCH] Refactor theme binding into device databindings fn

---
 .../builder/src/builderStore/dataBinding.js   | 43 ++++++++++++-------
 .../Component/ComponentSettingsPanel.svelte   | 33 +++-----------
 .../context/DeviceBindingsProvider.svelte     |  2 -
 3 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 20172e4f9c..0510cff07d 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -497,22 +497,33 @@ const getDeviceBindings = () => {
   let bindings = []
   if (get(store).clientFeatures?.deviceAwareness) {
     const safeDevice = makePropSafe("device")
-    bindings.push({
-      type: "context",
-      runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
-      readableBinding: `Device.Mobile`,
-      category: "Device",
-      icon: "DevicePhone",
-      display: { type: "boolean", name: "mobile" },
-    })
-    bindings.push({
-      type: "context",
-      runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
-      readableBinding: `Device.Tablet`,
-      category: "Device",
-      icon: "DevicePhone",
-      display: { type: "boolean", name: "tablet" },
-    })
+
+    bindings = [
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
+        readableBinding: `Device.Mobile`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "boolean", name: "mobile" },
+      },
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
+        readableBinding: `Device.Tablet`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "boolean", name: "tablet" },
+      },
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("theme")}`,
+        readableBinding: `App.Theme`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "string", name: "App Theme" },
+      },
+    ]
   }
   return bindings
 }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 073160dc67..afcada4138 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -1,11 +1,6 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    themeStore,
-  } from "builderStore"
+  import { store, selectedComponent, selectedScreen } from "builderStore"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
@@ -27,20 +22,6 @@
     $store.selectedComponentId
   )
 
-  // frontend Constant Themes
-  $: globalBindings = [
-    ...bindings,
-    {
-      type: "context",
-      runtimeBinding: `[device].[theme]`, //app.settings?
-      readableBinding: `App.Theme`,
-      category: "Settings",
-      icon: "Settings",
-      display: { type: "string", name: "Theme" },
-    },
-  ]
-  $: console.log(globalBindings)
-
   $: componentBindings = getComponentBindableProperties(
     $selectedScreen,
     $store.selectedComponentId
@@ -78,28 +59,24 @@
         <ComponentSettingsSection
           {componentInstance}
           {componentDefinition}
-          bindings={globalBindings}
+          {bindings}
           {componentBindings}
           {isScreen}
         />
       {/if}
       {#if section == "styles"}
-        <DesignSection
-          {componentInstance}
-          {componentDefinition}
-          bindings={globalBindings}
-        />
+        <DesignSection {componentInstance} {componentDefinition} {bindings} />
         <CustomStylesSection
           {componentInstance}
           {componentDefinition}
-          bindings={globalBindings}
+          {bindings}
         />
       {/if}
       {#if section == "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
-          bindings={globalBindings}
+          {bindings}
         />
       {/if}
     </Panel>
diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 165abd0027..2bd21d02e7 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/context/DeviceBindingsProvider.svelte
@@ -15,7 +15,6 @@
   })
 
   $: theme = $themeStore.theme
-  $: baseTheme = $themeStore.baseTheme
 
   $: data = {
     mobile: width && width < tabletBreakpoint,
@@ -23,7 +22,6 @@
     width,
     height,
     theme,
-    baseTheme,
   }
 
   onMount(() => {