Refactor theme binding into device databindings fn

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({
+
+    bindings = [
+      {
         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" },
-    })
+      },
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("theme")}`,
+        readableBinding: `App.Theme`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "string", name: "App Theme" },
+      },
+    ]
   }
   return bindings
 }

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 {
+  import { store, selectedComponent, selectedScreen } from "builderStore"
-    store,
-    selectedComponent,
-    selectedScreen,
-    themeStore,
-  } 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
+        <DesignSection {componentInstance} {componentDefinition} {bindings} />
-          {componentInstance}
-          {componentDefinition}
-          bindings={globalBindings}
-        />
         <CustomStylesSection
           {componentInstance}
           {componentDefinition}
-          bindings={globalBindings}
+          {bindings}
         />
       {/if}
       {#if section == "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
-          bindings={globalBindings}
+          {bindings}
         />
       {/if}
     </Panel>

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(() => {