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,62 +160,66 @@ export default {
     },
     // This needs optimization maybe
     previewContrast () {
-      if (!this.previewTheme.colors.bg) return {}
+      try {
-      const colors = this.previewTheme.colors
+        if (!this.previewTheme.colors.bg) return {}
-      const opacity = this.previewTheme.opacity
+        const colors = this.previewTheme.colors
-      if (!colors.bg) return {}
+        const opacity = this.previewTheme.opacity
-      const hints = (ratio) => ({
+        if (!colors.bg) return {}
-        text: ratio.toPrecision(3) + ':1',
+        const hints = (ratio) => ({
-        // AA level, AAA level
+          text: ratio.toPrecision(3) + ':1',
-        aa: ratio >= 4.5,
+          // AA level, AAA level
-        aaa: ratio >= 7,
+          aa: ratio >= 4.5,
-        // same but for 18pt+ texts
+          aaa: ratio >= 7,
-        laa: ratio >= 3,
+          // same but for 18pt+ texts
-        laaa: ratio >= 4.5
+          laa: ratio >= 3,
-      })
+          laaa: ratio >= 4.5
-      const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
+        })
+        const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
 
-      const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
+        const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
-        const slotIsBaseText = key === 'text' || key === 'link'
+          const slotIsBaseText = key === 'text' || key === 'link'
-        const slotIsText = slotIsBaseText || (
+          const slotIsText = slotIsBaseText || (
-          typeof value === 'object' && value !== null && value.textColor
+            typeof value === 'object' && value !== null && value.textColor
-        )
+          )
-        if (!slotIsText) return acc
+          if (!slotIsText) return acc
-        const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+          const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
-        const background = variant || layer
+          const background = variant || layer
-        const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
+          const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
-        const textColors = [
+          const textColors = [
-          key,
+            key,
-          ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
+            ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
-        ]
+          ]
 
-        const layers = getLayers(
+          const layers = getLayers(
-          layer,
+            layer,
-          variant || layer,
+            variant || layer,
-          opacitySlot,
+            opacitySlot,
-          colorsConverted,
+            colorsConverted,
-          opacity
+            opacity
-        )
+          )
 
-        return {
+          return {
-          ...acc,
+            ...acc,
-          ...textColors.reduce((acc, textColorKey) => {
+            ...textColors.reduce((acc, textColorKey) => {
-            const newKey = slotIsBaseText
+              const newKey = slotIsBaseText
-              ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+                    ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
-              : textColorKey
+                    : textColorKey
-            return {
+              return {
-              ...acc,
+                ...acc,
-              [newKey]: getContrastRatioLayers(
+                [newKey]: getContrastRatioLayers(
-                colorsConverted[textColorKey],
+                  colorsConverted[textColorKey],
-                layers,
+                  layers,
-                colorsConverted[textColorKey]
+                  colorsConverted[textColorKey]
-              )
+                )
-            }
+              }
-          }, {})
+            }, {})
-        }
+          }
-      }, {})
+        }, {})
 
-      return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+        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()
-        this.shadowsLocal = shadows
+        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
         },
         {