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 343b56aa1..2605e8d8b 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: staticVars.value })
+      const computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: selectedPalette.value })
       if (computedColor) {
         return rgb2hex(computedColor)
       }
@@ -720,20 +720,6 @@ 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 638b789a2..ccba2c7dc 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="staticVars"
+              :static-vars="selectedPalette"
               @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 d98dea615..8233d9079 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.staticVars = inject('staticVars')
+    exports.selectedPalette = inject('selectedPalette')
 
     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 65c5e2f12..c66b3af48 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="staticVars"
+      :static-vars="selectedPalette"
       :compact="true"
     />
     <ColorInput