fix v2 breezy themes having messed up pressed buttons. updated v2.1 breezy

themes to have derived colors instead of fixed ones.

5 files changed, 25 insertions, 26 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 17ae9f30..807f9efc 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -62,6 +62,7 @@ export default {
       selected: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
+      engineVersion: 0,
 
       previewShadows: {},
       previewColors: {},
@@ -510,7 +511,7 @@ export default {
         colors: this.currentColors
       })
       this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal },
+        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
         this.previewColors.theme.colors,
         this.previewColors.mod
       )
@@ -607,6 +608,8 @@ export default {
         }
       }
 
+      this.engineVersion = version
+
       // Stuff that differs between V1 and V2
       if (version === 1) {
         this.fgColorLocal = rgb2hex(colors.btn)
@@ -653,7 +656,7 @@ export default {
       if (!this.keepShadows) {
         this.clearShadows()
         if (version === 2) {
-          this.shadowsLocal = shadows2to3(shadows)
+          this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
         } else {
           this.shadowsLocal = shadows
         }
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 3b6fdcc7..ec104269 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -214,8 +214,6 @@ export const getCssColor = (input, a) => {
   } else if (typeof input === 'string') {
     if (input.startsWith('#')) {
       rgb = hex2rgb(input)
-    } else if (input.startsWith('--')) {
-      return `var(${input})`
     } else {
       return input
     }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 48f51c59..c8610507 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
-import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
+import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
 
 export const applyTheme = (input) => {
   const { rules } = generatePreset(input)
@@ -242,7 +242,7 @@ export const generateShadows = (input, colors) => {
     input: 'input'
   }
   const inputShadows = input.shadows && !input.themeEngineVersion
-    ? shadows2to3(input.shadows)
+    ? shadows2to3(input.shadows, input.opacity)
     : input.shadows || {}
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
@@ -368,14 +368,15 @@ export const colors2to3 = (colors) => {
  *
  * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
  */
-export const shadows2to3 = (shadows) => {
+export const shadows2to3 = (shadows, opacity) => {
   return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
     const isDynamic = ({ color }) => color.startsWith('--')
+    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
         ...def,
-        alpha: isDynamic(def) ? 1 : def.alpha
+        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
       }
     ], [])
     return { ...shadowsAcc, [slotName]: newShadow }
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 236b94ad..76b962c5 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -21,7 +21,7 @@
           "y": "0",
           "blur": "0",
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": "0.15",
           "inset": true
         },
@@ -42,7 +42,7 @@
           "blur": "40",
           "spread": "-40",
           "inset": true,
-          "color": "#ffffff",
+          "color": "--panel,900",
           "alpha": "0.1"
         }
       ],
@@ -72,7 +72,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": 0.2,
           "inset": true
         },
@@ -92,7 +92,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#FFFFFF",
+          "color": "--input,900",
           "alpha": "0.2",
           "inset": true
         }
@@ -105,9 +105,9 @@
       "link": "#3daee9",
       "fg": "#31363b",
       "panel": "transparent",
-      "input": "#232629",
-      "topBarLink": "#eff0f1",
-      "btn": "#31363b",
+      "input": "--bg,-6.47",
+      "topBarLink": "--topBarText",
+      "btn": "--bg",
       "border": "#4c545b",
       "cRed": "#da4453",
       "cBlue": "#3daee9",
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index d3f74cec..0968fff0 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -21,7 +21,7 @@
           "y": "0",
           "blur": "0",
           "spread": "1",
-          "color": "#000000",
+          "color": "--btn,900",
           "alpha": "0.3",
           "inset": true
         },
@@ -42,7 +42,7 @@
           "blur": "40",
           "spread": "-40",
           "inset": true,
-          "color": "#ffffff",
+          "color": "--panel,900",
           "alpha": "0.1"
         }
       ],
@@ -72,7 +72,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": 0.2,
           "inset": true
         },
@@ -92,7 +92,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#000000",
+          "color": "--input,900",
           "alpha": "0.2",
           "inset": true
         }
@@ -104,14 +104,11 @@
     "colors": {
       "bg": "#eff0f1",
       "text": "#232627",
-      "fg": "#bcc2c7",
+      "fg": "#475057",
       "accent": "#2980b9",
-      "panel": "#475057",
-      "panelText": "#fcfcfc",
-      "input": "#fcfcfc",
-      "topBar": "#475057",
-      "topBarLink": "#eff0f1",
-      "btn": "#eff0f1",
+      "input": "--bg,-6.47",
+      "topBarLink": "--topBarText",
+      "btn": "--bg",
       "cRed": "#da4453",
       "cBlue": "#2980b9",
       "cGreen": "#27ae60",