From 80ddf656d83d3899fb9293af34288fe3e46e10ab Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 6 Jun 2020 22:55:00 -0500
Subject: [PATCH] Theming: RGB --> HSL

---
 app/soapbox/utils/theme.js                    | 11 +--
 app/styles/_mixins.scss                       |  8 +-
 app/styles/about.scss                         | 98 +++++++++----------
 app/styles/accounts.scss                      | 64 ++++++------
 app/styles/basics.scss                        | 16 +--
 app/styles/boost.scss                         |  6 +-
 app/styles/compact_header.scss                |  4 +-
 app/styles/components/account-header.scss     | 16 +--
 app/styles/components/buttons.scss            | 10 +-
 app/styles/components/columns.scss            | 52 +++++-----
 app/styles/components/compose-form.scss       | 26 ++---
 app/styles/components/detailed-status.scss    | 14 +--
 app/styles/components/drawer.scss             |  4 +-
 app/styles/components/dropdown-menu.scss      |  2 +-
 app/styles/components/error-boundary.scss     |  2 +-
 app/styles/components/getting-started.scss    | 10 +-
 app/styles/components/group-card.scss         |  2 +-
 app/styles/components/group-form.scss         |  2 +-
 .../components/group-sidebar-panel.scss       |  2 +-
 app/styles/components/hotkeys-modal.scss      |  4 +-
 app/styles/components/inputs.scss             |  4 +-
 app/styles/components/list-forms.scss         |  2 +-
 app/styles/components/media-gallery.scss      |  4 +-
 app/styles/components/media-spoiler.scss      |  2 +-
 app/styles/components/modal.scss              | 28 +++---
 app/styles/components/navigation-bar.scss     |  4 +-
 app/styles/components/notification.scss       |  4 +-
 app/styles/components/profile-info-panel.scss |  6 +-
 app/styles/components/promo-panel.scss        |  4 +-
 app/styles/components/react-toggle.scss       |  6 +-
 app/styles/components/reply-indicator.scss    |  4 +-
 app/styles/components/search.scss             | 12 +--
 app/styles/components/setting-toggle.scss     |  2 +-
 app/styles/components/sidebar-menu.scss       | 12 +--
 app/styles/components/status.scss             | 46 ++++-----
 app/styles/components/tabs-bar.scss           |  2 +-
 .../components/timeline-queue-header.scss     |  2 +-
 app/styles/components/trends.scss             | 10 +-
 app/styles/components/user-panel.scss         |  6 +-
 app/styles/components/video-player.scss       |  4 +-
 app/styles/components/wtf-panel.scss          |  4 +-
 app/styles/containers.scss                    |  2 +-
 app/styles/dashboard.scss                     |  6 +-
 app/styles/donations.scss                     |  2 +-
 app/styles/emoji_picker.scss                  | 12 +--
 app/styles/footer.scss                        |  2 +-
 app/styles/forms.scss                         | 40 ++++----
 app/styles/introduction.scss                  |  6 +-
 app/styles/loading.scss                       | 14 +--
 app/styles/polls.scss                         | 12 +--
 app/styles/rtl.scss                           |  4 +-
 app/styles/stream_entries.scss                |  8 +-
 app/styles/tables.scss                        | 20 ++--
 app/styles/themes.scss                        | 81 +++++++--------
 app/styles/ui.scss                            | 48 ++++-----
 app/styles/widgets.scss                       | 46 ++++-----
 package.json                                  |  1 +
 yarn.lock                                     | 18 ++++
 58 files changed, 428 insertions(+), 415 deletions(-)

diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index d0bb42ef8..4d0205c56 100644
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.js
@@ -1,6 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-
-const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`);
+import hexToHsl from 'hex-to-hsl';
 
 export const generateThemeCss = brandColor => {
   if (!brandColor) return null;
@@ -8,11 +7,11 @@ export const generateThemeCss = brandColor => {
 };
 
 export const brandColorToThemeData = brandColor => {
-  const [ r, g, b ] = hex2rgb(brandColor);
+  const [ h, s, l ] = hexToHsl(brandColor);
   return ImmutableMap({
-    'brand-color-r': r,
-    'brand-color-g': g,
-    'brand-color-b': b,
+    'brand-color_h': h,
+    'brand-color_s': `${s}%`,
+    'brand-color_l': `${l}%`,
   });
 };
 
diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 086627589..0fb142bd7 100644
--- a/app/styles/_mixins.scss
+++ b/app/styles/_mixins.scss
@@ -49,9 +49,9 @@
   padding-left: 15px;
 
   // Chrome does not like these concatinated together
-  &::placeholder {color: var(--primary-text-color-faint);}
-  &:-ms-input-placeholder {color: var(--primary-text-color-faint);}
-  &::-ms-input-placeholder {color: var(--primary-text-color-faint);}
+  &::placeholder {color: var(--primary-text-color--faint);}
+  &:-ms-input-placeholder {color: var(--primary-text-color--faint);}
+  &::-ms-input-placeholder {color: var(--primary-text-color--faint);}
 
   &::-moz-focus-inner {
     border: 0;
@@ -72,7 +72,7 @@
   border-radius: 6px;
   padding: 8px 10px 17px;
   margin: 4px 0 0;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
 
   h4 {
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 18c3566fd..e24e39086 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -93,7 +93,7 @@ $small-breakpoint: 960px;
 
             a {
               padding: 4px;
-              background-color: var(--brand-color-med);
+              background-color: var(--brand-color--med);
             }
           }
 
@@ -160,7 +160,7 @@ $small-breakpoint: 960px;
       }
 
       &--hollow {
-        background-color: var(--brand-color-med);
+        background-color: var(--brand-color--med);
 
         &:hover,
         &:focus,
@@ -237,7 +237,7 @@ $small-breakpoint: 960px;
       }
 
       .logo-button {
-        background-color: var(--primary-text-color-faint);
+        background-color: var(--primary-text-color--faint);
       }
     }
 
@@ -309,7 +309,7 @@ $small-breakpoint: 960px;
       &::before {
         content: "";
         display: block;
-        background: var(--brand-color-faint);
+        background: var(--brand-color--faint);
         position: absolute;
         bottom: 0;
         left: 0;
@@ -332,14 +332,14 @@ $small-breakpoint: 960px;
           height: 100%;
           margin: 0;
           border-radius: 50%;
-          border: 4px solid var(--brand-color-faint);
+          border: 4px solid var(--brand-color--faint);
           background: var(--background-color);
         }
       }
 
       @media screen and (max-width: 600px) {
         margin-top: 0;
-        background: var(--brand-color-faint);
+        background: var(--brand-color--faint);
         border-radius: 0 0 4px 4px;
         padding: 5px;
 
@@ -418,7 +418,7 @@ $small-breakpoint: 960px;
             text-shadow: none;
 
             small {
-              color: var(--primary-text-color-faint);
+              color: var(--primary-text-color--faint);
             }
           }
         }
@@ -446,9 +446,9 @@ $small-breakpoint: 960px;
           width: 33.3%;
           box-sizing: border-box;
           flex: 0 0 auto;
-          color: var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
           padding: 10px;
-          border-right: 1px solid var(--brand-color-faint);
+          border-right: 1px solid var(--brand-color--faint);
           cursor: default;
           text-align: center;
           position: relative;
@@ -480,7 +480,7 @@ $small-breakpoint: 960px;
             }
 
             &.inactive::after {
-              border-bottom-color: var(--primary-text-color-faint);
+              border-bottom-color: var(--primary-text-color--faint);
             }
           }
 
@@ -532,7 +532,7 @@ $small-breakpoint: 960px;
         margin: 0 -5px;
 
         .account__header__fields {
-          border-top: 1px solid var(--brand-color-med);
+          border-top: 1px solid var(--brand-color--med);
         }
 
         .roles {
@@ -543,11 +543,11 @@ $small-breakpoint: 960px;
       &__links {
         margin-top: -15px;
         font-size: 14px;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
 
         a {
           display: inline-block;
-          color: var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
           text-decoration: none;
           padding: 15px;
           font-weight: 500;
@@ -579,7 +579,7 @@ $small-breakpoint: 960px;
   }
 
   .public-account-bio {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
     border-radius: 4px;
     overflow: hidden;
@@ -618,7 +618,7 @@ $small-breakpoint: 960px;
     .roles {
       padding: 20px;
       font-size: 14px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     .roles {
@@ -661,25 +661,25 @@ $small-breakpoint: 960px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
       margin: 0;
-      border-top: 1px solid var(--brand-color-med);
+      border-top: 1px solid var(--brand-color--med);
 
       & > div {
         width: 100%;
         padding: 0;
         margin-bottom: 0;
-        border-bottom: 1px solid var(--brand-color-med);
+        border-bottom: 1px solid var(--brand-color--med);
 
         &:last-child {
           border-bottom: 0;
         }
 
         .card__bar {
-          background: var(--brand-color-med);
+          background: var(--brand-color--med);
 
           &:hover,
           &:active,
           &:focus {
-            background: var(--brand-color-faint);
+            background: var(--brand-color--faint);
           }
         }
       }
@@ -705,7 +705,7 @@ $small-breakpoint: 960px;
   font-weight: 400;
   font-size: 16px;
   line-height: 30px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   max-width: 600px;
   padding: 15px 30px;
 
@@ -729,7 +729,7 @@ $small-breakpoint: 960px;
     font-weight: 400;
     font-size: 16px;
     line-height: 30px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     a {
       color: var(--highlight-text-color);
@@ -754,7 +754,7 @@ $small-breakpoint: 960px;
     margin-top: 2em;
     margin-bottom: 1.25em;
     font-weight: 500;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   hr + {
@@ -841,7 +841,7 @@ $small-breakpoint: 960px;
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
+    border-bottom: 1px solid hsla(var(--background-color_hsl), .6);
     margin: 2em 0;
 
     &.spacer {
@@ -852,7 +852,7 @@ $small-breakpoint: 960px;
 }
 
 .information-board {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   padding: 20px 0;
 
   .container-alt {
@@ -882,7 +882,7 @@ $small-breakpoint: 960px;
 
     span {
       &:last-child {
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
     }
 
@@ -914,10 +914,10 @@ $small-breakpoint: 960px;
       font-size: 14px;
       line-height: 24px;
       font-weight: 500;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       padding-bottom: 5px;
       margin-bottom: 15px;
-      border-bottom: 1px solid var(--brand-color-faint);
+      border-bottom: 1px solid var(--brand-color--faint);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -968,7 +968,7 @@ $small-breakpoint: 960px;
 
       .username {
         display: block;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
     }
   }
@@ -983,7 +983,7 @@ $small-breakpoint: 960px;
     font-size: 16px;
     line-height: 30px;
     margin-bottom: 12px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     a {
       color: var(--highlight-text-color);
@@ -1009,7 +1009,7 @@ $small-breakpoint: 960px;
     line-height: 30px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     small {
       font-family: var(--font-sans-serif), sans-serif;
@@ -1026,7 +1026,7 @@ $small-breakpoint: 960px;
     line-height: 26px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   h3 {
@@ -1035,7 +1035,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   h4 {
@@ -1044,7 +1044,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   h5 {
@@ -1053,7 +1053,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   h6 {
@@ -1062,7 +1062,7 @@ $small-breakpoint: 960px;
     line-height: 24px;
     font-weight: 500;
     margin-bottom: 20px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   ul,
@@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
+    border-bottom: 1px solid hsla(var(--background-color_hsl), .6);
     margin: 20px 0;
 
     &.spacer {
@@ -1110,7 +1110,7 @@ $small-breakpoint: 960px;
   }
 
   &__call-to-action {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     border-radius: 4px;
     padding: 25px 40px;
     overflow: hidden;
@@ -1231,7 +1231,7 @@ $small-breakpoint: 960px;
   &__forms,
   #soapbox-timeline {
     box-sizing: border-box;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     border-radius: 4px;
     box-shadow: 0 0 6px rgba(#000000, 0.1);
   }
@@ -1263,7 +1263,7 @@ $small-breakpoint: 960px;
     }
 
     p a {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     h1 {
@@ -1272,10 +1272,10 @@ $small-breakpoint: 960px;
       margin-bottom: 0;
 
       small {
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
 
         span {
-          color: var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
         }
       }
     }
@@ -1386,7 +1386,7 @@ $small-breakpoint: 960px;
         &:focus,
         &:active {
           background: var(--brand-color);
-          filter: var(--accent-filter-hover);
+          filter: var(--accent-filter--hover);
         }
       }
     }
@@ -1422,7 +1422,7 @@ $small-breakpoint: 960px;
 
       .simple_form {
         padding: 20px;
-        background-color: var(--brand-color-faint);
+        background-color: var(--brand-color--faint);
       }
     }
 
@@ -1500,7 +1500,7 @@ $small-breakpoint: 960px;
       text-transform: uppercase;
       font-weight: 700;
       font-size: 13px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &__text {
@@ -1509,7 +1509,7 @@ $small-breakpoint: 960px;
     }
 
     &__footer {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
       padding: 10px;
       border-radius: 0 0 4px 4px;
       display: flex;
@@ -1547,14 +1547,14 @@ $small-breakpoint: 960px;
 
       span {
         font-size: 14px;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
     }
   }
 
   .simple_form .user_agreement .label_input > label {
     font-weight: 400;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   .simple_form p.lead {
@@ -1621,7 +1621,7 @@ $small-breakpoint: 960px;
       .hero-widget,
       .box-widget,
       .directory__tag {
-        border-bottom: 1px solid var(--brand-color-med);
+        border-bottom: 1px solid var(--brand-color--med);
       }
 
       .directory {
@@ -1702,7 +1702,7 @@ $small-breakpoint: 960px;
 }
 
 .about-page {
-  background: var(--brand-color-faint);
+  background: var(--brand-color--faint);
   border-radius: inherit;
 }
 
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 30528f2dd..ccfe298eb 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -13,7 +13,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--brand-color-med);
+        background: var(--brand-color--med);
       }
     }
   }
@@ -48,7 +48,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
     border-radius: 0 0 4px 4px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
@@ -87,7 +87,7 @@
       span {
         display: block;
         font-size: 14px;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
         font-weight: 400;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -130,7 +130,7 @@
   .older,
   .newer {
     text-transform: uppercase;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   .older {
@@ -173,9 +173,9 @@
 }
 
 .nothing-here {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -206,8 +206,8 @@
   line-height: 12px;
   font-weight: 500;
   color: var(--background-color);
-  background-color: rgba(var(--background-color-rgb), 0.1);
-  border: 1px solid rgba(var(--background-color-rgb), 0.5);
+  background-color: hsla(var(--background-color_hsl), 0.1);
+  border: 1px solid hsla(var(--background-color_hsl), 0.5);
 
   &.moderator {
     color: $success-green;
@@ -226,14 +226,14 @@
   padding: 0;
   margin: 15px -15px -15px;
   border: 0 none;
-  border-top: 1px solid var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  border-top: 1px solid var(--brand-color--med);
+  border-bottom: 1px solid var(--brand-color--med);
   font-size: 14px;
   line-height: 20px;
 
   dl {
     display: flex;
-    border-bottom: 1px solid var(--brand-color-med);
+    border-bottom: 1px solid var(--brand-color--med);
   }
 
   dt,
@@ -251,13 +251,13 @@
     font-weight: 500;
     width: 120px;
     flex: 0 0 auto;
-    color: var(--primary-text-color-faint);
-    background: rgba(var(--background-color-rgb), 0.5);
+    color: var(--primary-text-color--faint);
+    background: hsla(var(--background-color_hsl), 0.5);
   }
 
   dd {
     flex: 1 1 auto;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   a {
@@ -296,7 +296,7 @@
 
 .pending-account {
   &__header {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     a {
       color: var(--background-color);
@@ -324,7 +324,7 @@
   padding: 10px;
 
   &:not(:last-of-type) {
-  border-bottom: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color--med);
   }
 
   &.compact {
@@ -339,7 +339,7 @@
   .account__display-name {
     flex: 1 1 auto;
     display: block;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -358,7 +358,7 @@
 .account__avatar {
   @include avatar-radius;
   position: relative;
-  background-color: var(--brand-color-faint);
+  background-color: var(--brand-color--faint);
 
   &-inline {
     display: inline-block;
@@ -415,13 +415,13 @@ a .account__avatar {
 
 .account__reciprocal_follow_message {
   padding: 0 5px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   text-align: center;
 }
 
 .account__disclaimer {
   padding: 10px;
-  border-top: 1px solid var(--brand-color-med);
+  border-top: 1px solid var(--brand-color--med);
   color: var(--primary-text-color);
 
   strong {
@@ -448,8 +448,8 @@ a .account__avatar {
 }
 
 .account__action-bar {
-  border-top: 1px solid var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  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;
@@ -489,7 +489,7 @@ a .account__avatar {
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 100%;
-  border-right: 1px solid var(--brand-color-med);
+  border-right: 1px solid var(--brand-color--med);
   padding: 10px 0;
   border-bottom: 4px solid transparent;
 
@@ -501,7 +501,7 @@ a .account__avatar {
     display: block;
     text-transform: uppercase;
     font-size: 11px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   strong {
@@ -558,7 +558,7 @@ a .account__avatar {
   margin: 2px;
 
   a {
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
   }
 
   &__icons {
@@ -571,16 +571,16 @@ a .account__avatar {
 }
 
 .account--panel {
-  background: var(--brand-color-faint);
-  border-top: 1px solid var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  background: var(--brand-color--faint);
+  border-top: 1px solid var(--brand-color--med);
+  border-bottom: 1px solid var(--brand-color--med);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
 }
 
 .account__section-headline {
-  background: var(--brand-color-faint);
+  background: var(--brand-color--faint);
 
   button,
   a {
@@ -601,9 +601,9 @@ a .account__avatar {
 .account__moved-note {
   padding: 14px 10px;
   padding-bottom: 16px;
-  background: var(--brand-color-faint);
-  border-top: 1px solid var(--brand-color-med);
-  border-bottom: 1px solid var(--brand-color-med);
+  background: var(--brand-color--faint);
+  border-top: 1px solid var(--brand-color--med);
+  border-bottom: 1px solid var(--brand-color--med);
 
   &__message {
     position: relative;
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 2393273b7..d7f531394 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -53,7 +53,7 @@ body {
   }
 
   &.lighter {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
   }
 
   &.with-modals {
@@ -71,7 +71,7 @@ body {
   }
 
   &.embed {
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
     margin: 0;
     padding-bottom: 0;
 
@@ -84,7 +84,7 @@ body {
   }
 
   &.admin {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     position: fixed;
     width: 100%;
     height: 100%;
@@ -94,8 +94,8 @@ body {
   &.error {
     position: absolute;
     text-align: center;
-    color: var(--primary-text-color-faint);
-    background: var(--brand-color-med);
+    color: var(--primary-text-color--faint);
+    background: var(--brand-color--med);
     width: 100%;
     height: 100%;
     padding: 0;
@@ -163,7 +163,7 @@ body {
   color: var(--primary-text-color);
   padding: 15px 20px;
   font-size: 14px;
-  background-color: var(--brand-color-faint);
+  background-color: var(--brand-color--faint);
   margin: 5px 20px;
   border-radius: 8px;
 
@@ -181,7 +181,7 @@ body {
   }
 
   a {
-    color: var(--brand-color-hicontrast);
+    color: var(--brand-color--hicontrast);
     text-decoration: none;
 
     &:hover {
@@ -202,7 +202,7 @@ noscript {
   div {
     font-size: 14px;
     margin: 30px auto;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     max-width: 400px;
 
     a {
diff --git a/app/styles/boost.scss b/app/styles/boost.scss
index 30365ea1c..2e68c718c 100644
--- a/app/styles/boost.scss
+++ b/app/styles/boost.scss
@@ -1,6 +1,6 @@
 button.icon-button {
   i.fa-retweet {
-    background: rgba(var(--primary-text-color-rgb), 0.4);
+    background: hsla(var(--primary-text-color_hsl), 0.4);
     mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='black' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='black' stroke-width='0'/></svg>");
   }
 
@@ -8,13 +8,13 @@ button.icon-button {
   &:active,
   &:focus {
     i.fa-retweet {
-      background: rgba(var(--primary-text-color-rgb), 0.6);
+      background: hsla(var(--primary-text-color_hsl), 0.6);
       transition: background-color 200ms ease-out;
     }
   }
 
   &.disabled i.fa-retweet {
-    background: rgba(var(--primary-text-color-rgb), 0.2);
+    background: hsla(var(--primary-text-color_hsl), 0.2);
     cursor: default;
   }
 
diff --git a/app/styles/compact_header.scss b/app/styles/compact_header.scss
index 71d5f9eb9..3f6fc003e 100644
--- a/app/styles/compact_header.scss
+++ b/app/styles/compact_header.scss
@@ -2,7 +2,7 @@
   h1 {
     font-size: 24px;
     line-height: 28px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     font-weight: 500;
     margin-bottom: 20px;
     padding: 0 10px;
@@ -20,7 +20,7 @@
 
     small {
       font-weight: 400;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     img {
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index a6fcb7d82..ce5bc26bb 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -18,7 +18,7 @@
     overflow: hidden;
     height: 350px;
     position: relative;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
 
@@ -36,14 +36,14 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     @media (min-width: 895px) {height: 74px;}
   }
 
   &__avatar {
     display: block;
     position: absolute;
-    border: 5px solid var(--brand-color-faint);
+    border: 5px solid var(--brand-color--faint);
     left: 0;
     top: -90px;
     border-radius: 50%;
@@ -100,7 +100,7 @@
       margin-left: auto;
 
       .icon-button {
-        border: 1px solid var(--brand-color-med);
+        border: 1px solid var(--brand-color--med);
         border-radius: 4px;
         box-sizing: content-box;
         padding: 2px;
@@ -116,7 +116,7 @@
     &__links {
       display: flex;
       font-size: 14px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       @media screen and (max-width: 895px) {
         justify-content: center;
         flex-wrap: wrap;
@@ -144,7 +144,7 @@
           }
 
           &:last-of-type {
-            color: var(--primary-text-color-faint);
+            color: var(--primary-text-color--faint);
             font-size: 12px;
             line-height: 14px;
             padding-top: 2px;
@@ -162,7 +162,7 @@
   @media screen and (max-width: 895px) {
     .account-mobile-container {
       display: block;
-      background: var(--brand-color-faint);
+      background: var(--brand-color--faint);
       margin-top: 10px;
       position: relative;
       padding: 10px 10px 0;
@@ -179,7 +179,7 @@
 }
 
 .account__header__content {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 14px;
   font-weight: 400;
   overflow: hidden;
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index 2e536aacc..049341f0d 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -34,7 +34,7 @@ button {
   &:active,
   &:focus,
   &:hover {
-    background-color: var(--brand-color-hicontrast);
+    background-color: var(--brand-color--hicontrast);
   }
 
   &--destructive {
@@ -57,7 +57,7 @@ button {
 
   &:disabled,
   &.disabled {
-    background-color: var(--brand-color-med);
+    background-color: var(--brand-color--med);
     cursor: default;
   }
 
@@ -83,17 +83,17 @@ button {
   }
 
   &.button-alternative-2 {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
 
     &:active,
     &:focus,
     &:hover {
-      background-color: var(--brand-color-faint);
+      background-color: var(--brand-color--faint);
     }
   }
 
   &.button-secondary {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     background: transparent;
     padding: 3px 15px;
     border: 1px solid var(--brand-color);
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 5201df929..cd83fa15c 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -203,7 +203,7 @@
 }
 
 .column-back-button {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
@@ -222,7 +222,7 @@
 }
 
 .column-header__back-button {
-  background: var(--brand-color-faint);
+  background: var(--brand-color--faint);
   border: 0;
   font-family: inherit;
   color: var(--highlight-text-color);
@@ -261,7 +261,7 @@
 }
 
 .column-link {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   color: var(--primary-text-color);
   display: block;
   font-size: 16px;
@@ -271,7 +271,7 @@
   &:hover,
   &:focus,
   &:active {
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
   }
 
   &:focus {
@@ -306,14 +306,14 @@
   font-size: 12px;
   line-height: 19px;
   font-weight: 500;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   padding: 4px 8px;
   margin: -6px 10px;
 }
 
 .column-subheading {
-  background: var(--brand-color-med);
-  color: var(--primary-text-color-faint);
+  background: var(--brand-color--med);
+  color: var(--primary-text-color--faint);
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 500;
@@ -343,7 +343,7 @@
       pointer-events: none;
       height: 28px;
       z-index: 1;
-      background: radial-gradient(ellipse, rgba(var(--brand-color), 0.23) 0%, rgba(var(--brand-color), 0) 60%);
+      background: radial-gradient(ellipse, hsla(var(--brand-color_hsl), 0.23) 0%, hsla(var(--brand-color_hsl), 0) 60%);
     }
   }
 }
@@ -382,7 +382,7 @@
 
     &.grouped {
       margin: 6px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &.active {
@@ -399,7 +399,7 @@
       display: block;
       position: absolute;
       width: 100%;
-      background-color: var(--brand-color-faint);
+      background-color: var(--brand-color--faint);
       filter: var(--accent-filter);
       border-radius: 10px;
       transition: 0.2s;
@@ -441,11 +441,11 @@
   }
 
   &.active {
-    box-shadow: 0 1px 0 rgba(var(--highlight-text-color), 0.3);
+    box-shadow: 0 1px 0 hsla(var(--highlight-text-color_hsl), 0.3);
 
     .column-header__icon {
       color: var(--highlight-text-color);
-      text-shadow: 0 0 10px rgba(var(--highlight-text-color), 0.4);
+      text-shadow: 0 0 10px hsla(var(--highlight-text-color_hsl), 0.4);
     }
   }
 
@@ -470,20 +470,20 @@
   border: 0;
   padding: 0 15px;
   font-size: 16px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   background: transparent;
 
   &:hover {
-    color: rgba(var(--primary-text-color-rgb), 0.8);
+    color: hsla(var(--primary-text-color_hsl), 0.8);
   }
 
   &.active {
     color: var(--primary-text-color);
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
 
     &:hover {
       color: var(--primary-text-color);
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
     }
   }
 }
@@ -492,7 +492,7 @@
   max-height: 70vh;
   overflow: hidden;
   overflow-y: auto;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   transition: max-height 150ms ease-in-out, opacity 300ms linear;
   opacity: 1;
 
@@ -509,7 +509,7 @@
     height: 0;
     background: transparent;
     border: 0;
-    border-top: 1px solid var(--brand-color-med);
+    border-top: 1px solid var(--brand-color--med);
     margin: 10px 0;
   }
 }
@@ -529,7 +529,7 @@
   }
 
   &:hover {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     text-decoration: underline;
   }
 }
@@ -558,12 +558,12 @@
 }
 
 .column-settings__outer {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   padding: 15px;
 }
 
 .column-settings__section {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   cursor: default;
   display: block;
   font-weight: 500;
@@ -591,7 +591,7 @@
     }
 
     &__multi-value {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
 
       &__remove {
         cursor: pointer;
@@ -599,7 +599,7 @@
         &:hover,
         &:active,
         &:focus {
-          background: var(--brand-color-med);
+          background: var(--brand-color--med);
           color: var(--primary-text-color);
         }
       }
@@ -607,7 +607,7 @@
 
     &__multi-value__label,
     &__input {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &__clear-indicator,
@@ -624,7 +624,7 @@
     }
 
     &__indicator-separator {
-      background-color: var(--brand-color-med);
+      background-color: var(--brand-color--med);
     }
 
     &__menu {
@@ -659,7 +659,7 @@
 .empty-column-indicator,
 .error-column {
   color: var(--primary-text-color);
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   text-align: center;
   padding: 40px;
   font-size: 15px;
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 6e0c54174..28d85b0ad 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -167,7 +167,7 @@
     &:focus,
     &:active,
     &.selected {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
     }
   }
 
@@ -190,7 +190,7 @@
   }
 
   .autosuggest-account .display-name__account {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   .compose-form__modifiers {
@@ -226,7 +226,7 @@
 
         .icon-button {
           flex: 0 1 auto;
-          color: var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
           font-size: 14px;
           font-weight: 500;
           padding: 10px;
@@ -257,8 +257,8 @@
           background: rgba(0, 0, 0, 0.3);
           box-sizing: border-box;
           background: transparent;
-          color: var(--primary-text-color-faint);
-          border: 1px solid var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
+          border: 1px solid var(--primary-text-color--faint);
           outline: none;
           padding: 10px;
           margin: 0;
@@ -270,7 +270,7 @@
           &:focus {color: #fff;}
 
           &::placeholder {
-            color: var(--primary-text-color-faint);
+            color: var(--primary-text-color--faint);
           }
         }
         &.active {opacity: 1;}
@@ -321,7 +321,7 @@
         font-family: var(--font-sans-serif), sans-serif;
         font-size: 14px;
         font-weight: 600;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
         &.character-counter--over {color: $warning-red;}
       }
     }
@@ -376,7 +376,7 @@
   left: 0;
   z-index: -1;
   border-radius: 4px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
 }
 
@@ -385,10 +385,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 18px;
   font-weight: 500;
-  border: 2px dashed var(--brand-color-med);
+  border: 2px dashed var(--brand-color--med);
   border-radius: 4px;
 }
 
@@ -419,7 +419,7 @@
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   position: relative;
   margin-top: 5px;
 }
@@ -460,7 +460,7 @@
 
   &:hover,
   &.active {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     color: var(--primary-text-color);
     outline: 0;
 
@@ -474,7 +474,7 @@
   }
 
   &.active:hover {
-    background: rgba(var(--brand-color-rgb), 0.5);
+    background: hsla(var(--brand-color_hsl), 0.5);
   }
 }
 
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 99e378b94..533ab1ccd 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -7,7 +7,7 @@
 }
 
 .detailed-status {
-  background: rgba(var(--brand-color-rgb), 0.03);
+  background: hsla(var(--brand-color_hsl), 0.03);
   padding: 14px 10px;
 
   &--flex {
@@ -45,22 +45,22 @@
 
 .detailed-status__meta {
   margin-top: 15px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 14px;
   line-height: 18px;
   display: flex;
 }
 
 .detailed-status__action-bar {
-  background: rgba(var(--brand-color-rgb), 0.03);
-  border-top: 1px solid var(--brand-color-faint);
-  border-bottom: 1px solid var(--brand-color-faint);
+  background: hsla(var(--brand-color_hsl), 0.03);
+  border-top: 1px solid var(--brand-color--faint);
+  border-bottom: 1px solid var(--brand-color--faint);
   display: flex;
   flex-direction: row;
 }
 
 .detailed-status__link {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   cursor: pointer;
   text-decoration: none;
   font-size: 13px;
@@ -99,7 +99,7 @@
 }
 
 .detailed-status__display-name {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   display: flex;
   line-height: 24px;
   margin-bottom: 15px;
diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss
index 5b107b85e..7dc5a1a10 100644
--- a/app/styles/components/drawer.scss
+++ b/app/styles/components/drawer.scss
@@ -10,7 +10,7 @@
   display: block;
   flex: 1 1 auto;
   padding: 15px 5px 13px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   text-decoration: none;
   text-align: center;
   font-size: 16px;
@@ -55,7 +55,7 @@
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 7612421d2..8f3b75c70 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -146,7 +146,7 @@
 
     &:hover {
       background: var(--brand-color);
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
   }
 }
diff --git a/app/styles/components/error-boundary.scss b/app/styles/components/error-boundary.scss
index bedd0daf5..d5713d68b 100644
--- a/app/styles/components/error-boundary.scss
+++ b/app/styles/components/error-boundary.scss
@@ -5,7 +5,7 @@
     span {
       display: block;
       text-align: center;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     a {
diff --git a/app/styles/components/getting-started.scss b/app/styles/components/getting-started.scss
index b73ee5455..92e37fe16 100644
--- a/app/styles/components/getting-started.scss
+++ b/app/styles/components/getting-started.scss
@@ -1,7 +1,7 @@
 .getting-started__wrapper,
 .getting-started,
 .flex-spacer {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
 }
 
 .getting-started__wrapper {
@@ -29,19 +29,19 @@
     }
 
     p {
-      color: rgba(var(--primary-text-color-rgb), 0.8);
+      color: hsla(var(--primary-text-color_hsl), 0.8);
       font-size: 13px;
       margin-bottom: 20px;
 
       a {
-        color: rgba(var(--primary-text-color-rgb), 0.4);
+        color: hsla(var(--primary-text-color_hsl), 0.4);
         text-decoration: underline;
       }
     }
 
     a {
       text-decoration: none;
-      color: rgba(var(--primary-text-color-rgb), 0.4);
+      color: hsla(var(--primary-text-color_hsl), 0.4);
 
       &:hover,
       &:focus,
@@ -52,7 +52,7 @@
   }
 
   &__trends {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     flex: 0 1 auto;
 
     @media screen and (max-height: 810px) {
diff --git a/app/styles/components/group-card.scss b/app/styles/components/group-card.scss
index 0fbb4f195..8ad0b17da 100644
--- a/app/styles/components/group-card.scss
+++ b/app/styles/components/group-card.scss
@@ -53,7 +53,7 @@
     }
 
     .group-card__meta {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       font-size: 14px;
       margin-top: 5px;
       margin-bottom: 10px;
diff --git a/app/styles/components/group-form.scss b/app/styles/components/group-form.scss
index 0b89bc87b..6d50cfe71 100644
--- a/app/styles/components/group-form.scss
+++ b/app/styles/components/group-form.scss
@@ -31,7 +31,7 @@
     float: left;
     height: 20px;
     padding: 3px 0 0 33px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     background-repeat: no-repeat;
     background-image: url('../images/sprite-post-functions.png');
     background-size: 100px 1200px;
diff --git a/app/styles/components/group-sidebar-panel.scss b/app/styles/components/group-sidebar-panel.scss
index aee27a8e1..44f760dbd 100644
--- a/app/styles/components/group-sidebar-panel.scss
+++ b/app/styles/components/group-sidebar-panel.scss
@@ -23,7 +23,7 @@
 
     &__meta {
       font-size: 0.8em;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
 
       &__unread {
         color: var(--brand-color);
diff --git a/app/styles/components/hotkeys-modal.scss b/app/styles/components/hotkeys-modal.scss
index 504a000fe..b246e115a 100644
--- a/app/styles/components/hotkeys-modal.scss
+++ b/app/styles/components/hotkeys-modal.scss
@@ -43,8 +43,8 @@
     kbd {
       display: inline-block;
       padding: 2px 8px;
-      background-color: var(--brand-color-med);
-      border: 1px solid var(--brand-color-med);
+      background-color: var(--brand-color--med);
+      border: 1px solid var(--brand-color--med);
       border-radius: 4px;
     }
   }
diff --git a/app/styles/components/inputs.scss b/app/styles/components/inputs.scss
index e38654acb..ca1493011 100644
--- a/app/styles/components/inputs.scss
+++ b/app/styles/components/inputs.scss
@@ -3,13 +3,13 @@ textarea {
   &.standard {
     @include font-size(16);
     @include line-height(18);
-    @include input-placeholder(var(--primary-text-color-faint));
+    @include input-placeholder(var(--primary-text-color--faint));
     box-sizing: border-box;
     padding: 7px 10px;
     border: 1px solid;
     border-radius: 4px;
     color: var(--brand-color);
-    border-color: var(--primary-text-color-faint);
+    border-color: var(--primary-text-color--faint);
     background: var(--foreground-color);
     &:focus {outline: none;}
   }
diff --git a/app/styles/components/list-forms.scss b/app/styles/components/list-forms.scss
index 5b70d99b0..57f182580 100644
--- a/app/styles/components/list-forms.scss
+++ b/app/styles/components/list-forms.scss
@@ -86,7 +86,7 @@
 
   .list {
     padding: 4px;
-    border-bottom: 1px solid var(--brand-color-med);
+    border-bottom: 1px solid var(--brand-color--med);
   }
 
   .list__wrapper {
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index e94285fc3..05ba65a41 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -5,7 +5,7 @@
   border-radius: 4px;
   position: relative;
   width: 100%;
-  background-color: var(--brand-color-faint);
+  background-color: var(--brand-color--faint);
 }
 
 .media-gallery__item {
@@ -22,7 +22,7 @@
   cursor: zoom-in;
   display: block;
   text-decoration: none;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   line-height: 0;
   position: relative;
   z-index: 1;
diff --git a/app/styles/components/media-spoiler.scss b/app/styles/components/media-spoiler.scss
index 61f19e0e6..94401d5d8 100644
--- a/app/styles/components/media-spoiler.scss
+++ b/app/styles/components/media-spoiler.scss
@@ -1,6 +1,6 @@
 .media-spoiler {
   background: var(--background-color);
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   border: 0;
   padding: 0;
   width: 100%;
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 939f79ed5..e3011f613 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -254,7 +254,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       background-color: var(--background-color);
     }
 
@@ -289,8 +289,8 @@
   }
 
   &__case {
-    background: var(--brand-color-med);
-    color: var(--primary-text-color-faint);
+    background: var(--brand-color--med);
+    color: var(--primary-text-color--faint);
     font-weight: 500;
     padding: 10px;
     border-radius: 4px;
@@ -315,8 +315,8 @@
   width: 480px;
   max-width: 90vw;
   border-radius: 4px;
-  border: 1px solid var(--primary-text-color-faint);
-  color: var(--primary-text-color-faint);
+  border: 1px solid var(--primary-text-color--faint);
+  color: var(--primary-text-color--faint);
   background: var(--foreground-color);
 
   .status__display-name {
@@ -440,7 +440,7 @@
 
   .status__content,
   .status__content p {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   @media screen and (max-width: 480px) {
@@ -532,7 +532,7 @@
         align-items: center;
         padding: 13px 10px 12px;
         @inclide font-size(14);
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
         text-decoration: none;
 
         &,
@@ -570,7 +570,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
   }
 
@@ -607,7 +607,7 @@
 }
 
 .modal-layout {
-  background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(var(--background-color))}"/></svg>') repeat-x bottom fixed;
+  background: var(--brand-color--med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(var(--background-color))}"/></svg>') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -731,7 +731,7 @@
 
     > span {
       font-size: 14px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
 
       a {
         color: var(--brand-color) !important;
@@ -778,7 +778,7 @@
       border-radius: 5px;
       padding: 10px;
       font-family: var(--font-monospace), monospace;
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
       color: var(--primary-text-color);
       font-size: 14px;
       margin: 0;
@@ -795,7 +795,7 @@
       }
 
       &:focus {
-        background: var(--brand-color-faint);
+        background: var(--brand-color--faint);
       }
 
       @media screen and (max-width: 600px) {
@@ -817,7 +817,7 @@
 }
 
 .modal-container--preloader {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
 }
 
 .column-inline-form {
@@ -826,7 +826,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  background: var(--brand-color-faint);
+  background: var(--brand-color--faint);
 
   label {
     flex: 1 1 auto;
diff --git a/app/styles/components/navigation-bar.scss b/app/styles/components/navigation-bar.scss
index 5fab3883d..b25ae9f8b 100644
--- a/app/styles/components/navigation-bar.scss
+++ b/app/styles/components/navigation-bar.scss
@@ -4,10 +4,10 @@
   align-items: center;
   flex-shrink: 0;
   cursor: default;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 
   strong {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   a {
diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss
index 7cef280da..fe216cadf 100644
--- a/app/styles/components/notification.scss
+++ b/app/styles/components/notification.scss
@@ -3,7 +3,7 @@
     background: transparent;
 
     .icon-button.disabled {
-      color: rgba(var(--brand-color-rgb), 0.2);
+      color: hsla(var(--brand-color_hsl), 0.2);
     }
   }
 }
@@ -12,7 +12,7 @@
   margin: 0 10px 0 68px;
   padding: 8px 0 0;
   cursor: default;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 15px;
   line-height: 22px;
   position: relative;
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 91deaa2e3..115e03e17 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -67,7 +67,7 @@
           display: block;
           font-size: 16px;
           line-height: 1.5;
-          color: var(--primary-text-color-faint);
+          color: var(--primary-text-color--faint);
           font-weight: 400;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -91,12 +91,12 @@
     &__fields {
       display: flex;
       flex-direction: column;
-      border-top: 1px solid var(--brand-color-med);
+      border-top: 1px solid var(--brand-color--med);
       padding: 10px 0;
       margin: 5px 0;
 
       @media screen and (max-width: 895px) {
-        border-bottom: 1px solid var(--brand-color-med);
+        border-bottom: 1px solid var(--brand-color--med);
       }
 
       a {
diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss
index 8fdceb7ed..fc84077e7 100644
--- a/app/styles/components/promo-panel.scss
+++ b/app/styles/components/promo-panel.scss
@@ -9,7 +9,7 @@
   display: block;
   height: 42px;
   line-height: 42px;
-  border-bottom: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color--med);
   background: var(--foreground-color);
 
   &--highlighted {
@@ -37,7 +37,7 @@
     padding: 0 20px;
 
     &:hover {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
 
       span {
         text-decoration: underline;
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 25bd90b15..e6bd7db7b 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -37,7 +37,7 @@
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: var(--brand-color-hicontrast);
+  background-color: var(--brand-color--hicontrast);
 }
 
 .react-toggle--checked .react-toggle-track {
@@ -45,7 +45,7 @@
 }
 
 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: var(--brand-color-hicontrast);
+  background-color: var(--brand-color--hicontrast);
 }
 
 .react-toggle-track-check {
@@ -91,7 +91,7 @@
   left: 1px;
   width: 22px;
   height: 22px;
-  border: 1px solid var(--brand-color-med);
+  border: 1px solid var(--brand-color--med);
   border-radius: 50%;
   background-color: var(--background-color);
   box-sizing: border-box;
diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss
index a5b9c4bc9..4cbf03343 100644
--- a/app/styles/components/reply-indicator.scss
+++ b/app/styles/components/reply-indicator.scss
@@ -1,7 +1,7 @@
 .reply-indicator {
   border-radius: 4px;
   margin-bottom: 10px;
-  background: var(--brand-color-faint);
+  background: var(--brand-color--faint);
   padding: 10px;
   min-height: 23px;
   overflow-y: auto;
@@ -31,7 +31,7 @@
   text-decoration: none;
 
   .display-name__account {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 }
 
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index 69945b302..0e82b570b 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -34,7 +34,7 @@
     z-index: 2;
     width: 18px;
     height: 18px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     opacity: 0;
     pointer-events: none;
 
@@ -55,7 +55,7 @@
 
 .search-results__header {
   color: var(--primary-text-color);
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   padding: 15px;
   font-weight: 500;
   font-size: 16px;
@@ -71,8 +71,8 @@
   margin-bottom: 5px;
 
   h5 {
-    background: var(--brand-color-faint);
-    border-bottom: 1px solid var(--brand-color-faint);
+    background: var(--brand-color--faint);
+    border-bottom: 1px solid var(--brand-color--faint);
     cursor: default;
     display: flex;
     padding: 15px;
@@ -95,7 +95,7 @@
 .search-results__hashtag {
   display: block;
   padding: 10px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   text-decoration: none;
 
   &:hover,
@@ -113,7 +113,7 @@
   &__text-container {
     display: none;
     padding: 25px 0;
-    background-color: var(--brand-color-med);
+    background-color: var(--brand-color--med);
 
     @media (min-width: 895px) {
       display: block;
diff --git a/app/styles/components/setting-toggle.scss b/app/styles/components/setting-toggle.scss
index 2c04e5fae..4be4864f8 100644
--- a/app/styles/components/setting-toggle.scss
+++ b/app/styles/components/setting-toggle.scss
@@ -4,7 +4,7 @@
 }
 
 .setting-toggle__label {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   display: inline-block;
   margin-bottom: 14px;
   margin-left: 8px;
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 3475f6ce0..e6b4d15a5 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -42,7 +42,7 @@
     display: flex;
     flex-direction: column;
     padding: 4px 0;
-    border-top: 1px solid rgba(var(--primary-text-color-rgb), 0.15);
+    border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
 
     &--borderless {
       margin: 0;
@@ -71,7 +71,7 @@
   display: flex;
   height: 46px;
   padding: 12px 14px;
-  border-bottom: 1px solid rgba(var(--primary-text-color-rgb), 0.15);
+  border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
   box-sizing: border-box;
   align-items: center;
 
@@ -107,7 +107,7 @@
     .display-name__account {
       display: block;
       margin-top: 2px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
   }
 
@@ -135,7 +135,7 @@
 
   &__label {
     display: flex;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   &:hover {
@@ -148,12 +148,12 @@
   padding: 16px 18px;
   cursor: pointer;
   text-decoration: none;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 15px;
   font-weight: 400;
 
   &:hover {
-    background-color: rgba(var(--brand-color-rgb), 0.1);
+    background-color: hsla(var(--brand-color_hsl), 0.1);
     color: var(--primary-text-color);
   }
 
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 4c42c8c2b..5a20e882e 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -48,7 +48,7 @@
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color--med);
 }
 
 .status__prepend-icon-wrapper {
@@ -61,7 +61,7 @@
   padding-left: 68px;
   position: relative;
   min-height: 54px;
-  border-bottom: 1px solid var(--brand-color-faint);
+  border-bottom: 1px solid var(--brand-color--faint);
   cursor: default;
 
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -83,21 +83,21 @@
   }
 
   &.status-direct:not(.read) {
-    background: var(--brand-color-med);
-    border-bottom-color: var(--brand-color-med);
+    background: var(--brand-color--med);
+    border-bottom-color: var(--brand-color--med);
 
     .status__content a {
-      color: var(--brand-color-hicontrast);
+      color: var(--brand-color--hicontrast);
     }
   }
 
   &.light {
     .status__relative-time {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     .status__display-name {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     .display-name {
@@ -106,7 +106,7 @@
       }
 
       span {
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
     }
 
@@ -130,7 +130,7 @@
 
   &__meta {
     font-size: 14px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     a {
       color: var(--brand-color);
@@ -145,7 +145,7 @@
 }
 
 .status__display-name {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 }
 
 .status__info .status__display-name {
@@ -332,11 +332,11 @@
   }
 
   .status__content__spoiler-link {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     transition: 0.2s;
 
     &:hover {
-      background: rgba(var(--brand-color-rgb), 0.5);
+      background: hsla(var(--brand-color_hsl), 0.5);
       text-decoration: none;
     }
 
@@ -363,10 +363,10 @@
 .focusable {
   &:focus {
     outline: 0;
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
 
     .status.status-direct {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
 
       &.muted {
         background: transparent;
@@ -375,7 +375,7 @@
 
     .detailed-status,
     .detailed-status__action-bar {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
     }
   }
 }
@@ -383,7 +383,7 @@
 .status-card {
   display: flex;
   font-size: 14px;
-  border: 1px solid var(--brand-color-med);
+  border: 1px solid var(--brand-color--med);
   border-radius: 4px;
   color: var(--primary-text-color);
   margin-top: 14px;
@@ -413,7 +413,7 @@
     button,
     a {
       display: inline;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       background: transparent;
       border: 0;
       padding: 0 8px;
@@ -440,7 +440,7 @@ a.status-card {
   cursor: pointer;
 
   &:hover {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
   }
 }
 
@@ -464,7 +464,7 @@ a.status-card {
   display: block;
   font-weight: 500;
   margin-bottom: 5px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -478,7 +478,7 @@ a.status-card {
 }
 
 .status-card__description {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 }
 
 .status-card__host {
@@ -492,7 +492,7 @@ a.status-card {
 
 .status-card__image {
   flex: 0 0 100px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   position: relative;
 
   & > .fa {
@@ -522,7 +522,7 @@ a.status-card {
 }
 
 .status-card.compact {
-  border-color: var(--brand-color-faint);
+  border-color: var(--brand-color--faint);
 
   &.interactive {
     border: 0;
@@ -543,7 +543,7 @@ a.status-card {
 }
 
 a.status-card.compact:hover {
-  background-color: var(--brand-color-faint);
+  background-color: var(--brand-color--faint);
 }
 
 .status-card__image-image {
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 3f6504290..a91977992 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -125,7 +125,7 @@
 
     &:hover {
       background-color: var(--brand-color);
-      filter: var(--accent-filter-hover);
+      filter: var(--accent-filter--hover);
     }
 
   }
diff --git a/app/styles/components/timeline-queue-header.scss b/app/styles/components/timeline-queue-header.scss
index de71d4529..13976d2a4 100644
--- a/app/styles/components/timeline-queue-header.scss
+++ b/app/styles/components/timeline-queue-header.scss
@@ -5,7 +5,7 @@
   position: relative;
   border-bottom: 1px solid;
   border-top: 1px solid;
-  border-color: var(--brand-color-faint);
+  border-color: var(--brand-color--faint);
   transition: max-height 150ms ease;
   overflow: hidden;
   opacity: 1;
diff --git a/app/styles/components/trends.scss b/app/styles/components/trends.scss
index 88abcf5bc..7984aa873 100644
--- a/app/styles/components/trends.scss
+++ b/app/styles/components/trends.scss
@@ -1,8 +1,8 @@
 .trends {
   &__header {
     color: var(--primary-text-color);
-    background: var(--brand-color-faint);
-    border-bottom: 1px solid var(--brand-color-med);
+    background: var(--brand-color--faint);
+    border-bottom: 1px solid var(--brand-color--med);
     font-weight: 500;
     padding: 15px;
     font-size: 16px;
@@ -18,7 +18,7 @@
     display: flex;
     align-items: center;
     padding: 15px;
-    border-bottom: 1px solid var(--brand-color-med);
+    border-bottom: 1px solid var(--brand-color--med);
 
     &:last-child {
       border-bottom: 0;
@@ -37,7 +37,7 @@
       }
 
       a {
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
         text-decoration: none;
         font-size: 14px;
         font-weight: 500;
@@ -63,7 +63,7 @@
       line-height: 36px;
       font-weight: 500;
       text-align: center;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &__sparkline {
diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
index 38aa6b1f3..3850df929 100644
--- a/app/styles/components/user-panel.scss
+++ b/app/styles/components/user-panel.scss
@@ -9,7 +9,7 @@
     display: block;
     height: 112px;
     width: 100%;
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
 
     img {
       display: block;
@@ -65,7 +65,7 @@
       display: block;
       font-size: 14px;
       line-height: 16px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       text-decoration: none !important;
     }
   }
@@ -104,7 +104,7 @@
     &__label {
       display: block;
       width: 100%;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       font-size: 12px;
       line-height: 14px;
     }
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index eb2d7090e..743a16e67 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -151,7 +151,7 @@
     z-index: 4;
     border: 0;
     background: var(--background-color);
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     transition: none;
     pointer-events: none;
 
@@ -378,7 +378,7 @@
 
 .media-spoiler-video-play-icon {
   border-radius: 100px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 36px;
   left: 50%;
   padding: 5px;
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index 79674c1d8..37566af47 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -43,7 +43,7 @@
   &__subtitle {
     display: block;
     padding: 0 15px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   &__form {
@@ -64,7 +64,7 @@
     }
 
     &:not(:last-of-type) {
-      border-bottom: 1px solid var(--brand-color-med);
+      border-bottom: 1px solid var(--brand-color--med);
     }
 
     &__content {
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
index 87ce413ad..53bd272c2 100644
--- a/app/styles/containers.scss
+++ b/app/styles/containers.scss
@@ -93,7 +93,7 @@
 
   .name {
     flex: 1 1 auto;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     width: calc(100% - 88px);
 
     .username {
diff --git a/app/styles/dashboard.scss b/app/styles/dashboard.scss
index 600cacc97..2099c5312 100644
--- a/app/styles/dashboard.scss
+++ b/app/styles/dashboard.scss
@@ -13,7 +13,7 @@
     & > div,
     & > a {
       padding: 20px;
-      background: var(--brand-color-faint);
+      background: var(--brand-color--faint);
       border-radius: 4px;
     }
 
@@ -25,7 +25,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: var(--brand-color-med);
+        background: var(--brand-color--med);
       }
     }
   }
@@ -48,7 +48,7 @@
 
   &__label {
     font-size: 14px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     text-align: center;
     font-weight: 500;
   }
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
index 963e9e544..b108949c1 100644
--- a/app/styles/donations.scss
+++ b/app/styles/donations.scss
@@ -26,7 +26,7 @@
 }
 
 .sub {
-  border: 1px solid rgba(var(--primary-text-color-rgb), 0.5);
+  border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
   padding: 20px;
   position: relative;
   border-radius: 4px;
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index b8697002d..12dd4f084 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -35,7 +35,7 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   line-height: 0;
 }
 
@@ -49,7 +49,7 @@
   cursor: pointer;
 
   &:hover {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 }
 
@@ -114,7 +114,7 @@
     display: block;
     width: 100%;
     background: var(--background-color);
-    border: 1px solid var(--brand-color-faint);
+    border: 1px solid var(--brand-color--faint);
     border-radius: 9999px;
 
     &::-moz-focus-inner {
@@ -146,7 +146,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(var(--background-color-rgb), 0.7);
+    background-color: hsla(var(--background-color_hsl), 0.7);
     border-radius: 100%;
   }
 }
@@ -182,7 +182,7 @@
   font-size: 14px;
   text-align: center;
   padding-top: 70px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 
   .emoji-mart-category-label {
     display: none;
@@ -244,7 +244,7 @@
     &:hover,
     &:focus,
     &:active {
-      background: rgba(var(--background-color-rgb), 0.4);
+      background: hsla(var(--background-color_hsl), 0.4);
     }
   }
 
diff --git a/app/styles/footer.scss b/app/styles/footer.scss
index 29e6f32db..a15490a5e 100644
--- a/app/styles/footer.scss
+++ b/app/styles/footer.scss
@@ -34,7 +34,7 @@
       text-transform: uppercase;
       font-weight: 700;
       margin-bottom: 8px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       font-size: 1.6rem;
       line-height: 1.5;
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 8510fc59e..6cf1f5f0f 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -95,7 +95,7 @@ code {
   }
 
   .hint {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     a {
       color: var(--highlight-text-color);
@@ -116,7 +116,7 @@ code {
 
   p.hint {
     margin-bottom: 15px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     &.subtle-hint {
       text-align: center;
@@ -300,8 +300,8 @@ code {
     input[type=email],
     input[type=password],
     textarea {
-      color: var(--primary-text-color-faint);
-      border-color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
+      border-color: var(--primary-text-color--faint);
     }
   }
 
@@ -338,7 +338,7 @@ code {
 
     &:active,
     &:focus {
-      border-color: var(--brand-color-hicontrast);
+      border-color: var(--brand-color--hicontrast);
     }
   }
 
@@ -408,7 +408,7 @@ code {
     &:hover,
     &:active,
     &:focus {
-      background-color: var(--brand-color-hicontrast);
+      background-color: var(--brand-color--hicontrast);
     }
 
     &.negative {
@@ -471,7 +471,7 @@ code {
         right: 0;
         bottom: 1px;
         width: 5px;
-        background-image: linear-gradient(to right, rgba(var(--background-color-rgb), 0), var(--background-color));
+        background-image: linear-gradient(to right, hsla(var(--background-color_hsl), 0), var(--background-color));
       }
     }
   }
@@ -521,8 +521,8 @@ code {
 }
 
 .flash-message {
-  background: var(--brand-color-med);
-  color: var(--primary-text-color-faint);
+  background: var(--brand-color--med);
+  color: var(--primary-text-color--faint);
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
@@ -542,7 +542,7 @@ code {
 
   a {
     display: inline-block;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     text-decoration: none;
 
     &:hover {
@@ -563,7 +563,7 @@ code {
     border: 0;
     padding: 10px;
     font-family: var(--font-monospace), monospace;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     color: var(--primary-text-color);
     font-size: 14px;
     margin: 0;
@@ -579,7 +579,7 @@ code {
     }
 
     &:focus {
-      background: var(--brand-color-faint);
+      background: var(--brand-color--faint);
     }
   }
 
@@ -603,7 +603,7 @@ code {
   text-align: center;
 
   a {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     text-decoration: none;
 
     &:hover {
@@ -639,7 +639,7 @@ code {
 .oauth-prompt,
 .follow-prompt {
   margin-bottom: 30px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 
   h2 {
     font-size: 16px;
@@ -648,7 +648,7 @@ code {
   }
 
   strong {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     font-weight: 500;
 
     @each $lang in $cjk-langs {
@@ -685,7 +685,7 @@ code {
 
 .qr-alternative {
   margin-bottom: 20px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   flex: 150px;
 
   samp {
@@ -770,7 +770,7 @@ code {
 
 .post-follow-actions {
   text-align: center;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 
   div {
     margin-bottom: 4px;
@@ -860,7 +860,7 @@ code {
   margin-bottom: 25px;
 
   .fa-link {
-    background-color: var(--brand-color-med);
+    background-color: var(--brand-color--med);
     border-radius: 100%;
     font-size: 24px;
     padding: 10px;
@@ -892,7 +892,7 @@ code {
   }
 
   &__connection {
-    background-color: var(--brand-color-med);
+    background-color: var(--brand-color--med);
     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
     border-radius: 4px;
     padding: 25px 10px;
@@ -900,7 +900,7 @@ code {
     text-align: center;
 
     &::after {
-      background-color: var(--brand-color-med);
+      background-color: var(--brand-color--med);
       content: '';
       display: block;
       height: 100%;
diff --git a/app/styles/introduction.scss b/app/styles/introduction.scss
index e9dbb9ffe..f8a81aec3 100644
--- a/app/styles/introduction.scss
+++ b/app/styles/introduction.scss
@@ -92,13 +92,13 @@
       font-size: 16px;
       line-height: 24px;
       font-weight: 400;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
 
       code {
         display: inline-block;
         background: var(--background-color);
         font-size: 15px;
-        border: 1px solid var(--brand-color-med);
+        border: 1px solid var(--brand-color--med);
         border-radius: 2px;
         padding: 1px 3px;
       }
@@ -132,7 +132,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
     }
 
     &.active {
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index 9d61770e4..387bf18dd 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -1,5 +1,5 @@
 .loading-indicator {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-size: 12px;
   font-weight: 400;
   text-transform: uppercase;
@@ -28,7 +28,7 @@
   height: 42px;
   box-sizing: border-box;
   background-color: transparent;
-  border: 0 solid rgba(var(--brand-color-rgb), 0.5);
+  border: 0 solid hsla(var(--brand-color_hsl), 0.5);
   border-width: 6px;
   border-radius: 50%;
 }
@@ -45,11 +45,11 @@
   0% {
     width: 0;
     height: 0;
-    background-color: rgba(var(--brand-color-rgb), 0.5);
+    background-color: hsla(var(--brand-color_hsl), 0.5);
   }
 
   29% {
-    background-color: rgba(var(--brand-color-rgb), 0.5);
+    background-color: hsla(var(--brand-color_hsl), 0.5);
   }
 
   30% {
@@ -168,12 +168,12 @@
   text-decoration: none;
 
   &:hover {
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
   }
 }
 
 .load-gap {
-  border-bottom: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color--med);
 }
 
 .regeneration-indicator {
@@ -181,7 +181,7 @@
   font-size: 16px;
   font-weight: 500;
   color: var(--primary-text-color);
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   cursor: default;
   display: flex;
   flex: 1 1 auto;
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 7b1c62315..0952de91c 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -14,8 +14,8 @@
     height: 100%;
     display: inline-block;
     border-radius: 4px;
-    background: rgba(var(--primary-text-color-rgb), .3);
-    &.leading {background: rgba(var(--primary-text-color-rgb), .6);}
+    background: hsla(var(--primary-text-color_hsl), .3);
+    &.leading {background: hsla(var(--primary-text-color_hsl), .6);}
   }
 
   &__text {
@@ -27,7 +27,7 @@
     overflow: hidden;
     width: 100%;
     text-overflow: ellipsis;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     input[type=radio],
     input[type=checkbox] {
@@ -129,7 +129,7 @@
 
     &:active,
     &:focus {
-      background-color: rgba(var(--primary-text-color-rgb), .1);
+      background-color: hsla(var(--primary-text-color_hsl), .1);
     }
   }
 
@@ -208,10 +208,10 @@
   color: var(--primary-text-color);
 
   &__chart {
-    background: rgba(var(--brand-color), 0.2);
+    background: hsla(var(--brand-color_hsl), 0.2);
 
     &.leading {
-      background: rgba(var(--brand-color), 0.2);
+      background: hsla(var(--brand-color_hsl), 0.2);
     }
   }
 }
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 0322ce20b..848547ee2 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -238,12 +238,12 @@ body.rtl {
     &::after {
       right: auto;
       left: 0;
-      background-image: linear-gradient(to left, rgba(var(--background-color-rgb), 0), var(--background-color));
+      background-image: linear-gradient(to left, hsla(var(--background-color_hsl), 0), var(--background-color));
     }
   }
 
   .simple_form select {
-    background: var(--background-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 left 8px center / auto 16px;
+    background: var(--background-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 left 8px center / auto 16px;
   }
 
   .table th,
diff --git a/app/styles/stream_entries.scss b/app/styles/stream_entries.scss
index c45192f50..653454ae2 100644
--- a/app/styles/stream_entries.scss
+++ b/app/styles/stream_entries.scss
@@ -26,7 +26,7 @@
   }
 
   .entry {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
 
     .detailed-status,
     .status,
@@ -69,7 +69,7 @@
   }
 
   &--highlighted .entry {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
   }
 }
 
@@ -95,7 +95,7 @@
   &:active,
   &:focus,
   &:hover {
-    background: var(--brand-color-hicontrast);
+    background: var(--brand-color--hicontrast);
   }
 
   &:disabled,
@@ -103,7 +103,7 @@
     &:active,
     &:focus,
     &:hover {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
     }
   }
 
diff --git a/app/styles/tables.scss b/app/styles/tables.scss
index 0a8eb0589..8fbe8cca6 100644
--- a/app/styles/tables.scss
+++ b/app/styles/tables.scss
@@ -9,14 +9,14 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-top: 1px solid var(--brand-color-med);
+    border-top: 1px solid var(--brand-color--med);
     text-align: left;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
   }
 
   & > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid var(--brand-color-med);
+    border-bottom: 2px solid var(--brand-color--med);
     border-top: 0;
     font-weight: 500;
   }
@@ -27,7 +27,7 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
   }
 
   a {
@@ -67,7 +67,7 @@
 
   &.batch-table {
     & > thead > tr > th {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
       border-top: 1px solid var(--background-color);
       border-bottom: 1px solid var(--background-color);
 
@@ -109,7 +109,7 @@ a.table-action-link {
   display: inline-block;
   margin-right: 5px;
   padding: 0 10px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-weight: 500;
 
   &:hover {
@@ -165,7 +165,7 @@ a.table-action-link {
 
   &__toolbar {
     border: 1px solid var(--background-color);
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     border-radius: 4px 0 0;
     height: 47px;
     align-items: center;
@@ -183,7 +183,7 @@ a.table-action-link {
   &__row {
     border: 1px solid var(--background-color);
     border-top: 0;
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       &:first-child {
@@ -196,10 +196,10 @@ a.table-action-link {
     }
 
     &:nth-child(even) {
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
 
       &:hover {
-        background: var(--brand-color-faint);
+        background: var(--brand-color--faint);
       }
     }
 
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index de9ba02db..6ad109f7c 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -1,58 +1,53 @@
 body {
-  --brand-color-rgb: var(--brand-color-r), var(--brand-color-g), var(--brand-color-b);
-  --brand-color: rgb(var(--brand-color-rgb));
-  --brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
-  --brand-color-med: rgba(var(--brand-color-rgb), 0.2);
+  --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
+  --brand-color: hsl(var(--brand-color_hsl));
+  --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
+  --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
   --accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
-  --accent-filter-hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
-  --primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
-  --primary-text-color: rgb(var(--primary-text-color-rgb));
-  --primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
-  --inverted-text-color: rgb(
-    calc(255 - var(--primary-text-color-r)),
-    calc(255 - var(--primary-text-color-g)),
-    calc(255 - var(--primary-text-color-b))
-  );
-  --background-color-rgb: var(--background-color-r), var(--background-color-g), var(--background-color-b);
-  --background-color: rgb(var(--background-color-rgb));
+  --accent-filter--hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
+  --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
+  --primary-text-color: hsl(var(--primary-text-color_hsl));
+  --primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
+  --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
+  --background-color: hsl(var(--background-color_hsl));
 }
 
 body.theme-mode-light {
-  --primary-text-color-r: 0;
-  --primary-text-color-g: 0;
-  --primary-text-color-b: 0;
-  --background-color-r: 242;
-  --background-color-g: 242;
-  --background-color-b: 242;
+  --primary-text-color_h: 0;
+  --primary-text-color_s: 0%;
+  --primary-text-color_l: 0%;
+  --background-color_h: 0;
+  --background-color_s: 0%;
+  --background-color_l: 94.9%;
   --foreground-color: #ffffff;
-  --highlight-text-color: rgb(
-    calc(var(--brand-color-r) - 25),
-    calc(var(--brand-color-g) - 25),
-    calc(var(--brand-color-b) - 25)
+  --highlight-text-color: hsl(
+    var(--brand-color_h),
+    var(--brand-color_s),
+    calc(var(--brand-color_l) - 8%)
   );
-  --brand-color-hicontrast: rgb(
-    calc(var(--brand-color-r) - 50),
-    calc(var(--brand-color-g) - 50),
-    calc(var(--brand-color-b) - 50)
+  --brand-color--hicontrast: hsl(
+    var(--brand-color_h),
+    var(--brand-color_s),
+    calc(var(--brand-color_l) - 12%)
   );
 }
 
 body.theme-mode-dark {
-  --primary-text-color-r: 255;
-  --primary-text-color-g: 255;
-  --primary-text-color-b: 255;
-  --background-color-r: 51;
-  --background-color-g: 51;
-  --background-color-b: 51;
+  --primary-text-color_h: 0;
+  --primary-text-color_s: 0%;
+  --primary-text-color_l: 100%;
+  --background-color_h: 0;
+  --background-color_s: 0%;
+  --background-color_l: 20%;
   --foreground-color: #222222;
-  --highlight-text-color: rgb(
-    calc(var(--brand-color-r) + 40),
-    calc(var(--brand-color-g) + 40),
-    calc(var(--brand-color-b) + 40)
+  --highlight-text-color: hsl(
+    var(--brand-color_h),
+    var(--brand-color_s),
+    calc(var(--brand-color_l) + 8%)
   );
-  --brand-color-hicontrast: rgb(
-    calc(var(--brand-color-r) + 50),
-    calc(var(--brand-color-g) + 50),
-    calc(var(--brand-color-b) + 50)
+  --brand-color--hicontrast: hsl(
+    var(--brand-color_h),
+    var(--brand-color_s),
+    calc(var(--brand-color_l) + 12%)
   );
 }
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 8b59f4318..c1715ae3e 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -1,7 +1,7 @@
 .icon-button {
   display: inline-block;
   padding: 0;
-  color: rgba(var(--primary-text-color-rgb), 0.4);
+  color: hsla(var(--primary-text-color_hsl), 0.4);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -14,12 +14,12 @@
   &:hover,
   &:active,
   &:focus {
-    color: rgba(var(--primary-text-color-rgb), 0.6);
+    color: hsla(var(--primary-text-color_hsl), 0.6);
     transition: color 200ms ease-out;
   }
 
   &.disabled {
-    color: rgba(var(--primary-text-color-rgb), 0.2);
+    color: hsla(var(--primary-text-color_hsl), 0.2);
     cursor: default;
   }
 
@@ -38,16 +38,16 @@
   }
 
   &.inverted {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &.disabled {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
 
     &.active {
@@ -62,7 +62,7 @@
   &.overlayed {
     box-sizing: content-box;
     background: var(--foreground-color);
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     border-radius: 4px;
     padding: 2px;
 
@@ -73,7 +73,7 @@
 }
 
 .text-icon-button {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -87,12 +87,12 @@
   &:hover,
   &:active,
   &:focus {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     transition: color 200ms ease-out;
   }
 
   &.disabled {
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     cursor: default;
   }
 
@@ -196,14 +196,14 @@
 
 .status__relative-time,
 .notification__relative_time {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   float: right;
   font-size: 14px;
 }
 
 .domain {
   padding: 10px;
-  border-bottom: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color--med);
 
   .domain__domain-name {
     flex: 1 1 auto;
@@ -240,11 +240,11 @@
   }
 
   a.status__content__spoiler-link {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     color: var(--primary-text-color);
 
     &:hover {
-      background: var(--brand-color-faint);
+      background: var(--brand-color--faint);
       text-decoration: none;
     }
   }
@@ -376,7 +376,7 @@
   &:hover,
   &:focus,
   &:active {
-    background-color: var(--brand-color-hicontrast);
+    background-color: var(--brand-color--hicontrast);
   }
 
   i.fa {
@@ -436,7 +436,7 @@
 }
 
 .setting-text {
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   background: transparent;
   border: 0;
   border-bottom: 2px solid var(--brand-color);
@@ -463,7 +463,7 @@
   font-size: 16px;
   font-weight: 500;
   color: var(--primary-text-color);
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   cursor: default;
   display: flex;
   flex: 1 1 auto;
@@ -545,7 +545,7 @@
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid var(--brand-color-med);
+  border: 1px solid var(--brand-color--med);
   border-radius: 4px;
   margin-top: 14px;
   overflow: hidden;
@@ -555,7 +555,7 @@
     color: var(--primary-text-color);
     padding: 8px 18px;
     cursor: default;
-    border-right: 1px solid var(--brand-color-med);
+    border-right: 1px solid var(--brand-color--med);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -612,7 +612,7 @@
 
 .notification__filter-bar,
 .account__section-headline {
-  border-bottom: 1px solid var(--brand-color-faint);
+  border-bottom: 1px solid var(--brand-color--faint);
   cursor: default;
   display: flex;
   flex-shrink: 0;
@@ -626,7 +626,7 @@
   a {
     display: block;
     flex: 1 1 auto;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     padding: 15px 0;
     font-size: 14px;
     font-weight: 500;
@@ -650,7 +650,7 @@
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
-        border-color: transparent transparent var(--brand-color-faint);
+        border-color: transparent transparent var(--brand-color--faint);
       }
 
       &::after {
@@ -696,7 +696,7 @@
     height: auto;
 
     path:first-child {
-      fill: var(--brand-color-med);
+      fill: var(--brand-color--med);
     }
 
     path:last-child {
@@ -710,7 +710,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     border-radius: 50%;
     padding: 0.35rem;
   }
diff --git a/app/styles/widgets.scss b/app/styles/widgets.scss
index db2fcc537..92e8c7121 100644
--- a/app/styles/widgets.scss
+++ b/app/styles/widgets.scss
@@ -20,11 +20,11 @@
   }
 
   &__text {
-    background: var(--brand-color-med);
+    background: var(--brand-color--med);
     padding: 20px;
     border-radius: 0 0 4px 4px;
     font-size: 15px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     line-height: 20px;
     word-wrap: break-word;
     font-weight: 400;
@@ -56,7 +56,7 @@
     }
 
     a {
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       text-decoration: none;
 
       &:hover {
@@ -79,7 +79,7 @@
     text-transform: uppercase;
     font-weight: 700;
     font-size: 13px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   .account {
@@ -115,13 +115,13 @@
   padding: 20px;
   min-height: 100%;
   border-radius: 4px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 }
 
 .contact-widget {
   font-size: 15px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
@@ -152,9 +152,9 @@
   padding: 15px;
   padding-bottom: 20px;
   border-radius: 4px;
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   font-weight: 400;
   margin-bottom: 10px;
 
@@ -197,7 +197,7 @@
 
     .fa {
       margin-right: 5px;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
     }
   }
 
@@ -224,12 +224,12 @@
   background: $base-shadow-color;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   font-size: 14px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
   margin-bottom: 10px;
 }
 
 .page-header {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   border-radius: 4px;
   padding: 60px 15px;
@@ -246,12 +246,12 @@
 
   p {
     font-size: 15px;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
   }
 
   @media screen and (max-width: $no-gap-breakpoint) {
     margin-top: 0;
-    background: var(--brand-color-faint);
+    background: var(--brand-color--faint);
 
     h1 {
       font-size: 24px;
@@ -260,7 +260,7 @@
 }
 
 .directory {
-  background: var(--brand-color-med);
+  background: var(--brand-color--med);
   border-radius: 4px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
@@ -273,7 +273,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: var(--brand-color-med);
+      background: var(--brand-color--med);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
@@ -285,7 +285,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: var(--brand-color-med);
+        background: var(--brand-color--med);
       }
     }
 
@@ -309,7 +309,7 @@
       text-overflow: ellipsis;
 
       .fa {
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
 
       small {
@@ -317,7 +317,7 @@
         font-weight: 400;
         font-size: 15px;
         margin-top: 8px;
-        color: var(--primary-text-color-faint);
+        color: var(--primary-text-color--faint);
       }
     }
 
@@ -352,7 +352,7 @@
     position: relative;
     margin-left: -10px;
     background: var(--background-color);
-    border: 2px solid var(--brand-color-med);
+    border: 2px solid var(--brand-color--med);
 
     &:nth-child(1) {
       z-index: 1;
@@ -383,7 +383,7 @@
   thead th {
     text-align: center;
     text-transform: uppercase;
-    color: var(--primary-text-color-faint);
+    color: var(--primary-text-color--faint);
     font-weight: 700;
     padding: 10px;
 
@@ -395,7 +395,7 @@
   tbody td {
     padding: 15px 0;
     vertical-align: middle;
-    border-bottom: 1px solid var(--brand-color-med);
+    border-bottom: 1px solid var(--brand-color--med);
   }
 
   tbody tr:last-child td {
@@ -411,7 +411,7 @@
 
     small {
       display: block;
-      color: var(--primary-text-color-faint);
+      color: var(--primary-text-color--faint);
       font-weight: 400;
       font-size: 14px;
     }
@@ -508,7 +508,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
 .notice-widget {
   margin-bottom: 10px;
-  color: var(--primary-text-color-faint);
+  color: var(--primary-text-color--faint);
 
   p {
     margin-bottom: 10px;
diff --git a/package.json b/package.json
index 54109dcb6..430448a94 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "file-loader": "^4.0.0",
     "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
+    "hex-to-hsl": "^1.0.2",
     "html-webpack-harddisk-plugin": "^1.0.1",
     "html-webpack-plugin": "^4.3.0",
     "http-link-header": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index c4a704cac..557f19a88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5594,6 +5594,19 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hex-to-hsl@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz#d5c59ece00178444e821c8fc58a430afc09831c2"
+  integrity sha1-1cWezgAXhEToIcj8WKQwr8CYMcI=
+  dependencies:
+    hex-to-rgb "^1.0.1"
+    rgb-to-hsl "0.0.2"
+
+hex-to-rgb@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz#100b9df126b32f2762adf8486be68c65ef8ed2a4"
+  integrity sha1-EAud8SazLydirfhIa+aMZe+O0qQ=
+
 history@^4.7.2:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -10162,6 +10175,11 @@ rgb-regex@^1.0.1:
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
   integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
 
+rgb-to-hsl@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz#36f9fc286376b90acc457e699005b4cb42d350ec"
+  integrity sha1-Nvn8KGN2uQrMRX5pkAW0y0LTUOw=
+
 rgba-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"