2 files changed, 103 insertions, 5 deletions

diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 0c1fe543..7ed85797 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -23,7 +23,9 @@ export const LAYERS = {
   inputTopBar: 'topBar',
   alert: 'bg',
   alertPanel: 'panel',
-  poll: 'bg'
+  poll: 'bg',
+  chatBg: 'underlay',
+  chatMessage: 'chatBg'
 }
 
 /* By default opacity slots have 1 as default opacity
@@ -34,7 +36,8 @@ export const DEFAULT_OPACITY = {
   alert: 0.5,
   input: 0.5,
   faint: 0.5,
-  underlay: 0.15
+  underlay: 0.15,
+  alertPopup: 0.95
 }
 
 /**  SUBJECT TO CHANGE IN THE FUTURE, this is all beta
@@ -356,6 +359,12 @@ export const SLOT_INHERITANCE = {
     textColor: 'preserve'
   },
 
+  postGreentext: {
+    depends: ['cGreen'],
+    layer: 'bg',
+    textColor: 'preserve'
+  },
+
   border: {
     depends: ['fg'],
     opacity: 'border',
@@ -621,11 +630,97 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  alertPopupError: {
+    depends: ['alertError'],
+    opacity: 'alertPopup'
+  },
+  alertPopupErrorText: {
+    depends: ['alertErrorText'],
+    layer: 'popover',
+    variant: 'alertPopupError',
+    textColor: true
+  },
+
+  alertPopupWarning: {
+    depends: ['alertWarning'],
+    opacity: 'alertPopup'
+  },
+  alertPopupWarningText: {
+    depends: ['alertWarningText'],
+    layer: 'popover',
+    variant: 'alertPopupWarning',
+    textColor: true
+  },
+
+  alertPopupNeutral: {
+    depends: ['alertNeutral'],
+    opacity: 'alertPopup'
+  },
+  alertPopupNeutralText: {
+    depends: ['alertNeutralText'],
+    layer: 'popover',
+    variant: 'alertPopupNeutral',
+    textColor: true
+  },
+
   badgeNotification: '--cRed',
   badgeNotificationText: {
     depends: ['text', 'badgeNotification'],
     layer: 'badge',
     variant: 'badgeNotification',
     textColor: 'bw'
+  },
+
+  chatBg: {
+    depends: ['bg']
+  },
+
+  chatMessageIncomingBg: {
+    depends: ['chatBg']
+  },
+
+  chatMessageIncomingText: {
+    depends: ['text'],
+    layer: 'chatMessage',
+    variant: 'chatMessageIncomingBg',
+    textColor: true
+  },
+
+  chatMessageIncomingLink: {
+    depends: ['link'],
+    layer: 'chatMessage',
+    variant: 'chatMessageIncomingBg',
+    textColor: 'preserve'
+  },
+
+  chatMessageIncomingBorder: {
+    depends: ['border'],
+    opacity: 'border',
+    color: (mod, border) => brightness(2 * mod, border).rgb
+  },
+
+  chatMessageOutgoingBg: {
+    depends: ['chatMessageIncomingBg'],
+    color: (mod, chatMessage) => brightness(5 * mod, chatMessage).rgb
+  },
+
+  chatMessageOutgoingText: {
+    depends: ['text'],
+    layer: 'chatMessage',
+    variant: 'chatMessageOutgoingBg',
+    textColor: true
+  },
+
+  chatMessageOutgoingLink: {
+    depends: ['link'],
+    layer: 'chatMessage',
+    variant: 'chatMessageOutgoingBg',
+    textColor: 'preserve'
+  },
+
+  chatMessageOutgoingBorder: {
+    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..b619f810 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -128,14 +128,17 @@ 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 }) => {
     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) => {