From 4d484153aca9e584279ff0795559878b15a1ac01 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 31 May 2020 15:17:10 -0500
Subject: [PATCH] More SCSS variable replacements

---
 app/soapbox/reducers/theme.js                 |  9 +-
 app/styles/soapbox-light/diff.scss            | 12 +--
 app/styles/soapbox/about.scss                 |  2 +-
 app/styles/soapbox/accounts.scss              |  2 +-
 app/styles/soapbox/components.scss            | 90 +++++++++----------
 .../soapbox/components/compose-form.scss      |  4 +-
 .../soapbox/components/detailed-status.scss   |  4 +-
 .../soapbox/components/hotkeys-modal.scss     |  2 +-
 app/styles/soapbox/components/modal.scss      |  6 +-
 app/styles/soapbox/containers.scss            |  6 +-
 app/styles/soapbox/dashboard.scss             |  2 +-
 app/styles/soapbox/emoji_picker.scss          |  2 +-
 app/styles/soapbox/forms.scss                 |  4 +-
 app/styles/soapbox/introduction.scss          |  4 +-
 app/styles/soapbox/stream_entries.scss        |  2 +-
 app/styles/soapbox/widgets.scss               |  6 +-
 webpack/config/themes.yml                     |  6 --
 17 files changed, 79 insertions(+), 84 deletions(-)

diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 8d70d9cdf..bcb1c7275 100644
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@@ -12,12 +12,19 @@ const cssrgba = (color, a) => {
   return `rgba(${[r, g, b, a].join(',')})`;
 };
 
+const makeContrast = (percent, color, mode) => {
+  percent = mode === 'light' ? -percent : percent;
+  return brightness(percent, color);
+};
+
 export const generateTheme = (brandColor, mode) => {
   return ImmutableMap({
     'brand-color': brandColor,
     'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
     'brand-color-faint': cssrgba(brandColor, 0.1),
-    'highlight-text-color': brandColor,
+    'brand-color-med': cssrgba(brandColor, 0.2),
+    'highlight-text-color': makeContrast(10, brandColor, mode).hex,
+    'brand-color-hicontrast': makeContrast(20, brandColor, mode).hex,
   });
 };
 
diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index e176decfb..f5a093dad 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -80,12 +80,7 @@ body {
 }
 
 .focusable:focus .status.status-direct {
-  background: lighten($ui-base-color, 8%);
-}
-
-.detailed-status,
-.detailed-status__action-bar {
-  background: darken($ui-base-color, 6%);
+  background: var(--brand-color-med);
 }
 
 // Change the background colors of status__content__spoiler-link
@@ -132,7 +127,6 @@ body {
 
   &__item {
     a {
-      background: $ui-base-color;
       color: $darker-text-color;
     }
   }
@@ -228,7 +222,7 @@ body {
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
-  border-bottom-color: lighten($ui-base-color, 8%);
+  border-bottom-color: var(--brand-color-med);
 }
 
 .activity-stream {
@@ -238,7 +232,7 @@ body {
     .detailed-status.light,
     .more.light,
     .status.light {
-      border-bottom-color: lighten($ui-base-color, 8%);
+      border-bottom-color: var(--brand-color-med);
     }
   }
 
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 2bcf4bc2f..33797855f 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -928,7 +928,7 @@ $small-breakpoint: 960px;
       .hero-widget,
       .box-widget,
       .directory__tag {
-        border-bottom: 1px solid lighten($ui-base-color, 8%);
+        border-bottom: 1px solid var(--brand-color-med);
       }
 
       .directory {
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index 546f264f9..90325f1e6 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -13,7 +13,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: var(--brand-color-med);
       }
     }
   }
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index ace507cba..83f0e754e 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -391,7 +391,7 @@
   }
 
   a {
-    color: var(--brand-color);
+    color: var(--brand-color-hicontrast);
     text-decoration: none;
 
     &:hover {
@@ -453,7 +453,7 @@
   display: block;
   font-size: 15px;
   line-height: 20px;
-  color: var(--brand-color);
+  color: var(--highlight-text-color);
   border: 0;
   background: transparent;
   padding: 0;
@@ -491,7 +491,7 @@
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
 }
 
 .status__prepend-icon-wrapper {
@@ -514,7 +514,7 @@
 
     .detailed-status,
     .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
+      background: var(--brand-color-med);
     }
   }
 }
@@ -546,8 +546,8 @@
   }
 
   &.status-direct:not(.read) {
-    background: lighten($ui-base-color, 8%);
-    border-bottom-color: lighten($ui-base-color, 12%);
+    background: var(--brand-color-med);
+    border-bottom-color: var(--brand-color-med);
   }
 
   &.light {
@@ -730,13 +730,13 @@
   user-select: text;
 
   a {
-    color: $lighter-text-color;
+    color: var(--highlight-text-color);
   }
 }
 
 .domain {
   padding: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
 
   .domain__domain-name {
     flex: 1 1 auto;
@@ -762,7 +762,7 @@
   padding: 10px;
 
   &:not(:last-of-type) {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
   }
 
   &.compact {
@@ -859,7 +859,7 @@ a .account__avatar {
 
 .account__disclaimer {
   padding: 10px;
-  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--brand-color-med);
   color: $dark-text-color;
 
   strong {
@@ -886,8 +886,8 @@ a .account__avatar {
 }
 
 .account__action-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color-med);
   line-height: 36px;
   overflow: hidden;
   flex: 0 0 auto;
@@ -927,7 +927,7 @@ a .account__avatar {
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 100%;
-  border-right: 1px solid lighten($ui-base-color, 8%);
+  border-right: 1px solid var(--brand-color-med);
   padding: 10px 0;
   border-bottom: 4px solid transparent;
 
@@ -1640,7 +1640,7 @@ a.account__display-name {
   display: block;
   height: 42px;
   line-height: 42px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
   background: $gab-background-container;
 
   &--highlighted {
@@ -1739,7 +1739,7 @@ a.account__display-name {
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -1932,7 +1932,7 @@ a.account__display-name {
 }
 
 .column-link {
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   color: $primary-text-color;
   display: block;
   font-size: 16px;
@@ -2122,7 +2122,7 @@ a.account__display-name {
 .status-card {
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--brand-color-med);
   border-radius: 4px;
   color: $dark-text-color;
   margin-top: 14px;
@@ -2179,7 +2179,7 @@ a.status-card {
   cursor: pointer;
 
   &:hover {
-    background: lighten($ui-base-color, 8%);
+    background: var(--brand-color-med);
   }
 }
 
@@ -2231,7 +2231,7 @@ a.status-card {
 
 .status-card__image {
   flex: 0 0 100px;
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   position: relative;
 
   & > .fa {
@@ -2317,7 +2317,7 @@ a.status-card.compact:hover {
 }
 
 .load-gap {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
 }
 
 .regeneration-indicator {
@@ -2498,11 +2498,11 @@ a.status-card.compact:hover {
 
   &.active {
     color: $primary-text-color;
-    background: lighten($ui-base-color, 8%);
+    background: var(--brand-color-med);
 
     &:hover {
       color: $primary-text-color;
-      background: lighten($ui-base-color, 8%);
+      background: var(--brand-color-med);
     }
   }
 }
@@ -2617,7 +2617,7 @@ a.status-card.compact:hover {
   height: 42px;
   box-sizing: border-box;
   background-color: transparent;
-  border: 0 solid lighten($ui-base-color, 26%);
+  border: 0 solid var(--brand-color-med);
   border-width: 6px;
   border-radius: 50%;
 }
@@ -2634,11 +2634,11 @@ a.status-card.compact:hover {
   0% {
     width: 0;
     height: 0;
-    background-color: lighten($ui-base-color, 26%);
+    background-color: var(--brand-color-med);
   }
 
   29% {
-    background-color: lighten($ui-base-color, 26%);
+    background-color: var(--brand-color-med);
   }
 
   30% {
@@ -2756,13 +2756,13 @@ a.status-card.compact:hover {
 }
 
 .modal-container--preloader {
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
 }
 
 .account--panel {
   background: var(--brand-color-faint);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color-med);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -2775,7 +2775,7 @@ a.status-card.compact:hover {
 }
 
 .column-settings__outer {
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   padding: 15px;
 }
 
@@ -2808,7 +2808,7 @@ a.status-card.compact:hover {
     }
 
     &__multi-value {
-      background: lighten($ui-base-color, 8%);
+      background: var(--brand-color-med);
 
       &__remove {
         cursor: pointer;
@@ -2841,7 +2841,7 @@ a.status-card.compact:hover {
     }
 
     &__indicator-separator {
-      background-color: lighten($ui-base-color, 8%);
+      background-color: var(--brand-color-med);
     }
 
     &__menu {
@@ -3123,7 +3123,7 @@ a.status-card.compact:hover {
 
 .upload-progress {
   padding: 10px;
-  color: $lighter-text-color;
+  color: var(--highlight-text-color);
   overflow: hidden;
   display: flex;
 
@@ -3254,7 +3254,7 @@ a.status-card.compact:hover {
 
 .privacy-dropdown__option__content {
   flex: 1 1 auto;
-  color: $lighter-text-color;
+  color: var(--highlight-text-color);
 
   strong {
     font-weight: 500;
@@ -3366,7 +3366,7 @@ a.status-card.compact:hover {
 
   h5 {
     background: darken($ui-base-color, 4%);
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--brand-color-med);
     cursor: default;
     display: flex;
     padding: 15px;
@@ -3449,7 +3449,7 @@ a.status-card.compact:hover {
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--brand-color-med);
   border-radius: 4px;
   margin-top: 14px;
   overflow: hidden;
@@ -3459,7 +3459,7 @@ a.status-card.compact:hover {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-right: 1px solid lighten($ui-base-color, 8%);
+    border-right: 1px solid var(--brand-color-med);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -4029,7 +4029,7 @@ a.status-card.compact:hover {
 .notification__filter-bar,
 .account__section-headline {
   background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--brand-color-med);
   cursor: default;
   display: flex;
   flex-shrink: 0;
@@ -4067,7 +4067,7 @@ a.status-card.compact:hover {
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
-        border-color: transparent transparent lighten($ui-base-color, 8%);
+        border-color: transparent transparent var(--brand-color-med);
       }
 
       &::after {
@@ -4283,8 +4283,8 @@ noscript {
   padding: 14px 10px;
   padding-bottom: 16px;
   background: var(--brand-color-faint);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color-med);
 
   &__message {
     position: relative;
@@ -4441,7 +4441,7 @@ noscript {
 
   .list {
     padding: 4px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--brand-color-med);
   }
 
   .list__wrapper {
@@ -4561,7 +4561,7 @@ noscript {
     display: flex;
     align-items: center;
     padding: 15px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--brand-color-med);
 
     &:last-child {
       border-bottom: 0;
@@ -4731,7 +4731,7 @@ noscript {
   }
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--brand-color-med);
   }
 
   &__content {
@@ -4772,7 +4772,7 @@ noscript {
     }
 
     &__username {
-      color: $lighter-text-color;
+      color: var(--highlight-text-color);
       font-size: 12px;
       line-height: 14px;
     }
@@ -5174,7 +5174,7 @@ noscript {
   background-color: darken($ui-base-color, 8%);
   border-bottom: 1px solid;
   border-top: 1px solid;
-  border-color: darken($ui-base-color, 4%);
+  border-color: var(--brand-color-faint);
   transition: max-height 150ms ease;
   overflow: hidden;
 
diff --git a/app/styles/soapbox/components/compose-form.scss b/app/styles/soapbox/components/compose-form.scss
index 9649ba429..b112ec739 100644
--- a/app/styles/soapbox/components/compose-form.scss
+++ b/app/styles/soapbox/components/compose-form.scss
@@ -50,7 +50,7 @@
     }
 
     a {
-      color: $lighter-text-color;
+      color: var(--highlight-text-color);
       font-weight: 500;
       text-decoration: underline;
 
@@ -184,7 +184,7 @@
     width: 16px;
     height: 16px;
   }
-  .autosuggest-account .display-name__account {color: $lighter-text-color;}
+  .autosuggest-account .display-name__account {color: var(--highlight-text-color);}
 
   .compose-form__modifiers {
     color: $inverted-text-color;
diff --git a/app/styles/soapbox/components/detailed-status.scss b/app/styles/soapbox/components/detailed-status.scss
index 2f92fb90d..fe665967b 100644
--- a/app/styles/soapbox/components/detailed-status.scss
+++ b/app/styles/soapbox/components/detailed-status.scss
@@ -53,8 +53,8 @@
 
 .detailed-status__action-bar {
   background: var(--brand-color-faint);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color-med);
   display: flex;
   flex-direction: row;
 }
diff --git a/app/styles/soapbox/components/hotkeys-modal.scss b/app/styles/soapbox/components/hotkeys-modal.scss
index fe3078fef..d6f47b648 100644
--- a/app/styles/soapbox/components/hotkeys-modal.scss
+++ b/app/styles/soapbox/components/hotkeys-modal.scss
@@ -43,7 +43,7 @@
     kbd {
       display: inline-block;
       padding: 2px 8px;
-      background-color: lighten($ui-base-color, 8%);
+      background-color: var(--brand-color-med);
       border: 1px solid darken($ui-base-color, 4%);
       border-radius: 4px;
     }
diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss
index 4738721fe..00089f461 100644
--- a/app/styles/soapbox/components/modal.scss
+++ b/app/styles/soapbox/components/modal.scss
@@ -240,7 +240,7 @@
 
   .onboarding-modal__nav,
   .error-modal__nav {
-    color: $lighter-text-color;
+    color: var(--highlight-text-color);
     border: 0;
     font-size: 14px;
     font-weight: 500;
@@ -376,7 +376,7 @@
   & > div {
     flex: 1 1 auto;
     text-align: right;
-    color: $lighter-text-color;
+    color: var(--highlight-text-color);
     padding-right: 10px;
   }
 
@@ -563,7 +563,7 @@
   .confirmation-modal__cancel-button,
   .mute-modal__cancel-button {
     background-color: transparent;
-    color: $lighter-text-color;
+    color: var(--highlight-text-color);
     font-size: 14px;
     font-weight: 500;
 
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index a695ed792..2e3812582 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -769,7 +769,7 @@
   }
 
   .public-account-bio {
-    background: lighten($ui-base-color, 8%);
+    background: var(--brand-color-med);
     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
     border-radius: 4px;
     overflow: hidden;
@@ -851,13 +851,13 @@
 
     @media screen and (max-width: $no-gap-breakpoint) {
       margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 8%);
+      border-top: 1px solid var(--brand-color-med);
 
       & > div {
         width: 100%;
         padding: 0;
         margin-bottom: 0;
-        border-bottom: 1px solid lighten($ui-base-color, 8%);
+        border-bottom: 1px solid var(--brand-color-med);
 
         &:last-child {
           border-bottom: 0;
diff --git a/app/styles/soapbox/dashboard.scss b/app/styles/soapbox/dashboard.scss
index 0b30ea84d..c92abd543 100644
--- a/app/styles/soapbox/dashboard.scss
+++ b/app/styles/soapbox/dashboard.scss
@@ -25,7 +25,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: var(--brand-color-med);
       }
     }
   }
diff --git a/app/styles/soapbox/emoji_picker.scss b/app/styles/soapbox/emoji_picker.scss
index fb697a6d9..51439dab9 100644
--- a/app/styles/soapbox/emoji_picker.scss
+++ b/app/styles/soapbox/emoji_picker.scss
@@ -36,7 +36,7 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
-  color: $lighter-text-color;
+  color: var(--highlight-text-color);
   line-height: 0;
 }
 
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 7d6982602..b19e6109b 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -525,7 +525,7 @@ code {
 }
 
 .flash-message {
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   color: $darker-text-color;
   border-radius: 4px;
   padding: 15px 10px;
@@ -896,7 +896,7 @@ code {
   }
 
   &__connection {
-    background-color: lighten($ui-base-color, 8%);
+    background-color: var(--brand-color-med);
     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
     border-radius: 4px;
     padding: 25px 10px;
diff --git a/app/styles/soapbox/introduction.scss b/app/styles/soapbox/introduction.scss
index 9847b78f5..aaa86ffa9 100644
--- a/app/styles/soapbox/introduction.scss
+++ b/app/styles/soapbox/introduction.scss
@@ -98,7 +98,7 @@
         display: inline-block;
         background: darken($ui-base-color, 8%);
         font-size: 15px;
-        border: 1px solid lighten($ui-base-color, 8%);
+        border: 1px solid var(--brand-color-med);
         border-radius: 2px;
         padding: 1px 3px;
       }
@@ -132,7 +132,7 @@
     cursor: pointer;
 
     &:hover {
-      background: lighten($ui-base-color, 8%);
+      background: var(--brand-color-med);
     }
 
     &.active {
diff --git a/app/styles/soapbox/stream_entries.scss b/app/styles/soapbox/stream_entries.scss
index bfbb907e0..6f3ad94fb 100644
--- a/app/styles/soapbox/stream_entries.scss
+++ b/app/styles/soapbox/stream_entries.scss
@@ -69,7 +69,7 @@
   }
 
   &--highlighted .entry {
-    background: lighten($ui-base-color, 8%);
+    background: var(--brand-color-med);
   }
 }
 
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index 3b2343104..f0cc02332 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -229,7 +229,7 @@
 }
 
 .page-header {
-  background: lighten($ui-base-color, 8%);
+  background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   border-radius: 4px;
   padding: 60px 15px;
@@ -285,7 +285,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: lighten($ui-base-color, 8%);
+        background: var(--brand-color-med);
       }
     }
 
@@ -395,7 +395,7 @@
   tbody td {
     padding: 15px 0;
     vertical-align: middle;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--brand-color-med);
   }
 
   tbody tr:last-child td {
diff --git a/webpack/config/themes.yml b/webpack/config/themes.yml
index 4de35a710..17dc07cd3 100644
--- a/webpack/config/themes.yml
+++ b/webpack/config/themes.yml
@@ -1,8 +1,2 @@
 azure: styles/azure.scss
-purple: styles/soapbox-light.scss
 purple-dark: styles/application.scss
-purple-contrast: styles/contrast.scss
-halloween: styles/halloween.scss
-aquatic: styles/neenster.scss
-paleblue: styles/glinner.scss
-lime: styles/lime.scss