pass computeColor into shadow control, fix shadow switching types due to invalid shadow color

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)
   }

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

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

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) {

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)"

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) {
+    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) => {

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 {