separate greentext into "fun text" and make Post/Notification related components

src/App.scss

@@ -673,8 +673,6 @@ option {
 
 .faint {
   --text: var(--textFaint);
-  --textGreentext: var(--textGreentextFaint);
-  --textCyantext: var(--textCyantextFaint);
   --link: var(--linkFaint);
 
   color: var(--text);

src/components/fun_text.style.js

@@ -0,0 +1,40 @@
+export default {
+  name: 'FunText',
+  selector: '/*fun-text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext',
+    cyantext: '.cyantext'
+  },
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      directives: {
+        textColor: '--text',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5
+      }
+    },
+    {
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      variant: 'cyantext',
+      directives: {
+        textColor: '--cBlue',
+        textAuto: 'preserve'
+      }
+    }
+  ]
+}

src/components/notification.style.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}

src/components/notification/notification.scss

@@ -3,8 +3,7 @@
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   word-wrap: break-word;
   word-break: break-word;
 

src/components/panel.style.js

@@ -9,7 +9,9 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post',
+    'Notification'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -13,7 +13,8 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post'
   ],
   defaultRules: [
     {

src/components/post.style.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}

src/components/rich_content.style.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}

src/components/rich_content/rich_content.scss

@@ -65,4 +65,12 @@
     vertical-align: middle;
     object-fit: contain;
   }
+
+  .greentext {
+    color: var(--funtextGreentext);
+  }
+
+  .cyantext {
+    color: var(--funtextCyantext);
+  }
 }

src/components/status_body/status_body.scss

@@ -112,14 +112,6 @@
     }
   }
 
-  .greentext {
-    color: var(--textGreentext);
-  }
-
-  .cyantext {
-    color: var(--textCyantext);
-  }
-
   &.-compact {
     align-items: top;
     flex-direction: row;

src/components/status_content/status_content.vue

@@ -62,5 +62,15 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
+
+  &.faint {
+    .greentext {
+      color: var(--funtextGreentextFaint);
+    }
+
+    .cyantext {
+      color: var(--funtextCyantextFaint);
+    }
+  }
 }
 </style>

src/components/text.style.js

@@ -2,34 +2,21 @@ export default {
   name: 'Text',
   selector: '/*text*/',
   virtual: true,
-  variants: {
-    greentext: '.greentext'
-  },
   states: {
     faint: '.faint'
   },
   defaultRules: [
     {
-      component: 'Text',
       directives: {
         textColor: '--text',
         textAuto: 'no-preserve'
       }
     },
     {
-      component: 'Text',
       state: ['faint'],
       directives: {
         textOpacity: 0.5
       }
-    },
-    {
-      component: 'Text',
-      variant: 'greentext',
-      directives: {
-        textColor: '--cGreen',
-        textAuto: 'preserve'
-      }
     }
   ]
 }

src/services/theme_data/theme_data_3.service.js

@@ -19,9 +19,13 @@ import Button from 'src/components/button.style.js'
 import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
+import FunText from 'src/components/fun_text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 import Border from 'src/components/border.style.js'
+import Post from 'src/components/post.style.js'
+import Notification from 'src/components/notification.style.js'
+import RichContent from 'src/components/rich_content.style.js'
 
 const DEBUG = false
 
@@ -39,6 +43,7 @@ export const DEFAULT_SHADOWS = {
 const components = {
   Root,
   Text,
+  FunText,
   Link,
   Icon,
   Border,
@@ -51,7 +56,10 @@ const components = {
   TopBar,
   Button,
   ButtonUnstyled,
-  Input
+  Input,
+  Post,
+  Notification,
+  RichContent
 }
 
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -582,6 +590,7 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n')
             }
             case 'textColor': {
+              if (rule.directives.textNoCssColor === 'yes') { return '' }
               return 'color: ' + v
             }
             default: return ''
@@ -594,7 +603,7 @@ export const init = (extraRuleset, palette) => {
       return [
         header,
         directives + ';',
-        !rule.virtual ? '  color: var(--text);' : '',
+        (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
         '',
         virtualDirectives,
         footer