Add color variables of texts for better accesibility (#7125)

* Add variables for text colors

* Change variables in sass files

* Apply text color variables for recently added colors

* Fix text colors of emoji mart anchors

* Fix text colors of search__input

* Fix text colors of text area of compose-form

* Fix icon colors of privacy dropdown and modal

* Inverted icon colors by classname

* Change variables in boost.scss

* Change action-button-color

* Fix text colors of pre-header

1 files changed, 32 insertions, 32 deletions

diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 034c35e8a..0a09a38d2 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -169,7 +169,7 @@ $small-breakpoint: 960px;
       background: $ui-base-color;
       font-size: 12px;
       font-weight: 500;
-      color: $ui-primary-color;
+      color: $darker-text-color;
       text-transform: uppercase;
       position: relative;
       z-index: 1;
@@ -186,10 +186,10 @@ $small-breakpoint: 960px;
     font-size: 16px;
     line-height: 30px;
     margin-bottom: 12px;
-    color: $ui-primary-color;
+    color: $darker-text-color;
 
     a {
-      color: $ui-highlight-color;
+      color: $highlight-text-color;
       text-decoration: underline;
     }
   }
@@ -202,11 +202,11 @@ $small-breakpoint: 960px;
       text-align: center;
       font-size: 12px;
       line-height: 18px;
-      color: $ui-primary-color;
+      color: $darker-text-color;
       margin-bottom: 0;
 
       a {
-        color: $ui-highlight-color;
+        color: $highlight-text-color;
         text-decoration: underline;
       }
     }
@@ -225,7 +225,7 @@ $small-breakpoint: 960px;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-    color: lighten($ui-primary-color, 10%);
+    color: transparentize($darker-text-color, 0.1);
   }
 
   h1 {
@@ -234,14 +234,14 @@ $small-breakpoint: 960px;
     line-height: 30px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
 
     small {
       font-family: 'mastodon-font-sans-serif', sans-serif;
       display: block;
       font-size: 18px;
       font-weight: 400;
-      color: $ui-base-lighter-color;
+      color: opacify($darker-text-color, 0.1);
     }
   }
 
@@ -251,7 +251,7 @@ $small-breakpoint: 960px;
     line-height: 26px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
   }
 
   h3 {
@@ -260,7 +260,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
   }
 
   h4 {
@@ -269,7 +269,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
   }
 
   h5 {
@@ -278,7 +278,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
   }
 
   h6 {
@@ -287,7 +287,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: $ui-secondary-color;
+    color: $primary-text-color;
   }
 
   ul,
@@ -354,10 +354,10 @@ $small-breakpoint: 960px;
         font-weight: 400;
         font-size: 16px;
         line-height: 30px;
-        color: $ui-primary-color;
+        color: $darker-text-color;
 
         a {
-          color: $ui-highlight-color;
+          color: $highlight-text-color;
           text-decoration: underline;
         }
       }
@@ -405,7 +405,7 @@ $small-breakpoint: 960px;
         font-size: 14px;
 
         &:hover {
-          color: $ui-secondary-color;
+          color: $darker-text-color;
         }
       }
 
@@ -478,10 +478,10 @@ $small-breakpoint: 960px;
     font-weight: 400;
     font-size: 16px;
     line-height: 30px;
-    color: $ui-primary-color;
+    color: $darker-text-color;
 
     a {
-      color: $ui-highlight-color;
+      color: $highlight-text-color;
       text-decoration: underline;
     }
   }
@@ -517,7 +517,7 @@ $small-breakpoint: 960px;
 
       span {
         &:last-child {
-          color: $ui-secondary-color;
+          color: $darker-text-color;
         }
       }
 
@@ -548,7 +548,7 @@ $small-breakpoint: 960px;
         font-size: 14px;
         line-height: 24px;
         font-weight: 500;
-        color: $ui-primary-color;
+        color: $darker-text-color;
         padding-bottom: 5px;
         margin-bottom: 15px;
         border-bottom: 1px solid lighten($ui-base-color, 4%);
@@ -559,7 +559,7 @@ $small-breakpoint: 960px;
         a,
         span {
           font-weight: 400;
-          color: darken($ui-primary-color, 10%);
+          color: opacify($darker-text-color, 0.1);
         }
 
         a {
@@ -602,7 +602,7 @@ $small-breakpoint: 960px;
 
         .username {
           display: block;
-          color: $ui-primary-color;
+          color: $darker-text-color;
         }
       }
     }
@@ -775,7 +775,7 @@ $small-breakpoint: 960px;
     }
 
     p a {
-      color: $ui-secondary-color;
+      color: $darker-text-color;
     }
 
     h1 {
@@ -784,10 +784,10 @@ $small-breakpoint: 960px;
       margin-bottom: 0;
 
       small {
-        color: $ui-primary-color;
+        color: $darker-text-color;
 
         span {
-          color: $ui-secondary-color;
+          color: $darker-text-color;
         }
       }
     }
@@ -896,7 +896,7 @@ $small-breakpoint: 960px;
       }
 
       a {
-        color: $ui-secondary-color;
+        color: $darker-text-color;
         text-decoration: none;
       }
     }
@@ -935,7 +935,7 @@ $small-breakpoint: 960px;
 
         .fa {
           display: block;
-          color: $ui-primary-color;
+          color: $darker-text-color;
           font-size: 48px;
         }
       }
@@ -943,7 +943,7 @@ $small-breakpoint: 960px;
       .text {
         font-size: 16px;
         line-height: 30px;
-        color: $ui-primary-color;
+        color: $darker-text-color;
 
         h6 {
           font-size: inherit;
@@ -969,10 +969,10 @@ $small-breakpoint: 960px;
     font-weight: 400;
     font-size: 16px;
     line-height: 30px;
-    color: $ui-primary-color;
+    color: $darker-text-color;
 
     a {
-      color: $ui-highlight-color;
+      color: $highlight-text-color;
       text-decoration: underline;
     }
   }
@@ -980,7 +980,7 @@ $small-breakpoint: 960px;
   .footer-links {
     padding-bottom: 50px;
     text-align: right;
-    color: $ui-base-lighter-color;
+    color: $darker-text-color;
 
     p {
       font-size: 14px;
@@ -995,7 +995,7 @@ $small-breakpoint: 960px;
   &__footer {
     margin-top: 10px;
     text-align: center;
-    color: $ui-base-lighter-color;
+    color: $darker-text-color;
 
     p {
       font-size: 14px;