[Glitch] Add color variables of texts for better accesibility

Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc

1 files changed, 21 insertions, 21 deletions

diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 23c9a6742..b077df145 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -33,7 +33,7 @@
       a {
         display: block;
         padding: 15px;
-        color: rgba($primary-text-color, 0.7);
+        color: $darker-text-color;
         text-decoration: none;
         transition: all 200ms linear;
         border-radius: 4px 0 0 4px;
@@ -90,7 +90,7 @@
     padding-left: 25px;
 
     h2 {
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
       font-size: 24px;
       line-height: 28px;
       font-weight: 400;
@@ -98,7 +98,7 @@
     }
 
     h3 {
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
       font-size: 20px;
       line-height: 28px;
       font-weight: 400;
@@ -109,7 +109,7 @@
       text-transform: uppercase;
       font-size: 13px;
       font-weight: 500;
-      color: $ui-primary-color;
+      color: $darker-text-color;
       padding-bottom: 8px;
       margin-bottom: 8px;
       border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -117,7 +117,7 @@
 
     h6 {
       font-size: 16px;
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
       line-height: 28px;
       font-weight: 400;
     }
@@ -125,7 +125,7 @@
     & > p {
       font-size: 14px;
       line-height: 18px;
-      color: $ui-secondary-color;
+      color: $secondary-text-color;
       margin-bottom: 20px;
 
       strong {
@@ -153,10 +153,10 @@
     }
 
     .muted-hint {
-      color: $ui-primary-color;
+      color: $darker-text-color;
 
       a {
-        color: $ui-highlight-color;
+        color: $highlight-text-color;
       }
     }
 
@@ -253,7 +253,7 @@
 
     a {
       display: inline-block;
-      color: rgba($primary-text-color, 0.7);
+      color: $darker-text-color;
       text-decoration: none;
       text-transform: uppercase;
       font-size: 12px;
@@ -266,7 +266,7 @@
       }
 
       &.selected {
-        color: $ui-highlight-color;
+        color: $highlight-text-color;
         border-bottom: 2px solid $ui-highlight-color;
       }
     }
@@ -307,7 +307,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -364,7 +364,7 @@
     padding: 7px 4px;
     margin-bottom: 10px;
     font-size: 16px;
-    color: $ui-base-color;
+    color: $inverted-text-color;
     display: block;
     width: 100%;
     outline: 0;
@@ -418,7 +418,7 @@
   font-size: 14px;
 
   a {
-    color: $classic-highlight-color;
+    color: $highlight-text-color;
     text-decoration: none;
 
     &:hover {
@@ -441,7 +441,7 @@
     align-items: center;
     padding: 10px;
     background: $ui-base-color;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     border-radius: 4px 4px 0 0;
     font-size: 14px;
     position: relative;
@@ -468,14 +468,14 @@
   }
 
   &__timestamp {
-    color: lighten($ui-base-color, 34%);
+    color: $dark-text-color;
   }
 
   &__extras {
     background: lighten($ui-base-color, 6%);
     border-radius: 0 0 4px 4px;
     padding: 10px;
-    color: $ui-primary-color;
+    color: $darker-text-color;
     font-family: 'mastodon-font-monospace', monospace;
     font-size: 12px;
     word-wrap: break-word;
@@ -485,7 +485,7 @@
   &__icon {
     font-size: 28px;
     margin-right: 10px;
-    color: lighten($ui-base-color, 34%);
+    color: $dark-text-color;
   }
 
   &__icon__overlay {
@@ -501,7 +501,7 @@
     }
 
     &.negative {
-      background: $error-red;
+      background: lighten($error-red, 12%);
     }
 
     &.neutral {
@@ -512,17 +512,17 @@
   a,
   .username,
   .target {
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
     text-decoration: none;
     font-weight: 500;
   }
 
   .diff-old {
-    color: $error-red;
+    color: lighten($error-red, 12%);
   }
 
   .diff-neutral {
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
   }
 
   .diff-new {