Various color variable replacements

app/styles/components.scss

@@ -423,10 +423,11 @@
   }
 
   .status__content__spoiler-link {
-    background: $action-button-color;
+    background: var(--brand-color-med);
+    transition: 0.2s;
 
     &:hover {
-      background: lighten($action-button-color, 7%);
+      background: var(--brand-color-faint);
       text-decoration: none;
     }
 
@@ -1565,7 +1566,7 @@ a.account__display-name {
   &:hover,
   &:focus,
   &:active {
-    background-color: darken($nav-ui-highlight-color, 10%) !important;
+    background-color: var(--brand-color-hicontrast);
   }
 
   i.fa {
@@ -2602,7 +2603,7 @@ a.status-card.compact:hover {
 }
 
 .loading-indicator {
-  color: $dark-text-color;
+  color: var(--primary-text-color-faint);
   font-size: 12px;
   font-weight: 400;
   text-transform: uppercase;
@@ -4880,9 +4881,10 @@ noscript {
   }
 
   &__close {
-  position: absolute;
-  right: 10px;
-  top: 10px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    color: #999;
   }
 
   &__content {
@@ -5190,7 +5192,6 @@ noscript {
   width: 100%;
   max-height: 46px;
   position: relative;
-  background-color: var(--brand-color-faint);
   border-bottom: 1px solid;
   border-top: 1px solid;
   border-color: var(--brand-color-faint);

app/styles/components/account-header.scss

@@ -49,7 +49,7 @@
     border-radius: 50%;
     height: 200px;
     width: 200px;
-    background-color: darken($ui-base-color, 8%);
+    background-color: var(--foreground-color);
 
     // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
     .account__avatar {
@@ -57,6 +57,7 @@
       height: 200px;
       background-size: 200px 200px;
     }
+
     @media screen and (max-width: 895px) {
       top: -45px;
       left: 10px;

app/styles/components/compose-form.scss

@@ -98,7 +98,7 @@
     width: 100%;
     margin: 0;
     color: $inverted-text-color;
-    background: $gab-background-base-light;
+    background: #f2f2f2;
     padding: 10px;
     font-family: inherit;
     font-size: 14px;

app/styles/forms.scss

@@ -318,10 +318,11 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%);
-    border: 1px solid darken($ui-base-color, 14%);
+    background: var(--foreground-color);
+    border: 1px solid var(--brand-color-faint);
     border-radius: 4px;
     padding: 10px;
+    transition: 0.2s;
 
     &:invalid {
       box-shadow: none;
@@ -335,14 +336,9 @@ code {
       border-color: $valid-value-color;
     }
 
-    &:hover {
-      border-color: darken($ui-base-color, 20%);
-    }
-
     &:active,
     &:focus {
       border-color: var(--highlight-text-color);
-      background: darken($ui-base-color, 8%);
     }
   }
 
@@ -439,8 +435,8 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($ui-base-color, 14%);
+    background: var(--foreground-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px;
+    border: 1px solid var(--brand-color-faint);
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 30px;