Color replace --brand-color-med

app/soapbox/reducers/theme.js

@@ -24,7 +24,7 @@ export const generateTheme = (brandColor, mode) => {
     'brand-color-faint': cssrgba(brandColor, 0.1),
     'brand-color-med': cssrgba(brandColor, 0.2),
     'highlight-text-color': makeContrast(5, brandColor, mode).hex,
-    'brand-color-hicontrast': makeContrast(20, brandColor, mode).hex,
+    'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex,
   });
 };
 

app/styles/soapbox-light/diff.scss

@@ -95,10 +95,6 @@ body {
   background: $ui-base-color;
 }
 
-.account-gallery__item a {
-  background-color: $ui-base-color;
-}
-
 // Change the colors used in the dropdown menu
 .dropdown-menu {
   &__item {

app/styles/soapbox/about.scss

@@ -170,7 +170,7 @@ $small-breakpoint: 960px;
 }
 
 .information-board {
-  background: darken($ui-base-color, 4%);
+  background: var(--brand-color-med);
   padding: 20px 0;
 
   .container-alt {
@@ -428,7 +428,7 @@ $small-breakpoint: 960px;
   }
 
   &__call-to-action {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border-radius: 4px;
     padding: 25px 40px;
     overflow: hidden;

app/styles/soapbox/basics.scss

@@ -85,7 +85,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     position: fixed;
     width: 100%;
     height: 100%;

app/styles/soapbox/components.scss

@@ -25,11 +25,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: auto;
+  transition: 0.2s;
 
   &:active,
   &:focus,
   &:hover {
-    background-color: lighten($ui-highlight-color, 10%);
+    background-color: var(--brand-color-hicontrast);
   }
 
   &--destructive {
@@ -391,7 +392,7 @@
   }
 
   a {
-    color: var(--brand-color-hicontrast);
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover {
@@ -548,6 +549,10 @@
   &.status-direct:not(.read) {
     background: var(--brand-color-med);
     border-bottom-color: var(--brand-color-med);
+
+    .status__content a {
+      color: var(--brand-color-hicontrast);
+    }
   }
 
   &.light {
@@ -796,7 +801,7 @@
 .account__avatar {
   @include avatar-radius;
   position: relative;
-  background-color: var(--accent-color);
+  background-color: var(--brand-color-faint);
 
   &-inline {
     display: inline-block;
@@ -3366,7 +3371,7 @@ a.status-card.compact:hover {
   margin-bottom: 5px;
 
   h5 {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border-bottom: 1px solid var(--brand-color-med);
     cursor: default;
     display: flex;
@@ -4018,6 +4023,10 @@ a.status-card.compact:hover {
   overflow: hidden;
   margin: 2px;
 
+  a {
+    background: var(--brand-color-faint);
+  }
+
   &__icons {
     position: absolute;
     top: 50%;
@@ -4029,14 +4038,14 @@ a.status-card.compact:hover {
 
 .notification__filter-bar,
 .account__section-headline {
-  background: darken($ui-base-color, 4%);
+  background: var(--brand-color-med);
   border-bottom: 1px solid var(--brand-color-med);
   cursor: default;
   display: flex;
   flex-shrink: 0;
 
   button {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border: 0;
     margin: 0;
   }
@@ -4546,7 +4555,7 @@ noscript {
   &__header {
     color: $dark-text-color;
     background: lighten($ui-base-color, 2%);
-    border-bottom: 1px solid darken($ui-base-color, 4%);
+    border-bottom: 1px solid var(--brand-color-med);
     font-weight: 500;
     padding: 15px;
     font-size: 16px;

app/styles/soapbox/components/account-header.scss

@@ -18,7 +18,7 @@
     overflow: hidden;
     height: 350px;
     position: relative;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
 

app/styles/soapbox/components/hotkeys-modal.scss

@@ -44,7 +44,7 @@
       display: inline-block;
       padding: 2px 8px;
       background-color: var(--brand-color-med);
-      border: 1px solid darken($ui-base-color, 4%);
+      border: 1px solid var(--brand-color-med);
       border-radius: 4px;
     }
   }

app/styles/soapbox/forms.scss

@@ -864,7 +864,7 @@ code {
   margin-bottom: 25px;
 
   .fa-link {
-    background-color: darken($ui-base-color, 4%);
+    background-color: var(--brand-color-med);
     border-radius: 100%;
     font-size: 24px;
     padding: 10px;
@@ -904,7 +904,7 @@ code {
     text-align: center;
 
     &::after {
-      background-color: darken($ui-base-color, 4%);
+      background-color: var(--brand-color-med);
       content: '';
       display: block;
       height: 100%;

app/styles/soapbox/tables.scss

@@ -11,7 +11,7 @@
     vertical-align: top;
     border-top: 1px solid $ui-base-color;
     text-align: left;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
   }
 
   & > thead > tr > th {
@@ -183,7 +183,7 @@ a.table-action-link {
   &__row {
     border: 1px solid darken($ui-base-color, 8%);
     border-top: 0;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       &:first-child {