[Glitch] Add color variables of texts for better accesibility

Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc

1 files changed, 14 insertions, 14 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index a86120e08..84d3f6ade 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -7,7 +7,7 @@
   .account__display-name {
     flex: 1 1 auto;
     display: block;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -102,7 +102,7 @@
     }
 
     .account__header__username {
-      color: $ui-primary-color;
+      color: $secondary-text-color;
     }
   }
 
@@ -112,7 +112,7 @@
   }
 
   .account__header__content {
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
   }
 
   .account__header__display-name {
@@ -127,7 +127,7 @@
   }
 
   .account__header__username {
-    color: $ui-highlight-color;
+    color: $highlight-text-color;
     font-size: 14px;
     font-weight: 400;
     display: block;
@@ -140,7 +140,7 @@
 .account__disclaimer {
   padding: 10px;
   border-top: 1px solid lighten($ui-base-color, 8%);
-  color: $ui-base-lighter-color;
+  color: $dark-text-color;
 
   strong {
     font-weight: 500;
@@ -166,7 +166,7 @@
 }
 
 .account__header__content {
-  color: $ui-primary-color;
+  color: $darker-text-color;
   font-size: 14px;
   font-weight: 400;
   overflow: hidden;
@@ -243,7 +243,7 @@
     display: block;
     text-transform: uppercase;
     font-size: 11px;
-    color: $ui-primary-color;
+    color: $darker-text-color;
   }
 
   strong {
@@ -260,7 +260,7 @@
   }
 
   abbr {
-    color: $ui-base-lighter-color;
+    color: $highlight-text-color;
   }
 }
 
@@ -292,12 +292,12 @@
   margin-left: 42px;
   padding: 8px 0 0 26px;
   cursor: default;
-  color: $ui-primary-color;
+  color: $darker-text-color;
   font-size: 15px;
   position: relative;
 
   .fa {
-    color: $ui-highlight-color;
+    color: $highlight-text-color;
   }
 
   > span {
@@ -328,7 +328,7 @@
 }
 
 .column-settings__section {
-  color: $ui-primary-color;
+  color: $darker-text-color;
   cursor: default;
   display: block;
   font-weight: 500;
@@ -439,7 +439,7 @@
   a {
     display: block;
     flex: 1 1 auto;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     padding: 15px 0;
     font-size: 14px;
     font-weight: 500;
@@ -448,7 +448,7 @@
     position: relative;
 
     &.active {
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
 
       &::before,
       &::after {
@@ -483,7 +483,7 @@
   &__message {
     position: relative;
     margin-left: 58px;
-    color: $ui-base-lighter-color;
+    color: $dark-text-color;
     padding: 8px 0;
     padding-top: 0;
     padding-bottom: 4px;