From 9f2c1b4008ef7bb77c98e80f75b41eaa9e92b90a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:17:24 +0200
Subject: [PATCH 1/4] fix several issues related to opacity

---
 src/services/theme_data/theme_data.service.js | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index de6561cd7f..c3fdbd877b 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -350,17 +350,43 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   if (!outputColor) {
     throw new Error('Couldn\'t generate color for ' + key)
   }
-  const opacitySlot = getOpacitySlot(key)
+
+  const opacitySlot = value.opacity || getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
-  const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
-  if (opacitySlot && (outputColor.a === undefined || opacityOverriden)) {
+
+  if (sourceColor === 'transparent') {
+    outputColor.a = 0
+  } else if (ownOpacitySlot === null) {
+    outputColor.a = 1
+  } else {
+    const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+
     const dependencySlot = deps[0]
-    if (dependencySlot && colors[dependencySlot] === 'transparent') {
-      outputColor.a = 0
+    const dependencyColor = dependencySlot && colors[dependencySlot]
+
+    if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
+      // Inheriting color from dependency (weird, i know)
+      // except if it's a text color or opacity slot is set to 'null'
+      outputColor.a = dependencyColor.a
+    } else if (!dependencyColor && !opacitySlot) {
+      // Remove any alpha channel if no dependency and no opacitySlot found
+      delete outputColor.a
     } else {
-      outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
+      // Otherwise try to assign opacity
+      if (dependencyColor && dependencyColor.a === 0) {
+        // transparent dependency shall make dependents transparent too
+        outputColor.a = 0
+      } else {
+        // Otherwise check if opacity is overriden and use that or default value instead
+        outputColor.a = Number(
+          opacityOverriden
+            ? sourceOpacity[opacitySlot]
+            : (OPACITIES[opacitySlot] || {}).defaultValue
+        )
+      }
     }
   }
+
   if (opacitySlot) {
     return {
       colors: { ...colors, [key]: outputColor },

From 7aa5bf0896c045d5d4a4e19fe7eff2c61fd2acf9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:20:42 +0200
Subject: [PATCH 2/4] prioritize disabled opacity over transparent keyword

---
 src/services/theme_data/theme_data.service.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index c3fdbd877b..44fb575caa 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -354,10 +354,10 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   const opacitySlot = value.opacity || getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
 
-  if (sourceColor === 'transparent') {
-    outputColor.a = 0
-  } else if (ownOpacitySlot === null) {
+  if (ownOpacitySlot === null) {
     outputColor.a = 1
+  } else if (sourceColor === 'transparent') {
+    outputColor.a = 0
   } else {
     const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
 

From 550080bd82bf39e35b2b481d8643bf1ac7461d7c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:39:17 +0200
Subject: [PATCH 3/4] fix last issue

---
 src/services/theme_data/theme_data.service.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 44fb575caa..4d7e4f67cb 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -384,6 +384,9 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
             : (OPACITIES[opacitySlot] || {}).defaultValue
         )
       }
+      if (Number.isNaN(outputColor.a)) {
+        outputColor.a = 1
+      }
     }
   }
 

From a485386a3b07f831859fcefa9cd429fc801fd8eb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:48:40 +0200
Subject: [PATCH 4/4] fix tests

---
 src/services/theme_data/theme_data.service.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 4d7e4f67cb..dd87e3cffe 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -384,12 +384,13 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
             : (OPACITIES[opacitySlot] || {}).defaultValue
         )
       }
-      if (Number.isNaN(outputColor.a)) {
-        outputColor.a = 1
-      }
     }
   }
 
+  if (Number.isNaN(outputColor.a) || outputColor.a === undefined) {
+    outputColor.a = 1
+  }
+
   if (opacitySlot) {
     return {
       colors: { ...colors, [key]: outputColor },