use actual staticVars instead of staticPallete

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)

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>

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

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