chat styles + related improvements

src/components/chat/chat.style.js

@@ -0,0 +1,14 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+  ]
+}

src/components/chat/chat.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">

src/components/chat_message/chat_message.scss

@@ -27,12 +27,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +55,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
+    background-color: var(--background);
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -117,16 +113,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +123,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }

src/components/chat_message/chat_message.style.js

@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}

src/components/notification/notification.style.js

@@ -13,11 +13,5 @@ export default {
     'Avatar',
     'Attachment'
   ],
-  defaultRules: [
+  defaultRules: []
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
 }

src/components/panel.style.js

@@ -14,7 +14,8 @@ export default {
     'Post',
     'Notification',
     'Alert',
-    'UserCard'
+    'UserCard',
+    'Chat'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -8,7 +8,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'Badge',
-    'Alert'
+    'Alert',
+    'Avatar'
   ],
   defaultRules: [
     {

src/components/rich_content/rich_content.style.js

@@ -9,7 +9,6 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
         textNoCssColor: 'yes'
       }
     }

src/components/status/post.style.js

@@ -14,11 +14,5 @@ export default {
     'Attachment',
     'PollGraph'
   ],
-  defaultRules: [
+  defaultRules: []
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
 }

src/services/theme_data/theme_data_3.service.js

@@ -17,7 +17,9 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
-  Panel: null
+  Panel: null,
+  Chat: null,
+  ChatMessage: null
 }
 
 // Loading all style.js[on] files dynamically
@@ -509,17 +511,11 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
-        let addRuleNeeded = false
 
         // TODO: DEFAULT TEXT COLOR
         const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
 
-        if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
-          addRuleNeeded = true
-        }
-
         if (computedDirectives.background) {
-          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -564,15 +560,13 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.stacked = lowerLevelStackedBackground
         dynamicVars.background = computed[selector].background
 
-        if (addRuleNeeded) {
+        addRule({
-          addRule({
+          selector: cssSelector,
-            selector: cssSelector,
+          component: component.name,
-            component: component.name,
+          ...combination,
-            ...combination,
+          parent,
-            parent,
+          directives: computedDirectives
-            directives: computedDirectives
+        })
-          })
-        }
       }
 
       innerComponents.forEach(innerComponent => {
@@ -645,15 +639,15 @@ export const init = (extraRuleset, palette) => {
             case 'background': {
               if (v === 'transparent') {
                 return [
-                  'background-color: ' + v,
+                  rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
                   '  --background: ' + v
-                ].join(';\n')
+                ].filter(x => x).join(';\n')
               }
               const color = cssColorString(computed[selector].background, rule.directives.opacity)
               return [
-                'background-color: ' + color,
+                rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
                 '  --background: ' + color
-              ].join(';\n')
+              ].filter(x => x).join(';\n')
             }
             case 'textColor': {
               if (rule.directives.textNoCssColor === 'yes') { return '' }