variables stuff seem to be at least somewhat working

src/components/palette_editor/palette_editor.vue

@@ -107,7 +107,7 @@ const updatePalette = (paletteKey, value) => {
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(3, 1fr) auto;
   grid-gap: 0.5em;
-  align-items: space-between;
+  align-items: baseline;
 
   .palette-import-button {
     grid-column: 1 / span 2;

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -17,7 +17,7 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
-// import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
   // rgb2hex,
   hex2rgb,
@@ -259,7 +259,7 @@ export default {
       }
     })
 
-    const getEditedElement = (component, directive) => computed({
+    const getEditedElement = (component, directive, postProcess = x => x) => computed({
       get () {
         let usedRule
         const fallback = editorFriendlyFallbackStructure.value
@@ -271,7 +271,11 @@ export default {
           usedRule = get(fallback, path)
         }
 
-        return usedRule
+        if (directive === 'shadow') {
+          console.log('EDITED', usedRule)
+          console.log('PP', postProcess(usedRule))
+        }
+        return postProcess(usedRule)
       },
       set (value) {
         set(allEditedRules, getPath(component, directive), value)
@@ -316,9 +320,22 @@ export default {
       }
     }
 
+    const normalizeShadows = (shadows) => {
+      console.log('NORMALIZE')
+      return shadows?.map(shadow => {
+        if (typeof shadow === 'object') {
+          return shadow
+        }
+        if (typeof shadow === 'string') {
+          return parseShadow(shadow)
+        }
+        return null
+      })
+    }
+
     // Shadow is partially edited outside the ShadowControl
     // for better space utilization
-    const editedShadow = getEditedElement(null, 'shadow')
+    const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
     const editedSubShadowId = ref(null)
     const editedSubShadow = computed(() => {
       if (editedShadow.value == null || editedSubShadowId.value == null) return null
@@ -511,8 +528,15 @@ export default {
     const selectedVirtualDirectiveParsed = computed({
       get () {
         switch (selectedVirtualDirective.value.valType) {
-          case 'shadow':
-            return {}
+          case 'shadow': {
+            const directiveValue = selectedVirtualDirective.value.value
+            if (Array.isArray(directiveValue)) {
+              return normalizeShadows(directiveValue)
+            } else {
+              const splitShadow = directiveValue.split(/,/g).map(x => x.trim())
+              return normalizeShadows(splitShadow)
+            }
+          }
           default:
             return null
         }

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -93,7 +93,7 @@
       "label    editor"
       "selector editor"
       "movement editor";
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 10em 1fr;
     grid-template-rows: auto 1fr auto;
     grid-gap: 0.5em;
 
@@ -124,9 +124,9 @@
     grid-template-rows: auto auto 1fr;
     grid-gap: 0.5em;
     grid-template-areas:
-      "component    component  variant"
-      "state        state      state"
-      "preview      settings    settings";
+      "component component variant"
+      "state     state     state"
+      "preview   settings  settings";
 
     .component-selector {
       grid-area: component;

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -245,6 +245,7 @@
             >
               {{ $t('settings.style.themes3.editor.include_in_rule') }}
             </checkbox>
+            {{ editedShadow }}
             <ShadowControl
               v-model="editedShadow"
               :disabled="!isShadowPresent"
@@ -327,11 +328,15 @@
             @update:selectedId="e => selectedVirtualDirectiveId = e"
           />
           <div class="list-edit-area">
+            <Select>
+              <option value='shadow'>shadow</option>
+              <option value='shadow'>color</option>
+              <option value='shadow'>generic</option>
+            </Select>
             <ShadowControl
               v-if="selectedVirtualDirective.valType === 'shadow'"
-              v-model="selectedVirtualDirective.value"
+              v-model="selectedVirtualDirectiveParsed"
             />
-            {{ selectedVirtualDirective.valType }}
           </div>
       </div>
     </tab-switcher>

src/components/shadow_control/shadow_control.js

@@ -45,6 +45,7 @@ export default {
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
   data () {
+    console.log('MODEL VALUE', this.modelValue, this.fallback)
     return {
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
@@ -60,6 +61,9 @@ export default {
     Popover,
     ComponentPreview
   },
+  beforeUpdate () {
+    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+  },
   computed: {
     selectedType: {
       get () {

src/i18n/en.json

@@ -774,6 +774,9 @@
           "extra3": "Extra 3",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
+        "variables": {
+          "label": "Variables"
+        },
         "editor": {
           "title": "Style",
           "new_style": "New",
@@ -800,7 +803,8 @@
             "no-auto": "Disabled"
           },
           "component_tab": "Components style",
-          "palette_tab": "Color presets"
+          "palette_tab": "Color presets",
+          "variables_tab": "Variables (Advanced)"
         },
         "hacks": {
           "underlay_overrides": "Change underlay",