multiple fixes to make style switcher not die. Made shadows work, incuding compatibility

src/components/style_switcher/style_switcher.js

@@ -11,7 +11,8 @@ import {
   generateRadii,
   generateFonts,
   composePreset,
-  getThemes
+  getThemes,
+  shadows2to3
 } from '../../services/style_setter/style_setter.js'
 import {
   CURRENT_VERSION,
@@ -159,6 +160,7 @@ export default {
     },
     // This needs optimization maybe
     previewContrast () {
+      try {
         if (!this.previewTheme.colors.bg) return {}
         const colors = this.previewTheme.colors
         const opacity = this.previewTheme.opacity
@@ -215,6 +217,9 @@ export default {
         }, {})
 
         return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+      } catch (e) {
+        console.warn('Failure computing contrasts', e)
+      }
     },
     previewRules () {
       if (!this.preview.rules) return ''
@@ -466,7 +471,11 @@ export default {
 
       if (!this.keepShadows) {
         this.clearShadows()
+        if (version === 2) {
+          this.shadowsLocal = shadows2to3(shadows)
+        } else {
           this.shadowsLocal = shadows
+        }
         this.shadowSelected = this.shadowsAvailable[0]
       }
 

src/services/style_setter/style_setter.js

@@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
     ...(input.shadows || {})
-  }).reduce((shadowsAcc, [slotName, shadowdefs]) => {
+  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const newShadow = shadowdefs.reduce((shadowAcc, def) => [
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
         ...def,
@@ -380,6 +380,25 @@ export const getThemes = () => {
     })
 }
 
+/**
+ * This handles compatibility issues when importing v2 theme's shadows to current format
+ *
+ * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
+ */
+export const shadows2to3 = (shadows) => {
+  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const isDynamic = ({ color }) => console.log(color) || color.startsWith('--')
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        alpha: isDynamic(def) ? 1 : def.alpha
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+}
+
 export const setPreset = (val, commit) => {
   return getThemes()
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])

src/services/theme_data/theme_data.service.js

@@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
   Object.entries(SLOT_INHERITANCE)
     .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
-)
+).sort((a, b) => {
+  const depsA = getDependencies(a, SLOT_INHERITANCE).length
+  const depsB = getDependencies(b, SLOT_INHERITANCE).length
+
+  if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0
+  if (depsA === 0 && depsB !== 0) return -1
+  if (depsB === 0 && depsA !== 0) return 1
+})
 
 /**
  * Dictionary where keys are color slots and values are opacity associated

static/themes/breezy-dark.json

@@ -53,7 +53,7 @@
           "blur": 0,
           "spread": "1",
           "color": "--accent",
-          "alpha": "0.3",
+          "alpha": "1",
           "inset": true
         },
         {

static/themes/breezy-light.json

@@ -53,7 +53,7 @@
           "blur": 0,
           "spread": "1",
           "color": "--accent",
-          "alpha": "0.3",
+          "alpha": "1",
           "inset": true
         },
         {