[Glitch] Add color variables of texts for better accesibility

Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc

1 files changed, 11 insertions, 11 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 0ed8c392a..df239dba7 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -92,7 +92,7 @@
     padding: 15px 5px 13px;
     height: 48px;
     flex: 1 1 auto;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
@@ -127,7 +127,7 @@
     width: 100%;
     height: 36px;
     outline: 0;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     background: $ui-base-color;
     font-size: 14px;
     font-family: inherit;
@@ -146,7 +146,7 @@
     right: 10px;
     width: 18px;
     height: 18px;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
     font-size: 18px;
     line-height: 18px;
     z-index: 2;
@@ -199,12 +199,12 @@
   border-radius: 4px;
   padding: 10px 14px 14px 14px;
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  color: $ui-primary-color;
+  color: $light-text-color;
   background: $simple-background-color;
 
   h4 {
     margin-bottom: 10px;
-    color: $ui-primary-color;
+    color: $light-text-color;
     font-size: 13px;
     font-weight: 500;
     text-transform: uppercase;
@@ -214,14 +214,14 @@
   li { padding: 4px 0 }
 
   em {
-    color: $ui-base-color;
+    color: $inverted-text-color;
     font-weight: 500;
   }
 }
 
 .drawer--account {
   padding: 10px;
-  color: $ui-primary-color;
+  color: $darker-text-color;
 
   & > a {
     color: inherit;
@@ -235,7 +235,7 @@
 
   & > .acct {
     display: block;
-    color: $primary-text-color;
+    color: $secondary-text-color;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
@@ -258,7 +258,7 @@
   & > header {
     border-bottom: 1px solid darken($ui-base-color, 4%);
     padding: 15px 10px;
-    color: $ui-base-lighter-color;
+    color: $dark-text-color;
     background: lighten($ui-base-color, 2%);
     font-size: 14px;
     font-weight: 500;
@@ -270,13 +270,13 @@
     & > .hashtag {
       display: block;
       padding: 10px;
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
       text-decoration: none;
 
       &:hover,
       &:active,
       &:focus {
-        color: lighten($ui-secondary-color, 4%);
+        color: lighten($secondary-text-color, 4%);
         text-decoration: underline;
       }
     }