From 57d84a3cc62ab3c6597fd27bfa3ab7fa16b4edfb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2024 19:55:26 +0300
Subject: [PATCH 01/12] localization for that one string

---
 src/components/component_preview/component_preview.vue | 2 +-
 src/i18n/en.json                                       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index e34a6f3cb..3643703a6 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -39,7 +39,7 @@
         :class="previewClass"
         :style="previewStyle"
       >
-        TEST
+        {{ $t('settings.style.themes3.editor.test_string') }}
       </div>
     </div>
     <input
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0f2a47812..088506edf 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -798,6 +798,7 @@
           "icon_color": "Icon color",
           "link_color": "Link color",
           "include_in_rule": "Add to rule",
+          "test_string": "TEST",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",

From 707ed633e48047fa6b2478a3d3d8ae42a366dc8f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2024 22:13:15 +0300
Subject: [PATCH 02/12] overall preview + layout changes

---
 .../settings_modal/helpers/string_setting.vue |  1 +
 .../tabs/style_tab/style_tab.js               | 52 ++++++++++-
 .../tabs/style_tab/style_tab.scss             | 60 ++++++++++---
 .../tabs/style_tab/style_tab.vue              | 88 +++++++++++--------
 .../shadow_control/shadow_control.scss        |  2 +-
 src/i18n/en.json                              |  1 +
 6 files changed, 147 insertions(+), 57 deletions(-)

diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index fbea0b508..d0c70b150 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -5,6 +5,7 @@
   >
     <label
       :for="path"
+      class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">
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 c75e6b6b4..b6fc841db 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -13,9 +13,13 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import Preview from '../theme_tab/theme_preview.vue'
 
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
-import { getCssRules } from 'src/services/theme_data/css_utils.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
@@ -29,7 +33,7 @@ import {
 } from 'src/services/export_import/export_import.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
 
 // helper for debugging
 // eslint-disable-next-line no-unused-vars
@@ -41,7 +45,8 @@ const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'no
 library.add(
   faFile,
   faFloppyDisk,
-  faFolderOpen
+  faFolderOpen,
+  faArrowsRotate
 )
 
 export default {
@@ -57,7 +62,8 @@ export default {
     ColorInput,
     PaletteEditor,
     OpacityInput,
-    ContrastRatio
+    ContrastRatio,
+    Preview
   },
   setup () {
     // All rules that are made by editor
@@ -549,6 +555,40 @@ export default {
       value: 'foobar'
     })
 
+    const overallPreviewRules = ref()
+    const updateOverallPreview = () => {
+      try {
+        // This normally would be handled by Root but since we pass something
+        // else we have to make do ourselves
+
+        const { name, ...rest } = selectedPalette.value
+        const paletteRule = {
+          component: 'Root',
+          directives: Object
+            .entries(rest)
+            .map(([k, v]) => ['--' + k, v])
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
+        }
+
+        const rules = init({
+          inputRuleset: [
+            ...editorFriendlyToOriginal.value,
+            paletteRule
+          ],
+          ultimateBackgroundColor: '#000000',
+          liteMode: true,
+          debug: true
+        }).eager
+
+        overallPreviewRules.value = getScopedVersion(
+          getCssRules(rules),
+          '#edited-style-preview'
+        ).join('\n')
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+      }
+    }
+
     // ## Export and Import
     const styleExporter = newExporter({
       filename: name.value || 'pleroma_theme',
@@ -628,6 +668,10 @@ export default {
       previewCss,
       previewClass,
 
+      // overall preview
+      overallPreviewRules,
+      updateOverallPreview,
+
       // ## Variables
       virtualDirectives,
       selectedVirtualDirective,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 51d4a1a75..3d33d35ec 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -65,24 +65,56 @@
 
     &.heading {
       display: grid;
-      align-items: baseline;
-      grid-template-columns: 1fr auto auto auto;
+      grid-template:
+        "meta meta preview"
+        "meta meta preview"
+        "meta meta preview"
+        "meta meta preview"
+        "new  new  preview"
+        "load save refresh";
       grid-gap: 0.5em;
+      grid-template-columns: min-content min-content 6fr;
+      grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
-      h2 {
-        flex: 1 0 auto;
-      }
-    }
+      ul.setting-list {
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-area: meta;
 
-    &.metadata {
-      display: flex;
+        > li {
+          margin: 0;
+        }
 
-      .setting-item {
-        flex: 2 0 auto;
+        .meta-field {
+          margin: 0;
+
+          .setting-label {
+            display: inline-block;
+            margin-bottom: 0.5em;
+          }
+        }
       }
 
-      li {
-        text-align: right;
+      #edited-style-preview {
+        grid-area: preview;
+      }
+
+      .button-save {
+        grid-area: save;
+      }
+
+      .button-load {
+        grid-area: load;
+      }
+
+      .button-new {
+        grid-area: new;
+      }
+
+      .button-refresh {
+        grid-area: refresh;
       }
     }
   }
@@ -119,7 +151,9 @@
     }
   }
 
-  .palettes-editor {
+  .palette-editor {
+    width: min-content;
+
     .list-edit-area {
       align-self: baseline;
     }
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 1ccd7ab8b..309202928 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,49 +4,59 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <!-- TODO: This needs to go -->
-      <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <component
+        :is="'style'"
+        v-html="overallPreviewRules"
+      />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+      <Preview id="edited-style-preview" />
       <button
-        class="btn button-default"
+        class="btn button-default button-new"
         @click="clearTheme"
       >
         <FAIcon icon="file" />
         {{ $t('settings.style.themes3.editor.new_style') }}
       </button>
       <button
-        class="btn button-default"
+        class="btn button-default button-load"
         @click="importStyle"
       >
         <FAIcon icon="folder-open" />
         {{ $t('settings.style.themes3.editor.load_style') }}
       </button>
       <button
-        class="btn button-default"
+        class="btn button-default button-save"
         @click="exportStyle"
       >
         <FAIcon icon="floppy-disk" />
         {{ $t('settings.style.themes3.editor.save_style') }}
       </button>
-    </div>
-    <div class="setting-item metadata">
-      <ul class="setting-list">
+      <button
+        class="btn button-default button-refresh"
+        @click="updateOverallPreview"
+      >
+        <FAIcon icon="arrows-rotate" />
+        {{ $t('settings.style.themes3.editor.refresh_preview') }}
+      </button>
+      <ul class="setting-list style-metadata">
         <li>
-          <StringSetting v-model="name">
+          <StringSetting class="meta-field" v-model="name">
             {{ $t('settings.style.themes3.editor.style_name') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="author">
+          <StringSetting class="meta-field" v-model="author">
             {{ $t('settings.style.themes3.editor.style_author') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="license">
+          <StringSetting class="meta-field" v-model="license">
             {{ $t('settings.style.themes3.editor.style_license') }}
           </StringSetting>
         </li>
         <li>
-          <StringSetting v-model="website">
+          <StringSetting class="meta-field" v-model="website">
             {{ $t('settings.style.themes3.editor.style_website') }}
           </StringSetting>
         </li>
@@ -262,34 +272,34 @@
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item list-editor palette-editor"
       >
-          <label
-            class="list-select-label"
-            for="palette-selector"
+        <label
+          class="list-select-label"
+          for="palette-selector"
+        >
+          {{ $t('settings.style.themes3.palette.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          id="palette-selector"
+          v-model="selectedPaletteId"
+          class="list-select"
+          size="4"
+        >
+          <option
+            v-for="(p, index) in palettes"
+            :key="p.name"
+            :value="index"
           >
-            {{ $t('settings.style.themes3.palette.label') }}
-            {{ ' ' }}
-          </label>
-          <Select
-            id="palette-selector"
-            v-model="selectedPaletteId"
-            class="list-select"
-            size="4"
-          >
-            <option
-              v-for="(p, index) in palettes"
-              :key="p.name"
-              :value="index"
-            >
-              {{ p.name }}
-            </option>
-          </Select>
-          <SelectMotion
-            class="list-select-movement"
-            v-model="palettes"
-            :get-add-value="getNewPalette"
-            :selected-id="selectedPaletteId"
-            @update:selectedId="e => selectedPaletteId = e"
-          />
+            {{ p.name }}
+          </option>
+        </Select>
+        <SelectMotion
+          class="list-select-movement"
+          v-model="palettes"
+          :get-add-value="getNewPalette"
+          :selected-id="selectedPaletteId"
+          @update:selectedId="e => selectedPaletteId = e"
+        />
         <PaletteEditor
           class="list-edit-area"
           v-model="selectedPalette"
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index 06381b1b3..344f2e600 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -112,7 +112,7 @@
 
   .shadow-preview {
     grid-area: preview;
-    min-width: 10em;
+    min-width: 25em;
     margin-left: 0.125em;
     align-self: start;
     justify-self: center;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 088506edf..46154b64c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -799,6 +799,7 @@
           "link_color": "Link color",
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
+          "refresh_preview": "Refresh preview",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",

From 54c740c2525368ac5bbd8162c45555d6e2443955 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2024 22:25:55 +0300
Subject: [PATCH 03/12] layout

---
 src/components/select/select.vue               |  1 +
 .../settings_modal/tabs/style_tab/style_tab.js | 11 +++++++++--
 .../tabs/style_tab/style_tab.scss              | 18 +++++++++++-------
 .../tabs/style_tab/style_tab.vue               |  7 +++++++
 .../shadow_control/shadow_control.scss         |  2 --
 src/i18n/en.json                               |  1 +
 6 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 0fb6fcc0e..2214959f6 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -49,6 +49,7 @@ label.Select {
       option {
         background-color: transparent;
 
+        &:checked,
         &.-active {
           color: var(--selectionText);
           background-color: var(--selectionBackground);
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 b6fc841db..6c1ef28a0 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -33,7 +33,13 @@ import {
 } from 'src/services/export_import/export_import.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+import {
+  faFloppyDisk,
+  faFolderOpen,
+  faFile,
+  faArrowsRotate,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
 
 // helper for debugging
 // eslint-disable-next-line no-unused-vars
@@ -46,7 +52,8 @@ library.add(
   faFile,
   faFloppyDisk,
   faFolderOpen,
-  faArrowsRotate
+  faArrowsRotate,
+  faCheck
 )
 
 export default {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 3d33d35ec..33b00ec69 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -66,14 +66,14 @@
     &.heading {
       display: grid;
       grid-template:
-        "meta meta preview"
-        "meta meta preview"
-        "meta meta preview"
-        "meta meta preview"
-        "new  new  preview"
-        "load save refresh";
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "new  new  preview preview"
+        "load save refresh apply";
       grid-gap: 0.5em;
-      grid-template-columns: min-content min-content 6fr;
+      grid-template-columns: min-content min-content 6fr max-content;
       grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
       ul.setting-list {
@@ -116,6 +116,10 @@
       .button-refresh {
         grid-area: refresh;
       }
+
+      .button-apply {
+        grid-area: apply;
+      }
     }
   }
 
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 309202928..b934fa447 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -39,6 +39,13 @@
         <FAIcon icon="arrows-rotate" />
         {{ $t('settings.style.themes3.editor.refresh_preview') }}
       </button>
+      <button
+        class="btn button-default button-apply"
+        @click="applyTheme"
+      >
+        <FAIcon icon="check" />
+        {{ $t('settings.style.themes3.editor.apply_preview') }}
+      </button>
       <ul class="setting-list style-metadata">
         <li>
           <StringSetting class="meta-field" v-model="name">
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index 344f2e600..7e998cdf7 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -5,8 +5,6 @@
   grid-template-areas: "selector preview tweak";
   grid-gap: 0.5em;
   justify-content: stretch;
-  margin-bottom: 1em;
-  width: 100%;
 
   &.-compact {
     grid-template-columns: 10em 1fr;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 46154b64c..bf597fb2a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -800,6 +800,7 @@
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
           "refresh_preview": "Refresh preview",
+          "apply_preview": "Apply",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",

From 5a2080570f5ff82ec4fcaac54752f8d04df21a80 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Oct 2024 09:59:37 +0300
Subject: [PATCH 04/12] variables work + i18n cleanup

---
 .../tabs/style_tab/style_tab.js               | 46 +++++++++++++++++--
 .../tabs/style_tab/style_tab.vue              | 29 ++++++++----
 src/i18n/en.json                              | 16 ++++---
 src/services/theme_data/iss_serializer.js     |  2 +-
 4 files changed, 73 insertions(+), 20 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 6c1ef28a0..4df1c1a98 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -20,7 +20,7 @@ import {
   getCssRules,
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
-import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
 import {
   // rgb2hex,
@@ -537,7 +537,33 @@ export default {
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
     const selectedVirtualDirectiveId = ref(0)
-    const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+    const selectedVirtualDirective = computed({
+      get () {
+        return virtualDirectives[selectedVirtualDirectiveId.value]
+      },
+      set (value) {
+        console.log('SET', value)
+        virtualDirectives[selectedVirtualDirectiveId.value].value = value
+      }
+    })
+    const selectedVirtualDirectiveValType = computed({
+      get () {
+        return virtualDirectives[selectedVirtualDirectiveId.value].valType
+      },
+      set (value) {
+        virtualDirectives[selectedVirtualDirectiveId.value].valType = value
+        switch (value) {
+          case 'shadow':
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
+            break
+          case 'color':
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
+            break
+          default:
+            virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
+        }
+      }
+    })
     const selectedVirtualDirectiveParsed = computed({
       get () {
         switch (selectedVirtualDirective.value.valType) {
@@ -550,8 +576,21 @@ export default {
               return normalizeShadows(splitShadow)
             }
           }
+          case 'color':
+            console.log('COLOR', selectedVirtualDirective.value.value)
+            return selectedVirtualDirective.value.value
           default:
-            return null
+            return selectedVirtualDirective.value.value
+        }
+      },
+      set (value) {
+        switch (selectedVirtualDirective.value.valType) {
+          case 'shadow': {
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
+            break
+          }
+          default:
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value
         }
       }
     })
@@ -684,6 +723,7 @@ export default {
       selectedVirtualDirective,
       selectedVirtualDirectiveId,
       selectedVirtualDirectiveParsed,
+      selectedVirtualDirectiveValType,
       getNewDirective,
 
       // ## Export and Import
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 b934fa447..971dd7e77 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -321,7 +321,7 @@
           class="list-select-label"
           for="variables-selector"
         >
-          {{ $t('settings.style.themes3.variables.label') }}
+          {{ $t('settings.style.themes3.editor.variables.label') }}
           {{ ' ' }}
         </label>
         <Select
@@ -351,7 +351,7 @@
               class="variable-name-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.variables.name_label') }}
+              {{ $t('settings.style.themes3.editor.variables.name_label') }}
               {{ ' ' }}
             </label>
             <input
@@ -362,25 +362,34 @@
               class="variable-type-label"
               for="variables-selector"
             >
-              {{ $t('settings.style.themes3.variables.type_label') }}
+              {{ $t('settings.style.themes3.editor.variables.type_label') }}
               {{ ' ' }}
             </label>
             <Select
-              v-model="selectedVirtualDirective.valType"
+              v-model="selectedVirtualDirectiveValType"
             >
               <option value='shadow'>
-              {{ $t('settings.style.themes3.variables.type_label') }}
-                shadow</option>
-              <option value='shadow'>color</option>
-              <option value='shadow'>generic</option>
+                {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+              </option>
+              <option value='color'>
+                {{ $t('settings.style.themes3.editor.variables.type_color') }}
+              </option>
+              <option value='generic'>
+                {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+              </option>
             </Select>
           </div>
           <ShadowControl
-            v-if="selectedVirtualDirective.valType === 'shadow'"
+            v-if="selectedVirtualDirectiveValType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
             :compact="true"
           />
-          </div>
+          <ColorInput
+            v-if="selectedVirtualDirectiveValType === 'color'"
+            v-model="selectedVirtualDirectiveParsed"
+            :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+          />
+        </div>
       </div>
     </tab-switcher>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bf597fb2a..c2db1339c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -774,11 +774,6 @@
           "extra3": "Extra 3",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
-        "variables": {
-          "label": "Variables",
-          "name_label": "Name:",
-          "type_label": "Type:"
-        },
         "editor": {
           "title": "Style",
           "new_style": "New",
@@ -809,7 +804,16 @@
           },
           "component_tab": "Components style",
           "palette_tab": "Color presets",
-          "variables_tab": "Variables (Advanced)"
+          "variables_tab": "Variables (Advanced)",
+          "variables": {
+            "label": "Variables",
+            "name_label": "Name:",
+            "type_label": "Type:",
+            "type_shadow": "Shadow",
+            "type_color": "Color",
+            "type_generic": "Generic",
+            "virtual_color": "Variable color value"
+          },
         },
         "hacks": {
           "underlay_overrides": "Change underlay",
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 8b7cf5d88..83c8483ea 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,6 +1,6 @@
 import { unroll } from './iss_utils.js'
 
-const serializeShadow = s => {
+export const serializeShadow = s => {
   if (typeof s === 'object') {
     return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {

From 78e4f0ecd877c289ba1ca71142743e38864b968c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Oct 2024 23:53:30 +0300
Subject: [PATCH 05/12] fix setting components not working with v-model

---
 src/components/settings_modal/helpers/setting.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 6c5dd76e3..2dc9653ea 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -170,7 +170,7 @@ export default {
     },
     configSink () {
       if (this.path == null) {
-        return (k, v) => this.$emit('modelValue:update', v)
+        return (k, v) => this.$emit('update:modelValue', v)
       }
       switch (this.realSource) {
         case 'profile':

From 202d77e0ccc1e14a68ba9f90a0ec17080dfad0dd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Oct 2024 23:54:34 +0300
Subject: [PATCH 06/12] Import/export works!

---
 .../tabs/style_tab/style_tab.js               | 116 ++++++++++++------
 src/services/export_import/export_import.js   |   3 +-
 2 files changed, 79 insertions(+), 40 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 4df1c1a98..394c2f0a9 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -21,14 +21,14 @@ import {
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
 import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
-import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
+import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import {
   // rgb2hex,
   hex2rgb,
   getContrastRatio
 } from 'src/services/color_convert/color_convert.js'
 import {
-  // newImporter,
+  newImporter,
   newExporter
 } from 'src/services/export_import/export_import.js'
 
@@ -195,47 +195,53 @@ export default {
     // The native structure of separate rules and the child -> parent
     // relation isn't very convenient for editor, we replace the array
     // and child -> parent structure with map and parent -> child structure
+    const rulesToEditorFriendly = (rules, root = {}) => rules.reduce((acc, rule) => {
+      const { parent: rParent, component: rComponent } = rule
+      const parent = rParent ?? rule
+      const hasChildren = !!rParent
+      const child = hasChildren ? rule : null
+
+      const {
+        component: pComponent,
+        variant: pVariant = 'normal',
+        state: pState = [] // no relation to Intel CPUs whatsoever
+      } = parent
+
+      const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`
+
+      let output = get(acc, pPath)
+      if (!output) {
+        set(acc, pPath, {})
+        output = get(acc, pPath)
+      }
+
+      if (hasChildren) {
+        acc._children = acc._children ?? {}
+        const {
+          component: cComponent,
+          variant: cVariant = 'normal',
+          state: cState = [],
+          directives
+        } = child
+
+        const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
+        set(output._children, cPath, directives)
+      } else {
+        output.directives = parent.directives
+      }
+      return acc
+    }, root)
+
     const editorFriendlyFallbackStructure = computed(() => {
       const root = {}
 
       componentKeys.forEach((componentKey) => {
         const componentValue = componentsMap.get(componentKey)
-        const { defaultRules } = componentValue
-        defaultRules.forEach((rule) => {
-          const { parent: rParent } = rule
-          const parent = rParent ?? rule
-          const hasChildren = !!rParent
-          const child = hasChildren ? rule : null
-
-          const {
-            component: pComponent,
-            variant: pVariant = 'normal',
-            state: pState = [] // no relation to Intel CPUs whatsoever
-          } = parent
-
-          const pPath = `${hasChildren ? pComponent : componentValue.name}.${pVariant}.${normalizeStates(pState)}`
-
-          let output = get(root, pPath)
-          if (!output) {
-            set(root, pPath, {})
-            output = get(root, pPath)
-          }
-
-          if (hasChildren) {
-            output._children = output._children ?? {}
-            const {
-              component: cComponent,
-              variant: cVariant = 'normal',
-              state: cState = [],
-              directives
-            } = child
-
-            const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
-            set(output._children, cPath, directives)
-          } else {
-            output.directives = parent.directives
-          }
-        })
+        const { defaultRules, name } = componentValue
+        rulesToEditorFriendly(
+          defaultRules.map((rule) => ({ ...rule, component: name })),
+          root
+        )
       })
 
       return root
@@ -642,6 +648,32 @@ export default {
       extension: 'piss',
       getExportedObject: () => exportStyleData.value
     })
+
+    const styleImporter = newImporter({
+      accept: '.piss',
+      parser: (string) => deserialize(string),
+      onImport (parsed, filename) {
+        const editorComponents = parsed.filter(x => x.component.startsWith('@'))
+        const rules = parsed.filter(x => !x.component.startsWith('@'))
+        const metaIn = editorComponents.find(x => x.component === '@meta').directives
+        const palettesIn = editorComponents.filter(x => x.component === '@palette').directives
+
+        name.value = metaIn.name
+        license.value = metaIn.license
+        author.value = metaIn.author
+        website.value = metaIn.website
+
+        Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
+
+        rules.forEach(rule => {
+          rulesToEditorFriendly(
+            [rule],
+            allEditedRules
+          )
+        })
+      }
+    })
+
     const exportStyleData = computed(() => {
       return [
         metaOut.value,
@@ -649,10 +681,15 @@ export default {
         serialize(editorFriendlyToOriginal.value)
       ].join('\n\n')
     })
+
     const exportStyle = () => {
       styleExporter.exportData()
     }
 
+    const importStyle = () => {
+      styleImporter.importData()
+    }
+
     return {
       // ## Meta
       name,
@@ -727,7 +764,8 @@ export default {
       getNewDirective,
 
       // ## Export and Import
-      exportStyle
+      exportStyle,
+      importStyle
     }
   }
 }
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
index b8f84351b..397d35a9a 100644
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@@ -28,6 +28,7 @@ export const newExporter = ({
 
 export const newImporter = ({
   accept = '.json',
+  parser = (string) => JSON.parse(string),
   onImport,
   onImportFailure,
   validator = () => true
@@ -44,7 +45,7 @@ export const newImporter = ({
         const reader = new FileReader()
         reader.onload = ({ target }) => {
           try {
-            const parsed = JSON.parse(target.result)
+            const parsed = parser(target.result)
             const validationResult = validator(parsed, filename)
             if (validationResult === true) {
               onImport(parsed, filename)

From 0afe69ce28d48c201f21932d11fb763da5e7ec56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Oct 2024 00:54:53 +0300
Subject: [PATCH 07/12] palette importer/exporter

---
 .../palette_editor/palette_editor.vue         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 16148262c..f4b3410ab 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -28,7 +28,7 @@
 <script setup>
 import ColorInput from 'src/components/color_input/color_input.vue'
 import {
-  // newImporter,
+  newImporter,
   newExporter
 } from 'src/services/export_import/export_import.js'
 
@@ -46,23 +46,23 @@ library.add(
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
-  filename: 'pleroma.palette.json',
+  filename: 'pleroma',
+  extension: 'palette.json',
   getExportedObject: () => props.modelValue
 })
-/*
-   const themeImporter = newImporter({
-     validator: importValidator,
-     onImport,
-     onImportFailure,
-   })
-*/
+const paletteImporter = newImporter({
+  accept: '.palette.json',
+  onImport (parsed, filename) {
+    emit('update:modelValue', parsed)
+  }
+})
 
 const exportPalette = () => {
   paletteExporter.exportData()
 }
 
 const importPalette = () => {
-  // TODO
+  paletteImporter.importData()
 }
 
 const paletteKeys = [

From eeb2dbcb604e269257b42d0bfa6c759730d42478 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 17:22:33 +0300
Subject: [PATCH 08/12] fix SelectMotion not working properly on
 palettes/vDirectives

---
 .../tabs/style_tab/style_tab.js               | 29 +++++++++++++++++--
 .../tabs/style_tab/style_tab.scss             |  7 +++++
 .../tabs/style_tab/style_tab.vue              | 26 ++++++++++++-----
 src/i18n/en.json                              |  5 ++--
 4 files changed, 54 insertions(+), 13 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 394c2f0a9..35b214188 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -121,9 +121,22 @@ export default {
         border: '#d8e6f9'
       }
     ])
+
+    // This is kinda dumb but you cannot "replace" reactive() object
+    // and so v-model simply fails when you try to chage (increase only?)
+    // length of the array. Since linter complains about mutating modelValue
+    // inside SelectMotion, the next best thing is to just wipe existing array
+    // and replace it with new one.
+
+    const onPalettesUpdate = (e) => {
+      palettes.splice(0, palettes.length)
+      palettes.push(...e)
+    }
+
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
       get () {
+        console.log(palettes, toValue(palettes))
         return palettes[selectedPaletteId.value]
       },
       set (newPalette) {
@@ -542,6 +555,12 @@ export default {
         }
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
+
+    const onVirtualDirectivesUpdate = (e) => {
+      virtualDirectives.splice(0, virtualDirectives.length)
+      virtualDirectives.push(...e)
+    }
+
     const selectedVirtualDirectiveId = ref(0)
     const selectedVirtualDirective = computed({
       get () {
@@ -601,7 +620,7 @@ export default {
       }
     })
 
-    const getNewDirective = () => ({
+    const getNewVirtualDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
       value: 'foobar'
@@ -656,13 +675,15 @@ export default {
         const editorComponents = parsed.filter(x => x.component.startsWith('@'))
         const rules = parsed.filter(x => !x.component.startsWith('@'))
         const metaIn = editorComponents.find(x => x.component === '@meta').directives
-        const palettesIn = editorComponents.filter(x => x.component === '@palette').directives
+        const palettesIn = editorComponents.filter(x => x.component === '@palette')
 
         name.value = metaIn.name
         license.value = metaIn.license
         author.value = metaIn.author
         website.value = metaIn.website
 
+        console.log('PALETTES', palettesIn)
+
         Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
 
         rules.forEach(rule => {
@@ -699,6 +720,7 @@ export default {
 
       // ## Palette
       palettes,
+      onPalettesUpdate,
       selectedPalette,
       selectedPaletteId,
       getNewPalette,
@@ -757,11 +779,12 @@ export default {
 
       // ## Variables
       virtualDirectives,
+      onVirtualDirectivesUpdate,
       selectedVirtualDirective,
       selectedVirtualDirectiveId,
       selectedVirtualDirectiveParsed,
       selectedVirtualDirectiveValType,
-      getNewDirective,
+      getNewVirtualDirective,
 
       // ## Export and Import
       exportStyle,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 33b00ec69..1f63e9c6b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -159,7 +159,14 @@
     width: min-content;
 
     .list-edit-area {
+      display: grid;
       align-self: baseline;
+      grid-template-rows: subgrid;
+      grid-template-columns: 1fr;
+    }
+
+    .palette-editor-single {
+      grid-row: 2 / span 2;
     }
   }
 
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 971dd7e77..d6a752a47 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -302,15 +302,24 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          v-model="palettes"
-          :get-add-value="getNewPalette"
+          :modelValue="palettes"
+          @update:modelValue="onPalettesUpdate"
           :selected-id="selectedPaletteId"
+          :get-add-value="getNewPalette"
           @update:selectedId="e => selectedPaletteId = e"
         />
-        <PaletteEditor
-          class="list-edit-area"
-          v-model="selectedPalette"
-        />
+        <div class="list-edit-area">
+          <StringSetting
+            class="palette-name-input"
+            v-model="selectedPalette.name"
+          >
+            {{ $t('settings.style.themes3.palette.name_label') }}
+          </StringSetting>
+          <PaletteEditor
+            class="palette-editor-single"
+            v-model="selectedPalette"
+          />
+        </div>
       </div>
       <div
         key="variables"
@@ -328,7 +337,7 @@
           id="variables-selector"
           v-model="selectedVirtualDirectiveId"
           class="list-select"
-          size="9"
+          size="20"
         >
           <option
             v-for="(p, index) in virtualDirectives"
@@ -340,7 +349,8 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          v-model="virtualDirectives"
+          :modelValue="virtualDirectives"
+          @update:modelValue="onVirtualDirectivesUpdate"
           :selected-id="selectedVirtualDirectiveId"
           :get-add-value="getNewVirtualDirective"
           @update:selectedId="e => selectedVirtualDirectiveId = e"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c2db1339c..d993b5495 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -757,7 +757,8 @@
       "themes3": {
         "define": "Override",
         "palette": {
-          "label": "Palettes",
+          "label": "Color schemes",
+          "name_label": "Color scheme name",
           "import": "Import",
           "export": "Export",
           "bg": "Panel background",
@@ -803,7 +804,7 @@
             "no-auto": "Disabled"
           },
           "component_tab": "Components style",
-          "palette_tab": "Color presets",
+          "palette_tab": "Color schemes",
           "variables_tab": "Variables (Advanced)",
           "variables": {
             "label": "Variables",

From 1ec1ba8d3ec762c838cc06e31fd5923451bd19b0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 20:48:46 +0300
Subject: [PATCH 09/12] proper color fallbacks

---
 src/components/color_input/color_input.vue    |  2 +-
 .../tabs/style_tab/style_tab.js               | 24 +++++++++++++++----
 .../tabs/style_tab/style_tab.vue              | 18 ++++++++++++++
 .../theme_data/theme_data_3.service.js        |  2 +-
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 31dfa23ef..a09325a80 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -130,7 +130,7 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
     }
   },
   methods: {
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 35b214188..da0897de4 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -15,7 +15,7 @@ import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import Preview from '../theme_tab/theme_preview.vue'
 
-import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
 import {
   getCssRules,
   getScopedVersion
@@ -23,7 +23,7 @@ import {
 import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import {
-  // rgb2hex,
+  rgb2hex,
   hex2rgb,
   getContrastRatio
 } from 'src/services/color_convert/color_convert.js'
@@ -73,6 +73,7 @@ export default {
     Preview
   },
   setup () {
+    const exports = {}
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
@@ -136,7 +137,6 @@ export default {
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
       get () {
-        console.log(palettes, toValue(palettes))
         return palettes[selectedPaletteId.value]
       },
       set (newPalette) {
@@ -327,6 +327,8 @@ export default {
     const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
     const editedIconColor = getEditedElement('Icon', 'textColor')
     const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
+    const editedBorderColor = getEditedElement('Border', 'textColor')
+    const isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
     // TODO this is VERY primitive right now, need to make it
     // support variables, fallbacks etc.
     const getContrast = (bg, text) => {
@@ -353,7 +355,6 @@ export default {
     }
 
     const normalizeShadows = (shadows) => {
-      console.log('NORMALIZE')
       return shadows?.map(shadow => {
         if (typeof shadow === 'object') {
           return shadow
@@ -626,6 +627,14 @@ export default {
       value: 'foobar'
     })
 
+    exports.computeColor = (color) => {
+      const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
+      if (computedColor) {
+        return rgb2hex(computedColor)
+      }
+      return null
+    }
+
     const overallPreviewRules = ref()
     const updateOverallPreview = () => {
       try {
@@ -682,6 +691,7 @@ export default {
         author.value = metaIn.author
         website.value = metaIn.website
 
+        onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
         console.log('PALETTES', palettesIn)
 
         Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
@@ -757,6 +767,8 @@ export default {
       isLinkColorPresent,
       editedIconColor,
       isIconColorPresent,
+      editedBorderColor,
+      isBorderColorPresent,
       getContrast,
 
       // component shadow
@@ -788,7 +800,9 @@ export default {
 
       // ## Export and Import
       exportStyle,
-      importStyle
+      importStyle,
+
+      ...exports
     }
   }
 }
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 d6a752a47..c0d8248ce 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -165,6 +165,7 @@
           >
             <ColorInput
               v-model="editedBackgroundColor"
+              :fallback="computeColor(editedBackgroundColor)"
               :disabled="!isBackgroundColorPresent"
               :label="$t('settings.style.themes3.editor.background')"
             />
@@ -182,6 +183,7 @@
             <ColorInput
               v-if="componentHas('Text')"
               v-model="editedTextColor"
+              :fallback="computeColor(editedTextColor)"
               :label="$t('settings.style.themes3.editor.text_color')"
               :disabled="!isTextColorPresent"
             />
@@ -230,6 +232,7 @@
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
+              :fallback="computeColor(editedLinkColor)"
               :label="$t('settings.style.themes3.editor.link_color')"
               :disabled="!isLinkColorPresent"
             />
@@ -242,6 +245,7 @@
             <ColorInput
               v-if="componentHas('Icon')"
               v-model="editedIconColor"
+              :fallback="computeColor(editedIconColor)"
               :label="$t('settings.style.themes3.editor.icon_color')"
               :disabled="!isIconColorPresent"
             />
@@ -251,6 +255,19 @@
             >
               <Checkbox v-model="isIconColorPresent" />
             </Tooltip>
+            <ColorInput
+              v-if="componentHas('Border')"
+              v-model="editedBorderColor"
+              :fallback="computeColor(editedBorderColor)"
+              :label="$t('settings.style.themes3.editor.Border_color')"
+              :disabled="!isBorderColorPresent"
+            />
+            <Tooltip
+              v-if="componentHas('Border')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isBorderColorPresent" />
+            </Tooltip>
           </div>
           <div
             key="shadow"
@@ -397,6 +414,7 @@
           <ColorInput
             v-if="selectedVirtualDirectiveValType === 'color'"
             v-model="selectedVirtualDirectiveParsed"
+            :fallback="computeColor(selectedVirtualDirectiveParsed)"
             :label="$t('settings.style.themes3.editor.variables.virtual_color')"
           />
         </div>
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index e45d2cefd..aaa253283 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -62,7 +62,7 @@ const findShadow = (shadows, { dynamicVars, staticVars }) => {
   })
 }
 
-const findColor = (color, { dynamicVars, staticVars }) => {
+export const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {

From 14fdd34964723fcae499e02918b8a5b6f1549ea6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 21:11:29 +0300
Subject: [PATCH 10/12] Use a bit saner way of exporting from setup() into
 template

---
 .../tabs/style_tab/style_tab.js               | 200 ++++++------------
 1 file changed, 68 insertions(+), 132 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 da0897de4..e66672369 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -78,18 +78,18 @@ export default {
     const allEditedRules = reactive({})
 
     // ## Meta stuff
-    const name = ref('')
-    const author = ref('')
-    const license = ref('')
-    const website = ref('')
+    exports.name = ref('')
+    exports.author = ref('')
+    exports.license = ref('')
+    exports.website = ref('')
 
     const metaOut = computed(() => {
       return [
         '@meta {',
-        `  name: ${name.value};`,
-        `  author: ${author.value};`,
-        `  license: ${license.value};`,
-        `  website: ${website.value};`,
+        `  name: ${exports.name.value};`,
+        `  author: ${exports.author.value};`,
+        `  license: ${exports.license.value};`,
+        `  website: ${exports.website.value};`,
         '}'
       ].join('\n')
     })
@@ -122,6 +122,7 @@ export default {
         border: '#d8e6f9'
       }
     ])
+    exports.palettes = palettes
 
     // This is kinda dumb but you cannot "replace" reactive() object
     // and so v-model simply fails when you try to chage (increase only?)
@@ -133,6 +134,7 @@ export default {
       palettes.splice(0, palettes.length)
       palettes.push(...e)
     }
+    exports.onPalettesUpdate = onPalettesUpdate
 
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
@@ -143,7 +145,10 @@ export default {
         palettes[selectedPaletteId.value] = newPalette
       }
     })
-    const getNewPalette = () => ({
+    exports.selectedPaletteId = selectedPaletteId
+    exports.selectedPalette = selectedPalette
+
+    exports.getNewPalette = () => ({
       name: 'new palette',
       bg: '#121a24',
       fg: '#182230',
@@ -177,26 +182,31 @@ export default {
           key => [key, componentsContext(key).default]
         ).filter(([key, component]) => !component.virtual && !component.notEditable)
     )
+    exports.componentsMap = componentsMap
     const componentKeys = [...componentsMap.keys()]
+    exports.componentKeys = componentKeys
 
     // selection basis
     const selectedComponentKey = ref(componentsMap.keys().next().value)
+    exports.selectedComponentKey = selectedComponentKey
     const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
     const selectedComponentName = computed(() => selectedComponent.value.name)
-    const selectedComponentVariants = computed(() => {
+    exports.selectedComponentVariants = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
     })
     const selectedComponentStatesAll = computed(() => {
       return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
     })
-    const selectedComponentStates = computed(() => {
+    exports.selectedComponentStates = computed(() => {
       return selectedComponentStatesAll.value.filter(x => x !== 'normal')
     })
 
     // selection
     const selectedVariant = ref('normal')
+    exports.selectedVariant = selectedVariant
     const selectedState = reactive(new Set())
-    const updateSelectedStates = (state, v) => {
+    exports.selectedState = selectedState
+    exports.updateSelectedStates = (state, v) => {
       if (v) {
         selectedState.add(state)
       } else {
@@ -262,7 +272,7 @@ export default {
 
     // Checkging whether component can support some "directives" which
     // are actually virtual subcomponents, i.e. Text, Link etc
-    const componentHas = (subComponent) => {
+    exports.componentHas = (subComponent) => {
       return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
     }
 
@@ -315,23 +325,24 @@ export default {
     })
 
     // All the editable stuff for the component
-    const editedBackgroundColor = getEditedElement(null, 'background')
-    const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
-    const editedOpacity = getEditedElement(null, 'opacity')
-    const isOpacityPresent = isElementPresent(null, 'opacity', 1)
-    const editedTextColor = getEditedElement('Text', 'textColor')
-    const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
-    const editedTextAuto = getEditedElement('Text', 'textAuto')
-    const isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
-    const editedLinkColor = getEditedElement('Link', 'textColor')
-    const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
-    const editedIconColor = getEditedElement('Icon', 'textColor')
-    const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
-    const editedBorderColor = getEditedElement('Border', 'textColor')
-    const isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
+    exports.editedBackgroundColor = getEditedElement(null, 'background')
+    exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
+    exports.editedOpacity = getEditedElement(null, 'opacity')
+    exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    exports.editedTextColor = getEditedElement('Text', 'textColor')
+    exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
+    exports.editedTextAuto = getEditedElement('Text', 'textAuto')
+    exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
+    exports.editedLinkColor = getEditedElement('Link', 'textColor')
+    exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
+    exports.editedIconColor = getEditedElement('Icon', 'textColor')
+    exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
+    exports.editedBorderColor = getEditedElement('Border', 'textColor')
+    exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
+
     // TODO this is VERY primitive right now, need to make it
     // support variables, fallbacks etc.
-    const getContrast = (bg, text) => {
+    exports.getContrast = (bg, text) => {
       try {
         const bgRgb = hex2rgb(bg)
         const textRgb = hex2rgb(text)
@@ -369,20 +380,23 @@ export default {
     // Shadow is partially edited outside the ShadowControl
     // for better space utilization
     const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
+    exports.editedShadow = editedShadow
     const editedSubShadowId = ref(null)
+    exports.editedSubShadowId = editedSubShadowId
     const editedSubShadow = computed(() => {
       if (editedShadow.value == null || editedSubShadowId.value == null) return null
       return editedShadow.value[editedSubShadowId.value]
     })
-    const isShadowPresent = isElementPresent(null, 'shadow', [])
-    const onSubShadow = (id) => {
+    exports.editedSubShadow = editedSubShadow
+    exports.isShadowPresent = isElementPresent(null, 'shadow', [])
+    exports.onSubShadow = (id) => {
       if (id != null) {
         editedSubShadowId.value = id
       } else {
         editedSubShadow.value = null
       }
     }
-    const updateSubShadow = (axis, value) => {
+    exports.updateSubShadow = (axis, value) => {
       if (!editedSubShadow.value || editedSubShadowId.value == null) return
       const newEditedShadow = [...editedShadow.value]
 
@@ -393,13 +407,13 @@ export default {
 
       editedShadow.value = newEditedShadow
     }
-    const isShadowTabOpen = ref(false)
-    const onTabSwitch = (tab) => {
-      isShadowTabOpen.value = tab === 'shadow'
+    exports.isShadowTabOpen = ref(false)
+    exports.onTabSwitch = (tab) => {
+      exports.isShadowTabOpen.value = tab === 'shadow'
     }
 
     // component preview
-    const editorHintStyle = computed(() => {
+    exports.editorHintStyle = computed(() => {
       const editorHint = selectedComponent.value.editor
       const styles = []
       if (editorHint && Object.keys(editorHint).length > 0) {
@@ -422,7 +436,7 @@ export default {
       .replace(':focus', '.preview-focus')
       .replace(':focus-within', '.preview-focus-within')
       .replace(':disabled', '.preview-disabled')
-    const previewClass = computed(() => {
+    exports.previewClass = computed(() => {
       const selectors = []
       if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
         selectors.push(selectedComponent.value.variants[selectedVariant.value])
@@ -436,7 +450,8 @@ export default {
       return selectors.map(x => x.substring(1)).join('')
     })
     const previewRules = reactive([])
-    const previewCss = computed(() => {
+    exports.previewRules = previewRules
+    exports.previewCss = computed(() => {
       try {
         const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
         return scoped.join('\n')
@@ -556,23 +571,25 @@ export default {
         }
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
+    exports.virtualDirectives = virtualDirectives
 
-    const onVirtualDirectivesUpdate = (e) => {
+    exports.onVirtualDirectivesUpdate = (e) => {
       virtualDirectives.splice(0, virtualDirectives.length)
       virtualDirectives.push(...e)
     }
 
     const selectedVirtualDirectiveId = ref(0)
+    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
     const selectedVirtualDirective = computed({
       get () {
         return virtualDirectives[selectedVirtualDirectiveId.value]
       },
       set (value) {
-        console.log('SET', value)
         virtualDirectives[selectedVirtualDirectiveId.value].value = value
       }
     })
-    const selectedVirtualDirectiveValType = computed({
+    exports.selectedVirtualDirective = selectedVirtualDirective
+    exports.selectedVirtualDirectiveValType = computed({
       get () {
         return virtualDirectives[selectedVirtualDirectiveId.value].valType
       },
@@ -590,7 +607,7 @@ export default {
         }
       }
     })
-    const selectedVirtualDirectiveParsed = computed({
+    exports.selectedVirtualDirectiveParsed = computed({
       get () {
         switch (selectedVirtualDirective.value.valType) {
           case 'shadow': {
@@ -621,7 +638,7 @@ export default {
       }
     })
 
-    const getNewVirtualDirective = () => ({
+    exports.getNewVirtualDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
       value: 'foobar'
@@ -636,7 +653,8 @@ export default {
     }
 
     const overallPreviewRules = ref()
-    const updateOverallPreview = () => {
+    exports.overallPreviewRules = overallPreviewRules
+    exports.updateOverallPreview = () => {
       try {
         // This normally would be handled by Root but since we pass something
         // else we have to make do ourselves
@@ -686,10 +704,10 @@ export default {
         const metaIn = editorComponents.find(x => x.component === '@meta').directives
         const palettesIn = editorComponents.filter(x => x.component === '@palette')
 
-        name.value = metaIn.name
-        license.value = metaIn.license
-        author.value = metaIn.author
-        website.value = metaIn.website
+        exports.name.value = metaIn.name
+        exports.license.value = metaIn.license
+        exports.author.value = metaIn.author
+        exports.website.value = metaIn.website
 
         onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
         console.log('PALETTES', palettesIn)
@@ -713,96 +731,14 @@ export default {
       ].join('\n\n')
     })
 
-    const exportStyle = () => {
+    exports.exportStyle = () => {
       styleExporter.exportData()
     }
 
-    const importStyle = () => {
+    exports.importStyle = () => {
       styleImporter.importData()
     }
 
-    return {
-      // ## Meta
-      name,
-      author,
-      license,
-      website,
-
-      // ## Palette
-      palettes,
-      onPalettesUpdate,
-      selectedPalette,
-      selectedPaletteId,
-      getNewPalette,
-
-      // ## Components
-      componentKeys,
-      componentsMap,
-
-      // selection basis
-      selectedComponent,
-      selectedComponentName,
-      selectedComponentKey,
-      selectedComponentVariants,
-      selectedComponentStates,
-
-      // selection
-      selectedVariant,
-      selectedState,
-      updateSelectedStates,
-
-      // component directives
-      componentHas,
-
-      // component colors
-      editedBackgroundColor,
-      isBackgroundColorPresent,
-      editedOpacity,
-      isOpacityPresent,
-      editedTextColor,
-      isTextColorPresent,
-      editedTextAuto,
-      isTextAutoPresent,
-      editedLinkColor,
-      isLinkColorPresent,
-      editedIconColor,
-      isIconColorPresent,
-      editedBorderColor,
-      isBorderColorPresent,
-      getContrast,
-
-      // component shadow
-      editedShadow,
-      editedSubShadow,
-      isShadowPresent,
-      onSubShadow,
-      updateSubShadow,
-      isShadowTabOpen,
-      onTabSwitch,
-
-      // component preview
-      editorHintStyle,
-      previewCss,
-      previewClass,
-
-      // overall preview
-      overallPreviewRules,
-      updateOverallPreview,
-
-      // ## Variables
-      virtualDirectives,
-      onVirtualDirectivesUpdate,
-      selectedVirtualDirective,
-      selectedVirtualDirectiveId,
-      selectedVirtualDirectiveParsed,
-      selectedVirtualDirectiveValType,
-      getNewVirtualDirective,
-
-      // ## Export and Import
-      exportStyle,
-      importStyle,
-
-      ...exports
-    }
+    return exports
   }
 }

From 1a38e0273ee68dc8fe2f46d8b35b7a2d26d36ea7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 21:21:14 +0300
Subject: [PATCH 11/12] fix filename not applying

---
 src/components/settings_modal/tabs/style_tab/style_tab.js | 2 +-
 src/services/export_import/export_import.js               | 3 ++-
 2 files changed, 3 insertions(+), 2 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 e66672369..747649f7b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -689,7 +689,7 @@ export default {
 
     // ## Export and Import
     const styleExporter = newExporter({
-      filename: name.value || 'pleroma_theme',
+      filename: () => exports.name.value ?? 'pleroma_theme',
       mime: 'text/plain',
       extension: 'piss',
       getExportedObject: () => exportStyleData.value
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
index 397d35a9a..8865061fc 100644
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@@ -16,7 +16,8 @@ export const newExporter = ({
 
     // Create an invisible link with a data url and simulate a click
     const e = document.createElement('a')
-    e.setAttribute('download', `${filename}.${extension}`)
+    const realFilename = typeof filename === 'function' ? filename() : filename
+    e.setAttribute('download', `${realFilename}.${extension}`)
     e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
     e.style.display = 'none'
 

From 098c6af7ef11972b27dafc3ef98a6fd2684695cb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Oct 2024 01:26:29 +0300
Subject: [PATCH 12/12] pass computeColor into shadow control, fix shadow
 switching types due to invalid shadow color

---
 src/components/palette_editor/palette_editor.vue          | 6 +++---
 src/components/settings_modal/tabs/style_tab/style_tab.js | 1 -
 .../settings_modal/tabs/style_tab/style_tab.vue           | 1 +
 src/components/shadow_control/shadow_control.js           | 8 ++++++++
 src/components/shadow_control/shadow_control.vue          | 2 +-
 src/services/theme_data/iss_deserializer.js               | 6 +++++-
 src/services/theme_data/iss_serializer.js                 | 2 +-
 7 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index f4b3410ab..502f0ac8a 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -46,12 +46,12 @@ library.add(
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
-  filename: 'pleroma',
-  extension: 'palette.json',
+  filename: 'pleroma_palette',
+  extension: 'json',
   getExportedObject: () => props.modelValue
 })
 const paletteImporter = newImporter({
-  accept: '.palette.json',
+  accept: '.json',
   onImport (parsed, filename) {
     emit('update:modelValue', parsed)
   }
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 747649f7b..b82e72677 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -620,7 +620,6 @@ export default {
             }
           }
           case 'color':
-            console.log('COLOR', selectedVirtualDirective.value.value)
             return selectedVirtualDirective.value.value
           default:
             return selectedVirtualDirective.value.value
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 c0d8248ce..4d0663370 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -409,6 +409,7 @@
           <ShadowControl
             v-if="selectedVirtualDirectiveValType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
+            :computeColor="computeColor"
             :compact="true"
           />
           <ColorInput
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 03797fc53..0ffba1834 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -46,6 +46,7 @@ export default {
     'separateInset',
     'noPreview',
     'disabled',
+    'computeColor',
     'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
@@ -107,6 +108,13 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
+    getFallback () {
+      if (typeof this.computeColor === 'function' && this.selected?.color) {
+        return this.computeColor(this.selected.color)
+      } else {
+        return this.currentFallback?.color
+      }
+    },
     style () {
       try {
         if (this.separateInset) {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 4f0906c70..1bbdbe2f7 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -165,7 +165,7 @@
           :model-value="selected?.color"
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
-          :fallback="currentFallback?.color"
+          :fallback="getFallback"
           :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 3ac8826f2..cdde6b14b 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -21,7 +21,11 @@ export const parseShadow = string => {
   const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
   const result = regex.exec(string)
   if (result == null) {
-    return string
+    if (string.startsWith('$') || string.startsWith('--')) {
+      return string
+    } else {
+      throw new Error(`Invalid shadow definition: ${string}`)
+    }
   } else {
     const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
     const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 83c8483ea..e4df416e9 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,6 +1,6 @@
 import { unroll } from './iss_utils.js'
 
-export const serializeShadow = s => {
+export const serializeShadow = (s, throwOnInvalid) => {
   if (typeof s === 'object') {
     return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {