fix badge-notificaiton color in favicon and notifications

src/components/badge.style.js

@@ -9,6 +9,12 @@ export default {
     notification: '.-notification'
   },
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
     {
       directives: {
         background: '--cGreen'

src/components/chat_message/chat_message.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -93,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
+      color: var(--badgeNotification);
-      color: var(--badgeNotification, $fallback--cRed);
     }
   }
 
@@ -146,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
+  color: var(--textFaint);
-  color: var(--faintedText, $fallback--text);
 }

src/components/root.style.js

@@ -15,9 +15,23 @@ export default {
   defaultRules: [
     {
       directives: {
+        // These are here just to establish order,
+        // themes should override those
+        '--bg': 'color | #121a24',
+        '--fg': 'color | #182230',
+        '--text': 'color | #b9b9ba',
+        '--link': 'color | #d8a070',
+        '--cRed': 'color | #FF0000',
+        '--cBlue': 'color | #0095ff',
+        '--cGreen': 'color | #0fa00f',
+        '--cOrange': 'color | #ffa500',
+
+        // Fonts
         '--font': 'generic | sans-serif',
         '--monoFont': 'generic | monospace',
-        '--bg': 'color | #000000', // just to establish order
+
+        // Fallback no-background-image color
+        // (also useful in some other places like scrollbars)
         '--wallpaper': 'color | --bg, -2'
       }
     }