got it working again

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

@@ -60,6 +60,9 @@ export default {
     ContrastRatio
   },
   setup () {
+    // All rules that are made by editor
+    const allEditedRules = reactive({})
+
     // ## Meta stuff
     const name = ref('')
     const author = ref('')
@@ -79,6 +82,18 @@ export default {
 
     // ## Palette stuff
     const palettes = reactive([
+      {
+        name: 'dark',
+        bg: '#121a24',
+        fg: '#182230',
+        text: '#b9b9ba',
+        link: '#d8a070',
+        accent: '#d8a070',
+        cRed: '#FF0000',
+        cBlue: '#0095ff',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500'
+      },
       {
         name: 'light',
         bg: '#f2f6f9',
@@ -91,18 +106,6 @@ export default {
         cGreen: '#0fa00f',
         cOrange: '#ffa500',
         border: '#d8e6f9'
-      },
-      {
-        name: 'dark',
-        bg: '#121a24',
-        fg: '#182230',
-        text: '#b9b9ba',
-        link: '#d8a070',
-        accent: '#d8a070',
-        cRed: '#FF0000',
-        cBlue: '#0095ff',
-        cGreen: '#0fa00f',
-        cOrange: '#ffa500'
       }
     ])
     const selectedPaletteId = ref(0)
@@ -225,9 +228,6 @@ export default {
       return root
     })
 
-    // All rules that are made by editor
-    const allEditedRules = reactive({})
-
     // Checkging whether component can support some "directives" which
     // are actually virtual subcomponents, i.e. Text, Link etc
     const componentHas = (subComponent) => {
@@ -395,53 +395,6 @@ export default {
         return null
       }
     })
-    const updatePreview = () => {
-      try {
-        const { name, ...paletteData } = selectedPalette.value
-        const rules = init({
-          inputRuleset: editorFriendlyToOriginal.value,
-          initialStaticVars: {
-            ...paletteData
-          },
-          ultimateBackgroundColor: '#000000',
-          rootComponentName: selectedComponentName.value,
-          editMode: true,
-          debug: true
-        }).eager
-        previewRules.splice(0, previewRules.length)
-        previewRules.push(...rules)
-      } catch (e) {
-        console.error('Could not compile preview theme', e)
-      }
-    }
-    const updateSelectedComponent = () => {
-      selectedVariant.value = 'normal'
-      selectedState.clear()
-      updatePreview()
-    }
-    updateSelectedComponent()
-
-    watch(
-      allEditedRules,
-      updatePreview
-    )
-
-    watch(
-      palettes,
-      updatePreview
-    )
-
-    watch(
-      selectedPalette,
-      updatePreview
-    )
-
-    watch(
-      selectedComponentName,
-      updateSelectedComponent
-    )
-
-    // export and import
     const editorFriendlyToOriginal = computed(() => {
       const resultRules = []
 
@@ -481,10 +434,61 @@ export default {
       return resultRules
     })
 
+    const updatePreview = () => {
+      try {
+        const { name, ...paletteData } = selectedPalette.value
+        // This normally would be handled by Root but since we pass something
+        // else we have to make do ourselves
+        paletteData.accent = paletteData.accent || paletteData.link
+        paletteData.link = paletteData.link || paletteData.accent
+        const rules = init({
+          inputRuleset: editorFriendlyToOriginal.value,
+          initialStaticVars: {
+            ...paletteData
+          },
+          ultimateBackgroundColor: '#000000',
+          rootComponentName: selectedComponentName.value,
+          editMode: true,
+          debug: true
+        }).eager
+        previewRules.splice(0, previewRules.length)
+        previewRules.push(...rules)
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+      }
+    }
+
+    const updateSelectedComponent = () => {
+      selectedVariant.value = 'normal'
+      selectedState.clear()
+      updatePreview()
+    }
+    updateSelectedComponent()
+
+    // export and import
+    watch(
+      allEditedRules,
+      updatePreview
+    )
+
+    watch(
+      palettes,
+      updatePreview
+    )
+
+    watch(
+      selectedPalette,
+      updatePreview
+    )
+
+    watch(
+      selectedComponentName,
+      updateSelectedComponent
+    )
+
     // ## Variables
     const allCustomVirtualDirectives = [...componentsMap.values()]
       .map(c => {
-        console.log(c.defaultRules.filter(c => c.component === 'Root'))
         return c
           .defaultRules
           .filter(c => c.component === 'Root')
@@ -504,6 +508,17 @@ export default {
     const virtualDirectives = reactive(allCustomVirtualDirectives)
     const selectedVirtualDirectiveId = ref(0)
     const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+    const selectedVirtualDirectiveParsed = computed({
+      get () {
+        switch (selectedVirtualDirective.value.valType) {
+          case 'shadow':
+            return {}
+          default:
+            return null
+        }
+      }
+    })
+
     const getNewDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
@@ -512,8 +527,10 @@ export default {
 
     // ## Export and Import
     const styleExporter = newExporter({
-      filename: 'pleroma.palette.json',
+      filename: name.value || 'pleroma_theme',
-      getExportedObject: () => exportStyleData
+      mime: 'text/plain',
+      extension: 'piss',
+      getExportedObject: () => exportStyleData.value
     })
     const exportStyleData = computed(() => {
       return [
@@ -591,6 +608,7 @@ export default {
       virtualDirectives,
       selectedVirtualDirective,
       selectedVirtualDirectiveId,
+      selectedVirtualDirectiveParsed,
       getNewDirective,
 
       // ## Export and Import

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

@@ -87,34 +87,32 @@
     }
   }
 
-  .palette-editor {
+  .list-editor {
     display: grid;
     grid-template-areas:
       "label    editor"
       "selector editor"
-      "motion   editor";
+      "movement editor";
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr auto;
     grid-gap: 0.5em;
 
-    .palette-editor-edit {
+    .list-edit-area {
       grid-area: editor;
     }
 
-    .palette-selector {
+    .list-select {
+      grid-area: selector;
+      margin: 0;
+
       &-label {
         font-weight: bold;
         grid-area: label;
         margin: 0;
       }
-    }
-
-    .palette-list {
-      grid-area: selector;
-      margin: 0;
 
       &-movement {
-        grid-area: motion;
+        grid-area: movement;
         margin: 0;
       }
     }

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

@@ -258,10 +258,10 @@
       <div
         key="palette"
         :label="$t('settings.style.themes3.editor.palette_tab')"
-        class="setting-item palette-editor"
+        class="setting-item list-editor"
       >
           <label
-            class="palette-selector-label"
+            class="list-select-label"
             for="palette-selector"
           >
             {{ $t('settings.style.themes3.palette.label') }}
@@ -269,9 +269,9 @@
           </label>
           <Select
             id="palette-selector"
-            v-model="editedPalette"
+            v-model="selectedPaletteId"
-            class="palette-list"
+            class="list-select"
-            size="9"
+            size="10"
           >
             <option
               v-for="(p, index) in palettes"
@@ -282,17 +282,58 @@
             </option>
           </Select>
           <SelectMotion
-            class="palette-list-movement"
+            class="list-select-movement"
             v-model="palettes"
-            :selected-id="editedPalette"
             :get-add-value="getNewPalette"
-            @update:selectedId="e => editedPalette = e"
+            :selected-id="selectedPaletteId"
+            @update:selectedId="e => selectedPaletteId = e"
           />
         <PaletteEditor
-          class="palette-editor-edit"
+          class="list-edit-area"
-          v-model="palette"
+          v-model="selectedPalette"
         />
       </div>
+      <div
+        key="variables"
+        :label="$t('settings.style.themes3.editor.variables_tab')"
+        class="setting-item list-editor"
+      >
+          <label
+            class="list-select-label"
+            for="variables-selector"
+          >
+            {{ $t('settings.style.themes3.variables.label') }}
+            {{ ' ' }}
+          </label>
+          <Select
+            id="variables-selector"
+            v-model="selectedVirtualDirectiveId"
+            class="list-select"
+            size="9"
+          >
+            <option
+              v-for="(p, index) in virtualDirectives"
+              :key="p.name"
+              :value="index"
+            >
+              {{ p.name }}
+            </option>
+          </Select>
+          <SelectMotion
+            class="list-select-movement"
+            v-model="virtualDirectives"
+            :selected-id="selectedVirtualDirectiveId"
+            :get-add-value="getNewVirtualDirective"
+            @update:selectedId="e => selectedVirtualDirectiveId = e"
+          />
+          <div class="list-edit-area">
+            <ShadowControl
+              v-if="selectedVirtualDirective.valType === 'shadow'"
+              v-model="selectedVirtualDirective.value"
+            />
+            {{ selectedVirtualDirective.valType }}
+          </div>
+      </div>
     </tab-switcher>
   </div>
 </template>

src/services/export_import/export_import.js

@@ -2,15 +2,22 @@ import utf8 from 'utf8'
 
 export const newExporter = ({
   filename = 'data',
+  mime = 'application/json',
+  extension = '.json',
   getExportedObject
 }) => ({
   exportData () {
-    const stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    let stringified
+    if (mime === 'application/json') {
+      stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    } else {
+      stringified = utf8.encode(getExportedObject()) // Pretty-print and indent with 2 spaces
+    }
 
     // Create an invisible link with a data url and simulate a click
     const e = document.createElement('a')
-    e.setAttribute('download', `${filename}.json`)
+    e.setAttribute('download', `${filename}.${extension}`)
-    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
     e.style.display = 'none'
 
     document.body.appendChild(e)