[Glitch] Add color variables of texts for better accesibility

Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc

1 files changed, 18 insertions, 18 deletions

diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index 082867f17..eff964e50 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -75,7 +75,7 @@
     small {
       display: block;
       font-size: 14px;
-      color: $ui-highlight-color;
+      color: $highlight-text-color;
       font-weight: 400;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -116,7 +116,7 @@
     width: 33.3%;
     box-sizing: border-box;
     flex: 0 0 auto;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     padding: 5px 10px 0;
     margin-bottom: 10px;
     border-right: 1px solid lighten($ui-base-color, 4%);
@@ -146,7 +146,7 @@
 
     &.active {
       &::after {
-        border-bottom: 4px solid $ui-highlight-color;
+        border-bottom: 4px solid $highlight-text-color;
         opacity: 1;
       }
     }
@@ -182,7 +182,7 @@
     line-height: 18px;
     padding: 0 15px;
     text-align: center;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
   }
 
   @media screen and (max-width: 480px) {
@@ -260,7 +260,7 @@
   .current {
     background: $simple-background-color;
     border-radius: 100px;
-    color: $ui-base-color;
+    color: $inverted-text-color;
     cursor: default;
     margin: 0 10px;
   }
@@ -272,7 +272,7 @@
   .older,
   .newer {
     text-transform: uppercase;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
   }
 
   .older {
@@ -297,7 +297,7 @@
 
   .disabled {
     cursor: default;
-    color: lighten($ui-base-color, 10%);
+    color: lighten($inverted-text-color, 10%);
   }
 
   @media screen and (max-width: 700px) {
@@ -336,7 +336,7 @@
     width: 335px;
     background: $simple-background-color;
     border-radius: 4px;
-    color: $ui-base-color;
+    color: $inverted-text-color;
     margin: 0 5px 10px;
     position: relative;
 
@@ -348,7 +348,7 @@
       overflow: hidden;
       height: 100px;
       border-radius: 4px 4px 0 0;
-      background-color: lighten($ui-base-color, 4%);
+      background-color: lighten($inverted-text-color, 4%);
       background-size: cover;
       background-position: center;
       position: relative;
@@ -399,7 +399,7 @@
 
       a {
         display: block;
-        color: $ui-base-color;
+        color: $inverted-text-color;
         text-decoration: none;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -421,7 +421,7 @@
     }
 
     .username {
-      color: lighten($ui-base-color, 34%);
+      color: $lighter-text-color;
       font-size: 14px;
       font-weight: 400;
     }
@@ -429,7 +429,7 @@
     .account__header__content {
       padding: 10px 15px;
       padding-top: 15px;
-      color: lighten($ui-base-color, 26%);
+      color: $lighter-text-color;
       word-wrap: break-word;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -441,7 +441,7 @@
 .nothing-here {
   width: 100%;
   display: block;
-  color: $ui-primary-color;
+  color: $light-text-color;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -502,7 +502,7 @@
 
       span {
         font-size: 14px;
-        color: $ui-primary-color;
+        color: $light-text-color;
       }
     }
 
@@ -517,7 +517,7 @@
 
   .account__header__content {
     font-size: 14px;
-    color: $ui-base-color;
+    color: $inverted-text-color;
   }
 }
 
@@ -531,18 +531,18 @@
     display: inline-block;
     padding: 15px;
     text-decoration: none;
-    color: $ui-highlight-color;
+    color: $highlight-text-color;
     text-transform: uppercase;
     font-weight: 500;
 
     &:hover,
     &:active,
     &:focus {
-      color: lighten($ui-highlight-color, 8%);
+      color: lighten($highlight-text-color, 8%);
     }
 
     &.active {
-      color: $ui-base-color;
+      color: $inverted-text-color;
       cursor: default;
     }
   }