1 files changed, 33 insertions, 17 deletions

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 8740fc55..df22f94f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -170,23 +170,32 @@ export const generateCompat = (input) => {
   }
 }
 
-const generateColors = (input) => {
+const generateColors = (themeData) => {
   const colors = {}
-  const opacity = Object.assign({
+  const rawOpacity = Object.assign({
     alert: 0.5,
     input: 0.5,
     faint: 0.5,
     underlay: 0.15
-  }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
+  }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
     if (typeof v !== 'undefined') {
       acc[k] = v
     }
     return acc
   }, {}))
 
-  const inputColors = input.colors || input
+  const inputColors = themeData.colors || themeData
 
-  const compat = input.v3compat || {}
+  const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => {
+    if (v === 'transparent') {
+      acc[k] = 0
+    }
+    return acc
+  }, {})
+
+  const opacity = { ...rawOpacity, ...transparentsOpacity }
+
+  const compat = themeData.v3compat || {}
   const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => {
     const newVal = value === null ? undefined : value
     return { ...acc, [key]: newVal }
@@ -196,15 +205,22 @@ const generateColors = (input) => {
     if (typeof v === 'object') {
       acc[k] = v
     } else {
-      acc[k] = hex2rgb(v)
+      let value = v
+      if (v === 'transparent') {
+        value = '#FF00FF'
+      }
+      acc[k] = hex2rgb(value)
     }
     return acc
   }, {})
 
-  const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
+  colors.bg = col.bg
+  colors.underlay = col.underlay || hex2rgb('#000000')
+  colors.text = col.text
+
+  const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  colors.text = col.text
   colors.lightText = brightness(20 * mod, colors.text).rgb
 
   colors.accent = col.accent || col.link
@@ -212,17 +228,15 @@ const generateColors = (input) => {
 
   colors.faint = col.faint || Object.assign({}, col.text)
 
-  colors.bg = col.bg
   colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb
 
-  const underlay = [col.underlay, opacity.underlay]
+  const underlay = [colors.underlay, opacity.underlay]
   const fg = [col.fg, opacity.fg]
   const bg = [col.bg, opacity.bg]
 
   colors.fg = col.fg
   colors.fgText = col.fgText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text)
   colors.fgLink = col.fgLink || getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true)
-  colors.underlay = col.underlay || hex2rgb('#000000')
 
   colors.border = col.border || brightness(2 * mod, colors.fg).rgb
 
@@ -231,8 +245,8 @@ const generateColors = (input) => {
   colors.btnText = col.btnText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText)
 
   colors.input = col.input || Object.assign({}, col.fg)
-  const inputCol = [colors.input, opacity.input]
-  colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText)
+  const input = [colors.input, opacity.input]
+  colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, input]), colors.lightText)
 
   colors.panel = col.panel || Object.assign({}, col.fg)
   const panel = [colors.panel, opacity.panel]
@@ -256,12 +270,14 @@ const generateColors = (input) => {
   colors.cOrange = col.cOrange || hex2rgb('#E3FF00')
 
   colors.alertError = col.alertError || Object.assign({}, colors.cRed)
-  colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
-  colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)
+  const alertError = [colors.alertError, opacity.alert]
+  colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text)
+  colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText)
 
   colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange)
-  colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text)
-  colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText)
+  const alertWarning = [colors.alertWarning, opacity.alert]
+  colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text)
+  colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText)
 
   colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed)
   colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb