10 files changed, 86 insertions, 20 deletions
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 732cf16f..adc72fc5 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -1,4 +1,15 @@
 export default {
   name: 'Icon',
-  selector: '.icon'
+  virtual: true,
+  selector: '.svg-inline--fa',
+  defaultRules: [
+    {
+      component: 'Icon',
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5,
+        textOpacityMode: 'mixrgb'
+      }
+    }
+  ]
 }
diff --git a/src/components/link.style.js b/src/components/link.style.js
new file mode 100644
index 00000000..0128fd91
--- /dev/null
+++ b/src/components/link.style.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'Link',
+  selector: 'a',
+  virtual: true,
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      component: 'Link',
+      directives: {
+        textColor: '--link'
+      }
+    },
+    {
+      component: 'Link',
+      state: ['faint'],
+      directives: {
+        textColor: '--link',
+        textOpacity: 0.5,
+        textOpacityMode: 'fake'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a8eceab0..5c425200 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5749e430..708d111b 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -7,8 +7,7 @@
   }
 
   .loadmore-error {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 
   .notification {
@@ -25,7 +24,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
       }
     }
   }
@@ -60,24 +59,17 @@
       width: 32px;
       height: 32px;
     }
-
-    .faint {
-      --link: var(--faintLink);
-      --text: var(--faint);
-    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
+      color: var(--cRed);
     }
   }
 
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index e3da4d1a..870f5099 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -3,6 +3,7 @@ export default {
   selector: '.panel',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button',
     'PanelHeader'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index aaa8bea9..e83e1f15 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -3,6 +3,7 @@ export default {
   selector: '.panel-heading',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button'
   ]
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fa9d6f0b..7c56430f 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -180,7 +180,7 @@
 
               <span class="heading-right">
                 <router-link
-                  class="timeago faint-link"
+                  class="timeago faint"
                   :to="{ name: 'conversation', params: { id: status.id } }"
                 >
                   <Timeago
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 8fd60afc..a8878745 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -113,12 +113,11 @@
   }
 
   .greentext {
-    color: $fallback--cGreen;
-    color: var(--postGreentext, $fallback--cGreen);
+    color: var(--textGreentext);
   }
 
   .cyantext {
-    color: var(--postCyantext, $fallback--cBlue);
+    color: var(--textCyantext);
   }
 
   &.-compact {
diff --git a/src/components/text.style.js b/src/components/text.style.js
index 050194cb..e52b6f68 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -1,7 +1,43 @@
 export default {
   name: 'Text',
   selector: '/*text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext'
+  },
   states: {
     faint: '.faint'
-  }
+  },
+  defaultRules: [
+    {
+      component: 'Text',
+      directives: {
+        textColor: '--text'
+      }
+    },
+    {
+      component: 'Text',
+      state: ['faint'],
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen'
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      state: ['faint'],
+      directives: {
+        textColor: '--cGreen',
+        textOpacity: 0.5
+      }
+    }
+  ]
 }
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index be1ecc56..c35fbada 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,6 +1,7 @@
 export default {
   name: 'Underlay',
-  selector: '#app',
+  selector: '#content',
+  outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]