2 files changed, 24 insertions, 16 deletions
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index b58ca9be..7ed85797 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -675,23 +675,22 @@ export const SLOT_INHERITANCE = {
     depends: ['bg']
   },
 
-  chatMessage: {
-    depends: ['chatBg']
-  },
-
   chatMessageIncomingBg: {
-    depends: ['chatMessage'],
-    layer: 'chatMessage'
+    depends: ['chatBg']
   },
 
   chatMessageIncomingText: {
     depends: ['text'],
-    layer: 'text'
+    layer: 'chatMessage',
+    variant: 'chatMessageIncomingBg',
+    textColor: true
   },
 
   chatMessageIncomingLink: {
     depends: ['link'],
-    layer: 'link'
+    layer: 'chatMessage',
+    variant: 'chatMessageIncomingBg',
+    textColor: 'preserve'
   },
 
   chatMessageIncomingBorder: {
@@ -701,22 +700,27 @@ export const SLOT_INHERITANCE = {
   },
 
   chatMessageOutgoingBg: {
-    depends: ['chatMessage'],
+    depends: ['chatMessageIncomingBg'],
     color: (mod, chatMessage) => brightness(5 * mod, chatMessage).rgb
   },
 
   chatMessageOutgoingText: {
     depends: ['text'],
-    layer: 'text'
+    layer: 'chatMessage',
+    variant: 'chatMessageOutgoingBg',
+    textColor: true
   },
 
   chatMessageOutgoingLink: {
     depends: ['link'],
-    layer: 'link'
+    layer: 'chatMessage',
+    variant: 'chatMessageOutgoingBg',
+    textColor: 'preserve'
   },
 
   chatMessageOutgoingBorder: {
-    depends: ['chatMessage'],
-    opacity: 'chatMessage'
+    depends: ['chatMessageOutgoingBg'],
+    opacity: 'border',
+    color: (mod, border) => brightness(2 * mod, border).rgb
   }
 }
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index dd87e3cf..138ed5c6 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -128,14 +128,18 @@ export const topoSort = (
   while (unprocessed.length > 0) {
     step(unprocessed.pop())
   }
-  return output.sort((a, b) => {
+
+  // The index thing is to make sorting stable on browsers
+  // where Array.sort() isn't stable
+  return output.map((data, index) => ({ data, index })).sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+    console.log(a, b, ai, bi)
     const depsA = getDeps(a, inheritance).length
     const depsB = getDeps(b, inheritance).length
 
-    if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0
+    if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return ai - bi
     if (depsA === 0 && depsB !== 0) return -1
     if (depsB === 0 && depsA !== 0) return 1
-  })
+  }).map(({ data }) => data)
 }
 
 const expandSlotValue = (value) => {