From 369ac726c0f40a6fd893e9b96f3ae1ad1886b885 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 29 Oct 2024 21:14:41 +0200
Subject: [PATCH] use actual staticVars instead of staticPallete

---
 .../settings_modal/tabs/style_tab/style_tab.js   | 16 +++++++++++++++-
 .../settings_modal/tabs/style_tab/style_tab.vue  |  2 +-
 .../tabs/style_tab/virtual_directives_tab.js     |  2 +-
 .../tabs/style_tab/virtual_directives_tab.vue    |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 2605e8d8..343b56aa 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -523,7 +523,7 @@ export default {
     })
 
     exports.computeColor = (color) => {
-      const computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: selectedPalette.value })
+      const computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: staticVars.value })
       if (computedColor) {
         return rgb2hex(computedColor)
       }
@@ -720,6 +720,20 @@ export default {
       return previewRules.value[0].dynamicVars
     })
 
+    const staticVars = computed(() => {
+      const rootComponent = overallPreviewRules.value.find(r => {
+        return r.component === 'Root'
+      })
+      const rootDirectivesEntries = Object.entries(rootComponent.directives)
+      const directives = Object.fromEntries(
+        rootDirectivesEntries
+          .filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
+          .map(([k, v]) => [k.substring(2), v.substring('color | '.length)]))
+      return directives
+    })
+    provide('staticVars', staticVars)
+    exports.staticVars = staticVars
+
     const previewColors = computed(() => {
       const stacked = dynamicVars.value.stacked
       const background = typeof stacked === 'string' ? stacked : rgb2hex(stacked)
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index ccba2c7d..638b789a 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -303,7 +303,7 @@
               :disabled="!isShadowPresent"
               :no-preview="true"
               :compact="true"
-              :static-vars="selectedPalette"
+              :static-vars="staticVars"
               @subShadowSelected="onSubShadow"
             />
           </div>
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
index 8233d907..d98dea61 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
@@ -26,7 +26,7 @@ export default {
 
     exports.emit = emit
     exports.computeColor = inject('computeColor')
-    exports.selectedPalette = inject('selectedPalette')
+    exports.staticVars = inject('staticVars')
 
     const selectedVirtualDirectiveId = ref(0)
     exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
index c66b3af4..65c5e2f1 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -68,7 +68,7 @@
     <ShadowControl
       v-if="selectedVirtualDirectiveValType === 'shadow'"
       v-model="draftVirtualDirective"
-      :static-vars="selectedPalette"
+      :static-vars="staticVars"
       :compact="true"
     />
     <ColorInput