about summary refs log tree commit diff
diff options
context:
space:
mode:
authorMatt Jankowski <mjankowski@thoughtbot.com>2017-05-08 09:57:49 -0400
committerEugen Rochko <eugen@zeonfederated.com>2017-05-08 15:57:49 +0200
commitb85dec2b976e0bea9f7a3ede832f3c8e16c8e2ef (patch)
treec33e5e6ba9e9badf164d721e048925db0eb66127
parentcbd673601c5f762d71f65404c3b7ad5b3751ee8c (diff)
Improve scss color variables (#2912)
- Updates scss variables file to use better-named variables for black/white/etc
- Arranges the "mastodon classic" colors into variables
- Remove all references to `$color-*` naming, replacing with new

This does not in itself introduce "theme" support, but:

- It would probably be easier to start working on theme support after this
  change and others
- Even without the goal of themes, these changes make it more clear how the
  colors are being used.

There is almost definitely some edge case in here where I've guessed the
intent/context of some color usage incorrectly, but it still seems like a net
improvement.
Diffstat
-rw-r--r--app/javascript/styles/about.scss56
-rw-r--r--app/javascript/styles/accounts.scss64
-rw-r--r--app/javascript/styles/admin.scss40
-rw-r--r--app/javascript/styles/basics.scss8
-rw-r--r--app/javascript/styles/boost.scss4
-rw-r--r--app/javascript/styles/compact_header.scss4
-rw-r--r--app/javascript/styles/components.scss570
-rw-r--r--app/javascript/styles/containers.scss2
-rw-r--r--app/javascript/styles/footer.scss2
-rw-r--r--app/javascript/styles/forms.scss68
-rw-r--r--app/javascript/styles/landing_strip.scss4
-rw-r--r--app/javascript/styles/reset.scss16
-rw-r--r--app/javascript/styles/stream_entries.scss52
-rw-r--r--app/javascript/styles/tables.scss12
-rw-r--r--app/javascript/styles/variables.scss38
15 files changed, 479 insertions, 461 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index b5626551e..3512bdcb4 100644
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -2,7 +2,7 @@
   .wrapper {
     max-width: 600px;
     margin: 0 auto;
-    color: $color3;
+    color: $ui-primary-color;
     padding-top: 50px;
     padding-bottom: 50px;
 
@@ -15,7 +15,7 @@
     font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
-    color: $color4;
+    color: $ui-highlight-color;
     padding: 20px 0;
 
     img {
@@ -32,7 +32,7 @@
     line-height: 28px;
     font-weight: 400;
     margin-bottom: 20px;
-    color: $color5;
+    color: $primary-text-color;
   }
 
   h3 {
@@ -41,7 +41,7 @@
     line-height: 28px;
     font-weight: 400;
     margin-bottom: 20px;
-    color: $color2;
+    color: $ui-secondary-color;
   }
 
   ul,
@@ -70,7 +70,7 @@
     margin-bottom: 12px;
 
     a {
-      color: $color4;
+      color: $ui-highlight-color;
       text-decoration: underline;
     }
   }
@@ -79,14 +79,14 @@
     display: inline-block;
     padding: 7px 7px 5px;
     margin: 0 2px;
-    background: $color3;
-    color: $color1;
+    background: $ui-primary-color;
+    color: $ui-base-color;
     font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 300;
   }
 
   .screenshot {
-    box-shadow: 0 0 15px rgba($color8, 0.4);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
     margin-bottom: 26px;
 
     img {
@@ -106,7 +106,7 @@
       line-height: 36px;
 
       a {
-        color: $color3;
+        color: $ui-primary-color;
         text-decoration: underline;
       }
     }
@@ -127,8 +127,8 @@
   margin: 20px 0;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid lighten($color1, 10%);
-  border-bottom: 1px solid lighten($color1, 10%);
+  border-top: 1px solid lighten($ui-base-color, 10%);
+  border-bottom: 1px solid lighten($ui-base-color, 10%);
   padding-right: 14px;
 
   .section {
@@ -146,7 +146,7 @@
       font-size: 16px;
 
       &:last-child {
-        color: $color2;
+        color: $ui-secondary-color;
         font-size: 14px;
       }
     }
@@ -155,7 +155,7 @@
       font-weight: 500;
       font-size: 32px;
       line-height: 48px;
-      color: $color5;
+      color: $primary-text-color;
     }
   }
 
@@ -190,7 +190,7 @@
 
     a {
       display: block;
-      color: $color5;
+      color: $primary-text-color;
       text-decoration: none;
 
       &:hover {
@@ -202,7 +202,7 @@
 
     .username {
       display: block;
-      color: $color3;
+      color: $ui-primary-color;
     }
   }
 }
@@ -213,7 +213,7 @@
 
   strong {
     display: block;
-    color: $color5;
+    color: $primary-text-color;
     word-break: break-word;
   }
 }
@@ -231,14 +231,14 @@
   }
 
   .sidebar {
-    border-left: 1px solid lighten($color1, 10%);
+    border-left: 1px solid lighten($ui-base-color, 10%);
     width: 200px;
     flex: 0 0 auto;
   }
 
   .panel {
     .panel-header {
-      background: lighten($color1, 10%);
+      background: lighten($ui-base-color, 10%);
       padding: 7px 14px;
       text-transform: uppercase;
       font-size: 12px;
@@ -263,7 +263,7 @@
           a {
             display: block;
             padding: 7px 14px;
-            color: rgba($color5, 0.7);
+            color: rgba($primary-text-color, 0.7);
             text-decoration: none;
             transition: all 200ms linear;
 
@@ -272,17 +272,17 @@
             }
 
             &:hover {
-              color: $color5;
-              background-color: darken($color1, 5%);
+              color: $primary-text-color;
+              background-color: darken($ui-base-color, 5%);
               transition: all 100ms linear;
             }
 
             &.selected {
-              color: $color5;
-              background-color: $color4;
+              color: $primary-text-color;
+              background-color: $ui-highlight-color;
 
               &:hover {
-                background-color: lighten($color4, 5%);
+                background-color: lighten($ui-highlight-color, 5%);
               }
             }
           }
@@ -295,7 +295,7 @@
     flex-direction: column;
 
     .sidebar {
-      border: 1px solid lighten($color1, 10%);
+      border: 1px solid lighten($ui-base-color, 10%);
       width: auto;
     }
   }
@@ -341,10 +341,10 @@
   .closed-registrations-message {
     width: 300px;
     flex: 0 0 auto;
-    background: rgba(darken($color1, 7%), 0.5);
+    background: rgba(darken($ui-base-color, 7%), 0.5);
     padding: 14px;
     border-radius: 4px;
-    box-shadow: 0 0 15px rgba($color8, 0.4);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
 
     .actions {
       margin-bottom: 0;
@@ -354,7 +354,7 @@
       text-align: center;
 
       a {
-        color: $color2;
+        color: $ui-secondary-color;
       }
     }
   }
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index e1fa28f43..b2b807a82 100644
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -1,10 +1,10 @@
 .card {
-  background: $color1;
+  background: $ui-base-color;
   background-size: cover;
   padding: 60px 0;
   padding-bottom: 0;
   border-radius: 4px 4px 0 0;
-  box-shadow: 0 0 15px rgba($color8, 0.2);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   overflow: hidden;
   position: relative;
 
@@ -14,7 +14,7 @@
   }
 
   &::after {
-    background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
+    background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
     display: block;
     content: "";
     position: absolute;
@@ -29,17 +29,17 @@
     display: block;
     font-size: 20px;
     line-height: 18px * 1.5;
-    color: $color5;
+    color: $primary-text-color;
     font-weight: 500;
     text-align: center;
     position: relative;
     z-index: 2;
-    text-shadow: 0 0 2px $color8;
+    text-shadow: 0 0 2px $base-shadow-color;
 
     small {
       display: block;
       font-size: 14px;
-      color: $color4;
+      color: $ui-highlight-color;
       font-weight: 400;
     }
   }
@@ -82,10 +82,10 @@
 
   .counter {
     width: 80px;
-    color: $color3;
+    color: $ui-primary-color;
     padding: 5px 10px 0;
     margin-bottom: 10px;
-    border-right: 1px solid $color3;
+    border-right: 1px solid $ui-primary-color;
     cursor: default;
     position: relative;
 
@@ -100,14 +100,14 @@
       bottom: -10px;
       left: 0;
       width: 100%;
-      border-bottom: 4px solid $color3;
+      border-bottom: 4px solid $ui-primary-color;
       opacity: 0.5;
       transition: all 0.8s ease;
     }
 
     &.active {
       &::after {
-        border-bottom: 4px solid $color4;
+        border-bottom: 4px solid $ui-highlight-color;
         opacity: 1;
       }
     }
@@ -129,13 +129,13 @@
       text-transform: uppercase;
       display: block;
       margin-bottom: 5px;
-      text-shadow: 0 0 2px $color8;
+      text-shadow: 0 0 2px $base-shadow-color;
     }
 
     .counter-number {
       font-weight: 500;
       font-size: 18px;
-      color: $color5;
+      color: $primary-text-color;
     }
   }
 
@@ -144,7 +144,7 @@
     font-size: 14px;
     line-height: 18px;
     padding: 5px 10px;
-    color: $color2;
+    color: $ui-secondary-color;
     order: 1;
   }
 
@@ -180,7 +180,7 @@
   .page,
   .gap {
     font-size: 14px;
-    color: $color5;
+    color: $primary-text-color;
     font-weight: 500;
     display: inline-block;
     padding: 6px 10px;
@@ -188,9 +188,9 @@
   }
 
   .current {
-    background: $color5;
+    background: $simple-background-color;
     border-radius: 100px;
-    color: $color1;
+    color: $ui-base-color;
     cursor: default;
     margin: 0 10px;
   }
@@ -202,7 +202,7 @@
   .prev,
   .next {
     text-transform: uppercase;
-    color: $color2;
+    color: $ui-secondary-color;
   }
 
   .prev {
@@ -227,7 +227,7 @@
 
   .disabled {
     cursor: default;
-    color: lighten($color1, 10%);
+    color: lighten($ui-base-color, 10%);
   }
 
   @media screen and (max-width: 360px) {
@@ -249,8 +249,8 @@
 }
 
 .accounts-grid {
-  box-shadow: 0 0 15px rgba($color8, 0.2);
-  background: $color5;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  background: $simple-background-color;
   border-radius: 0 0 4px 4px;
   padding: 20px 10px;
   padding-bottom: 10px;
@@ -266,9 +266,9 @@
   .account-grid-card {
     box-sizing: border-box;
     width: 335px;
-    border: 1px solid $color2;
+    border: 1px solid $ui-secondary-color;
     border-radius: 4px;
-    color: $color1;
+    color: $ui-base-color;
     margin-bottom: 10px;
 
     &:nth-child(odd) {
@@ -278,7 +278,7 @@
     .account-grid-card__header {
       overflow: hidden;
       padding: 10px;
-      border-bottom: 1px solid $color2;
+      border-bottom: 1px solid $ui-secondary-color;
     }
 
     .avatar {
@@ -300,7 +300,7 @@
 
       a {
         display: block;
-        color: $color1;
+        color: $ui-base-color;
         text-decoration: none;
 
         &:hover {
@@ -317,20 +317,20 @@
     }
 
     .username {
-      color: $color4;
+      color: $ui-highlight-color;
     }
 
     .note {
       padding: 10px;
       padding-top: 15px;
-      color: $color3;
+      color: $ui-primary-color;
       word-wrap: break-word;
     }
   }
 }
 
 .nothing-here {
-  color: $color3;
+  color: $ui-primary-color;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -341,10 +341,10 @@
 
 .account-card {
   padding: 14px 10px;
-  background: $color5;
+  background: $simple-background-color;
   border-radius: 4px;
   text-align: left;
-  box-shadow: 0 0 15px rgba($color8, 0.2);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
   .detailed-status__display-name {
     display: block;
@@ -377,12 +377,12 @@
 
       strong {
         font-weight: 500;
-        color: $color1;
+        color: $ui-base-color;
       }
 
       span {
         font-size: 14px;
-        color: $color3;
+        color: $ui-primary-color;
       }
     }
 
@@ -397,6 +397,6 @@
 
   .account__header__content {
     font-size: 14px;
-    color: $color1;
+    color: $ui-base-color;
   }
 }
diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss
index 3442464e7..3d3623154 100644
--- a/app/javascript/styles/admin.scss
+++ b/app/javascript/styles/admin.scss
@@ -6,7 +6,7 @@
   .sidebar-wrapper {
     flex: 1;
     height: 100%;
-    background: $color1;
+    background: $ui-base-color;
     display: flex;
     justify-content: flex-end;
   }
@@ -33,7 +33,7 @@
       a {
         display: block;
         padding: 15px 25px;
-        color: rgba($color5, 0.7);
+        color: rgba($primary-text-color, 0.7);
         text-decoration: none;
         transition: all 200ms linear;
         border-radius: 4px 0 0 4px;
@@ -43,19 +43,19 @@
         }
 
         &:hover {
-          color: $color5;
-          background-color: darken($color1, 5%);
+          color: $primary-text-color;
+          background-color: darken($ui-base-color, 5%);
           transition: all 100ms linear;
         }
 
         &.selected {
-          background: darken($color1, 2%);
+          background: darken($ui-base-color, 2%);
           border-radius: 4px 0 0;
         }
       }
 
       ul {
-        background: darken($color1, 4%);
+        background: darken($ui-base-color, 4%);
         border-radius: 0 0 0 4px;
         margin: 0;
 
@@ -63,13 +63,13 @@
           border: 0;
 
           &.selected {
-            color: $color5;
-            background-color: $color4;
+            color: $primary-text-color;
+            background-color: $ui-highlight-color;
             border-bottom: 0;
             border-radius: 0;
 
             &:hover {
-              background-color: lighten($color4, 5%);
+              background-color: lighten($ui-highlight-color, 5%);
             }
           }
         }
@@ -89,7 +89,7 @@
     padding-left: 25px;
 
     h2 {
-      color: $color2;
+      color: $ui-secondary-color;
       font-size: 24px;
       line-height: 28px;
       font-weight: 400;
@@ -99,11 +99,11 @@
     & > p {
       font-size: 14px;
       line-height: 18px;
-      color: $color2;
+      color: $ui-secondary-color;
       margin-bottom: 20px;
 
       strong {
-        color: $color5;
+        color: $primary-text-color;
         font-weight: 500;
       }
     }
@@ -112,7 +112,7 @@
       margin: 20px 0;
       border: 0;
       background: transparent;
-      border-bottom: 1px solid $color1;
+      border-bottom: 1px solid $ui-base-color;
     }
   }
 
@@ -185,21 +185,21 @@
 
     a {
       display: inline-block;
-      color: rgba($color5, 0.7);
+      color: rgba($primary-text-color, 0.7);
       text-decoration: none;
       text-transform: uppercase;
       font-size: 12px;
       font-weight: 500;
-      border-bottom: 2px solid $color1;
+      border-bottom: 2px solid $ui-base-color;
 
       &:hover {
-        color: $color5;
-        border-bottom: 2px solid lighten($color1, 5%);
+        color: $primary-text-color;
+        border-bottom: 2px solid lighten($ui-base-color, 5%);
       }
 
       &.selected {
-        color: $color4;
-        border-bottom: 2px solid $color4;
+        color: $ui-highlight-color;
+        border-bottom: 2px solid $ui-highlight-color;
       }
     }
   }
@@ -221,7 +221,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;
-    color: $color2;
+    color: $ui-secondary-color;
   }
 
   &:first-child {
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index e49c2214a..08121f03e 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -1,12 +1,12 @@
 body {
   font-family: 'mastodon-font-sans-serif', sans-serif;
-  background: $color1 url('../images/background-photo.jpg');
+  background: $ui-base-color url('../images/background-photo.jpg');
   background-size: cover;
   background-attachment: fixed;
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
-  color: $color5;
+  color: $primary-text-color;
   padding-bottom: 140px;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
@@ -17,7 +17,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 0;
-    background: $color1;
+    background: $ui-base-color;
   }
 
   &.embed {
@@ -33,7 +33,7 @@ body {
   }
 
   &.admin {
-    background: darken($color1, 4%);
+    background: darken($ui-base-color, 4%);
     position: fixed;
     width: 100%;
     height: 100%;
diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss
index 90511c88c..7589828c6 100644
--- a/app/javascript/styles/boost.scss
+++ b/app/javascript/styles/boost.scss
@@ -3,9 +3,9 @@
 }
 
 button.icon-button i.fa-retweet {
-  background-image: 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='#{url-friendly-colour(lighten($color1, 26%))}' 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='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>");
+  background-image: 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='#{url-friendly-colour(lighten($ui-base-color, 26%))}' 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='#{url-friendly-colour($ui-highlight-color)}' stroke-width='0'/></svg>");
 
   &:hover {
-    background-image: 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='#{url-friendly-colour(lighten($color1, 33%))}' 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='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>");
+    background-image: 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='#{url-friendly-colour(lighten($ui-base-color, 33%))}' 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='#{url-friendly-colour($ui-highlight-color)}' stroke-width='0'/></svg>");
   }
 }
diff --git a/app/javascript/styles/compact_header.scss b/app/javascript/styles/compact_header.scss
index 8fef05f0f..27a67135f 100644
--- a/app/javascript/styles/compact_header.scss
+++ b/app/javascript/styles/compact_header.scss
@@ -2,7 +2,7 @@
   h1 {
     font-size: 24px;
     line-height: 28px;
-    color: $color3;
+    color: $ui-primary-color;
     overflow: hidden;
     font-weight: 500;
     margin-bottom: 20px;
@@ -14,7 +14,7 @@
 
     small {
       font-weight: 400;
-      color: $color2;
+      color: $ui-secondary-color;
     }
 
     img {
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index beaa5dd71..4edaf5ae7 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -6,11 +6,11 @@
 }
 
 .button {
-  background-color: darken($color4, 3%);
+  background-color: darken($ui-highlight-color, 3%);
   border: 10px none;
   border-radius: 4px;
   box-sizing: border-box;
-  color: $color5;
+  color: $primary-text-color;
   cursor: pointer;
   display: inline-block;
   font-family: inherit;
@@ -32,12 +32,12 @@
   &:active,
   &:focus,
   &:hover {
-    background-color: lighten($color4, 7%);
+    background-color: lighten($ui-highlight-color, 7%);
     transition: all 200ms ease-out;
   }
 
   &:disabled {
-    background-color: $color3;
+    background-color: $ui-primary-color;
     cursor: default;
   }
 
@@ -51,8 +51,8 @@
 }
 
 .column-icon {
-  background: lighten($color1, 4%);
-  color: $color3;
+  background: lighten($ui-base-color, 4%);
+  color: $ui-primary-color;
   cursor: pointer;
   font-size: 16px;
   padding: 15px;
@@ -62,7 +62,7 @@
   z-index: 3;
 
   &:hover {
-    color: lighten($color3, 7%);
+    color: lighten($ui-primary-color, 7%);
   }
 }
 
@@ -85,7 +85,7 @@
 .icon-button {
   display: inline-block;
   padding: 0;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   border: none;
   background: transparent;
   cursor: pointer;
@@ -94,17 +94,17 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($color1, 33%);
+    color: lighten($ui-base-color, 33%);
     transition: color 200ms ease-out;
   }
 
   &.disabled {
-    color: lighten($color1, 13%);
+    color: lighten($ui-base-color, 13%);
     cursor: default;
   }
 
   &.active {
-    color: $color4;
+    color: $ui-highlight-color;
   }
 
   &::-moz-focus-inner {
@@ -118,38 +118,38 @@
   }
 
   &.inverted {
-    color: lighten($color1, 33%);
+    color: lighten($ui-base-color, 33%);
 
     &:hover,
     &:active,
     &:focus {
-      color: lighten($color1, 26%);
+      color: lighten($ui-base-color, 26%);
     }
 
     &.active {
-      color: $color4;
+      color: $ui-highlight-color;
     }
 
     &.disabled {
-      color: $color3;
+      color: $ui-primary-color;
     }
   }
 
   &.overlayed {
     box-sizing: content-box;
-    background: rgba($color8, 0.6);
-    color: rgba($color5, 0.7);
+    background: rgba($base-overlay-background, 0.6);
+    color: rgba($primary-text-color, 0.7);
     border-radius: 4px;
     padding: 2px;
 
     &:hover {
-      background: rgba($color8, 0.9);
+      background: rgba($base-overlay-background, 0.9);
     }
   }
 }
 
 .text-icon-button {
-  color: lighten($color1, 33%);
+  color: lighten($ui-base-color, 33%);
   border: none;
   background: transparent;
   cursor: pointer;
@@ -163,17 +163,17 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
     transition: color 200ms ease-out;
   }
 
   &.disabled {
-    color: lighten($color1, 13%);
+    color: lighten($ui-base-color, 13%);
     cursor: default;
   }
 
   &.active {
-    color: $color4;
+    color: $ui-highlight-color;
   }
 
   &::-moz-focus-inner {
@@ -188,7 +188,7 @@
 }
 
 .dropdown--active .icon-button {
-  color: $color4;
+  color: $ui-highlight-color;
 }
 
 .dropdown--active::after {
@@ -199,7 +199,7 @@
   height: 0;
   border-style: solid;
   border-width: 0 4.5px 7.8px;
-  border-color: transparent transparent $color2;
+  border-color: transparent transparent $ui-secondary-color;
   bottom: 8px;
   right: 104px;
 }
@@ -218,7 +218,7 @@
 }
 
 .lightbox .icon-button {
-  color: $color1;
+  color: $ui-base-color;
 }
 
 .compose-form {
@@ -226,22 +226,22 @@
 }
 
 .compose-form__warning {
-  color: darken($color3, 33%);
+  color: darken($ui-secondary-color, 33%);
   margin-bottom: 15px;
-  background: $color3;
-  box-shadow: 0 2px 6px rgba($color8, 0.3);
+  background: $ui-primary-color;
+  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
   padding: 8px 10px;
   border-radius: 4px;
   font-size: 13px;
   font-weight: 400;
 
   strong {
-    color: darken($color3, 33%);
+    color: darken($primary-text-color, 33%);
     font-weight: 500;
   }
 
   a {
-    color: darken($color3, 33%);
+    color: darken($ui-primary-color, 33%);
     font-weight: 500;
     text-decoration: underline;
 
@@ -254,10 +254,10 @@
 }
 
 .compose-form__modifiers {
-  color: $color1;
+  color: $ui-base-color;
   font-family: inherit;
   font-size: 14px;
-  background: $color5;
+  background: $simple-background-color;
   border-radius: 0 0 4px;
 }
 
@@ -268,8 +268,8 @@
 
 .compose-form__buttons {
   padding: 10px;
-  background: darken($color5, 8%);
-  box-shadow: inset 0 5px 5px rgba($color8, 0.05);
+  background: darken($simple-background-color, 8%);
+  box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
   border-radius: 0 0 4px 4px;
   display: flex;
 
@@ -319,7 +319,7 @@
   vertical-align: middle;
 
   &.with-border {
-    border-top: 1px solid $color1;
+    border-top: 1px solid $ui-base-color;
     padding-top: 10px;
   }
 
@@ -328,16 +328,16 @@
     vertical-align: middle;
     margin-bottom: 14px;
     margin-left: 8px;
-    color: $color3;
+    color: $ui-primary-color;
   }
 }
 
 .compose-form__textarea,
 .follow-form__input {
-  background: $color5;
+  background: $simple-background-color;
 
   &:disabled {
-    background: $color2;
+    background: $ui-secondary-color;
   }
 }
 
@@ -345,7 +345,7 @@
   position: relative;
 
   .dropdown--active::after {
-    border-color: transparent transparent $color5;
+    border-color: transparent transparent $base-border-color;
     bottom: -1px;
     right: 8px;
   }
@@ -378,7 +378,7 @@
   border-radius: 4px 4px 0 0;
   position: relative;
   bottom: -2px;
-  background: $color3;
+  background: $ui-primary-color;
   padding: 10px;
 }
 
@@ -393,7 +393,7 @@
 }
 
 .reply-indicator__display-name {
-  color: $color1;
+  color: $ui-base-color;
   display: block;
   max-width: 100%;
   line-height: 24px;
@@ -438,14 +438,14 @@
   }
 
   a {
-    color: $color2;
+    color: $ui-secondary-color;
     text-decoration: none;
 
     &:hover {
       text-decoration: underline;
 
       .fa {
-        color: lighten($color1, 40%);
+        color: lighten($ui-base-color, 40%);
       }
     }
 
@@ -460,15 +460,15 @@
     }
 
     .fa {
-      color: lighten($color1, 30%);
+      color: lighten($ui-base-color, 30%);
     }
   }
 
   .status__content__spoiler-link {
-    background: lighten($color1, 30%);
+    background: lighten($ui-base-color, 30%);
 
     &:hover {
-      background: lighten($color1, 33%);
+      background: lighten($ui-base-color, 33%);
       text-decoration: none;
     }
   }
@@ -477,7 +477,7 @@
 a.status__content__spoiler-link {
   display: inline-block;
   border-radius: 2px;
-  color: lighten($color1, 8%);
+  color: lighten($ui-base-color, 8%);
   font-weight: 500;
   font-size: 11px;
   padding: 0 6px;
@@ -495,41 +495,41 @@ a.status__content__spoiler-link {
   padding-left: 68px;
   position: relative;
   min-height: 48px;
-  border-bottom: 1px solid lighten($color1, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
 
   &.light {
     .status__relative-time {
-      color: $color3;
+      color: $ui-primary-color;
     }
 
     .status__display-name {
-      color: $color1;
+      color: $ui-base-color;
     }
 
     .display-name {
       strong {
-        color: $color1;
+        color: $ui-base-color;
       }
 
       span {
-        color: $color3;
+        color: $ui-primary-color;
       }
     }
 
     .status__content {
-      color: $color1;
+      color: $ui-base-color;
 
       a {
-        color: $color4;
+        color: $ui-highlight-color;
       }
 
       a.status__content__spoiler-link {
-        color: $color5;
-        background: $color3;
+        color: $primary-text-color;
+        background: $ui-primary-color;
 
         &:hover {
-          background: lighten($color3, 8%);
+          background: lighten($ui-primary-color, 8%);
         }
       }
     }
@@ -537,11 +537,11 @@ a.status__content__spoiler-link {
 }
 
 .status__relative-time {
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
 }
 
 .status__display-name {
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
 }
 
 .status__info .status__display-name {
@@ -560,11 +560,11 @@ a.status__content__spoiler-link {
 }
 
 .status-check-box {
-  border-bottom: 1px solid lighten($color1, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
 
   .status__content {
-    background: lighten($color1, 4%);
+    background: lighten($ui-base-color, 4%);
     flex: 1 1 auto;
     padding: 10px;
   }
@@ -580,14 +580,14 @@ a.status__content__spoiler-link {
 
 .status__prepend {
   margin-left: 68px;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   padding: 8px 0;
   padding-bottom: 2px;
   font-size: 14px;
   position: relative;
 
   .status__display-name strong {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
   }
 }
 
@@ -609,7 +609,7 @@ a.status__content__spoiler-link {
 }
 
 .detailed-status {
-  background: lighten($color1, 4%);
+  background: lighten($ui-base-color, 4%);
   padding: 14px 10px;
 
   .status__content {
@@ -625,15 +625,15 @@ a.status__content__spoiler-link {
 
 .detailed-status__meta {
   margin-top: 15px;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   font-size: 14px;
   line-height: 18px;
 }
 
 .detailed-status__action-bar {
-  background: lighten($color1, 4%);
-  border-top: 1px solid lighten($color1, 8%);
-  border-bottom: 1px solid lighten($color1, 8%);
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -653,22 +653,22 @@ a.status__content__spoiler-link {
 }
 
 .reply-indicator__content {
-  color: $color1;
+  color: $ui-base-color;
   font-size: 14px;
 
   a {
-    color: lighten($color1, 20%);
+    color: lighten($ui-base-color, 20%);
   }
 }
 
 .account {
   padding: 10px;
-  border-bottom: 1px solid lighten($color1, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   .account__display-name {
     flex: 1 1 auto;
     display: block;
-    color: $color3;
+    color: $ui-primary-color;
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -722,31 +722,31 @@ a.status__content__spoiler-link {
 
 .account__header {
   flex: 0 0 auto;
-  background: lighten($color1, 4%);
+  background: lighten($ui-base-color, 4%);
   text-align: center;
   background-size: cover;
   background-position: center;
   position: relative;
 
   & > div {
-    background: rgba(lighten($color1, 4%), 0.9);
+    background: rgba(lighten($ui-base-color, 4%), 0.9);
   }
 
   .account__header__content {
-    color: $color2;
+    color: $ui-secondary-color;
   }
 
   .account__header__display-name {
-    color: $color5;
+    color: $primary-text-color;
   }
 
   .account__header__username {
-    color: $color4;
+    color: $ui-highlight-color;
   }
 }
 
 .account__header__content {
-  color: $color3;
+  color: $ui-primary-color;
   font-size: 14px;
   font-weight: 400;
   overflow: hidden;
@@ -779,8 +779,8 @@ a.status__content__spoiler-link {
 }
 
 .account__action-bar {
-  border-top: 1px solid lighten($color1, 8%);
-  border-bottom: 1px solid lighten($color1, 8%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
   line-height: 36px;
   overflow: hidden;
   flex: 0 0 auto;
@@ -816,25 +816,25 @@ a.status__content__spoiler-link {
   text-decoration: none;
   overflow: hidden;
   width: 80px;
-  border-left: 1px solid lighten($color1, 8%);
+  border-left: 1px solid lighten($ui-base-color, 8%);
   padding: 10px 5px;
 
   & > span {
     display: block;
     text-transform: uppercase;
     font-size: 11px;
-    color: $color3;
+    color: $ui-primary-color;
   }
 
   strong {
     display: block;
     font-size: 15px;
     font-weight: 500;
-    color: $color5;
+    color: $primary-text-color;
   }
 
   abbr {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
   }
 }
 
@@ -874,7 +874,7 @@ a.status__content__spoiler-link {
 .status__display-name,
 .account__display-name {
   strong {
-    color: $color5;
+    color: $primary-text-color;
   }
 
   &.muted {
@@ -903,7 +903,7 @@ a.status__content__spoiler-link {
 }
 
 .detailed-status__display-name {
-  color: $color2;
+  color: $ui-secondary-color;
   display: block;
   line-height: 24px;
   margin-bottom: 15px;
@@ -916,7 +916,7 @@ a.status__content__spoiler-link {
 
   strong {
     font-size: 16px;
-    color: $color5;
+    color: $primary-text-color;
   }
 }
 
@@ -936,11 +936,11 @@ a.status__content__spoiler-link {
 .muted {
   .status__content p,
   .status__content a {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
   }
 
   .status__display-name strong {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
   }
 
   .status__avatar {
@@ -948,11 +948,11 @@ a.status__content__spoiler-link {
   }
 
   a.status__content__spoiler-link {
-    background: lighten($color1, 26%);
-    color: lighten($color1, 4%);
+    background: lighten($ui-base-color, 26%);
+    color: lighten($ui-base-color, 4%);
 
     &:hover {
-      background: lighten($color1, 29%);
+      background: lighten($ui-base-color, 29%);
       text-decoration: none;
     }
   }
@@ -963,12 +963,12 @@ a.status__content__spoiler-link {
   padding: 8px 0;
   padding-bottom: 0;
   cursor: default;
-  color: $color3;
+  color: $ui-primary-color;
   font-size: 15px;
   position: relative;
 
   .fa {
-    color: $color4;
+    color: $ui-highlight-color;
   }
 }
 
@@ -977,12 +977,12 @@ a.status__content__spoiler-link {
   position: absolute;
 
   .star-icon {
-    color: $color10;
+    color: $gold-star;
   }
 }
 
 .star-icon.active {
-  color: $color10;
+  color: $gold-star;
 }
 
 .notification__display-name {
@@ -991,7 +991,7 @@ a.status__content__spoiler-link {
   text-decoration: none;
 
   &:hover {
-    color: $color5;
+    color: $primary-text-color;
     text-decoration: underline;
   }
 }
@@ -1033,10 +1033,10 @@ a.status__content__spoiler-link {
   display: flex;
   flex-shrink: 0;
   cursor: default;
-  color: $color3;
+  color: $ui-primary-color;
 
   strong {
-    color: $color5;
+    color: $primary-text-color;
   }
 
   .permalink {
@@ -1069,7 +1069,7 @@ a.status__content__spoiler-link {
 }
 
 .dropdown__sep {
-  border-bottom: 1px solid darken($color2, 8%);
+  border-bottom: 1px solid darken($ui-secondary-color, 8%);
   margin: 5px 7px 6px;
   padding-top: 1px;
 }
@@ -1084,10 +1084,10 @@ a.status__content__spoiler-link {
 
   & > ul {
     list-style: none;
-    background: $color2;
+    background: $ui-secondary-color;
     padding: 4px 0;
     border-radius: 4px;
-    box-shadow: 0 0 15px rgba($color8, 0.4);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
     min-width: 140px;
     position: relative;
   }
@@ -1109,8 +1109,8 @@ a.status__content__spoiler-link {
     padding: 4px 14px;
     box-sizing: border-box;
     text-decoration: none;
-    background: $color2;
-    color: $color1;
+    background: $ui-secondary-color;
+    color: $ui-base-color;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1120,8 +1120,8 @@ a.status__content__spoiler-link {
     }
 
     &:hover {
-      background: $color4;
-      color: $color2;
+      background: $ui-highlight-color;
+      color: $ui-secondary-color;
     }
   }
 }
@@ -1133,7 +1133,7 @@ a.status__content__spoiler-link {
 .static-content {
   padding: 10px;
   padding-top: 20px;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
 
   h1 {
     font-size: 16px;
@@ -1171,7 +1171,7 @@ a.status__content__spoiler-link {
   flex-direction: column;
 
   > .scrollable {
-    background: $color1;
+    background: $ui-base-color;
   }
 }
 
@@ -1181,7 +1181,7 @@ a.status__content__spoiler-link {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: darken($color1, 7%);
+  background: darken($ui-base-color, 7%);
 }
 
 .drawer {
@@ -1197,7 +1197,7 @@ a.status__content__spoiler-link {
   flex: 1 1 auto;
   padding: 15px;
   padding-bottom: 13px;
-  color: $color3;
+  color: $ui-primary-color;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
@@ -1298,7 +1298,7 @@ a.status__content__spoiler-link {
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($color1, 13%);
+  background: lighten($ui-base-color, 13%);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1309,12 +1309,12 @@ a.status__content__spoiler-link {
   height: 100%;
 
   &.darker {
-    background: $color1;
+    background: $ui-base-color;
   }
 }
 
 .pseudo-drawer {
-  background: lighten($color1, 13%);
+  background: lighten($ui-base-color, 13%);
   font-size: 13px;
   text-align: left;
 }
@@ -1322,7 +1322,7 @@ a.status__content__spoiler-link {
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: lighten($color1, 8%);
+  background: lighten($ui-base-color, 8%);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -1331,7 +1331,7 @@ a.status__content__spoiler-link {
     transition: background 100ms ease-in;
 
     &:hover {
-      background: lighten($color1, 3%);
+      background: lighten($ui-base-color, 3%);
       transition: background 200ms ease-out;
     }
   }
@@ -1339,7 +1339,7 @@ a.status__content__spoiler-link {
 
 .tabs-bar {
   display: flex;
-  background: lighten($color1, 8%);
+  background: lighten($ui-base-color, 8%);
   flex: 0 0 auto;
   overflow-y: auto;
 }
@@ -1348,12 +1348,12 @@ a.status__content__spoiler-link {
   display: block;
   flex: 1 1 auto;
   padding: 15px 10px;
-  color: $color5;
+  color: $primary-text-color;
   text-decoration: none;
   text-align: center;
   font-size: 14px;
   font-weight: 500;
-  border-bottom: 2px solid lighten($color1, 8%);
+  border-bottom: 2px solid lighten($ui-base-color, 8%);
   transition: all 200ms linear;
 
   .fa {
@@ -1362,14 +1362,14 @@ a.status__content__spoiler-link {
   }
 
   &.active {
-    border-bottom: 2px solid $color4;
-    color: $color4;
+    border-bottom: 2px solid $ui-highlight-color;
+    color: $ui-highlight-color;
   }
 
   &:hover,
   &:focus,
   &:active {
-    background: lighten($color1, 14%);
+    background: lighten($ui-base-color, 14%);
     transition: all 100ms linear;
   }
 
@@ -1402,22 +1402,22 @@ a.status__content__spoiler-link {
   top: 100%;
   width: 100%;
   z-index: 99;
-  box-shadow: 0 0 15px rgba($color8, 0.4);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
 }
 
 .react-autosuggest__section-title {
-  background: $color3;
+  background: $ui-primary-color;
   padding: 4px 10px;
   font-weight: 500;
   cursor: default;
-  color: $color1;
+  color: $ui-base-color;
   text-transform: uppercase;
   font-size: 11px;
 }
 
 .react-autosuggest__suggestions-list {
-  background: $color2;
-  color: $color1;
+  background: $ui-secondary-color;
+  color: $ui-base-color;
   font-size: 14px;
 }
 
@@ -1427,8 +1427,8 @@ a.status__content__spoiler-link {
 }
 
 .react-autosuggest__suggestion--focused {
-  background: $color4;
-  color: $color5;
+  background: $ui-highlight-color;
+  color: $primary-text-color;
 }
 
 .scrollable {
@@ -1444,8 +1444,8 @@ a.status__content__spoiler-link {
 }
 
 .column-back-button {
-  background: lighten($color1, 4%);
-  color: $color4;
+  background: lighten($ui-base-color, 4%);
+  color: $ui-highlight-color;
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
@@ -1484,7 +1484,7 @@ a.status__content__spoiler-link {
   border: 0;
   padding: 0;
   user-select: none;
-  -webkit-tap-highlight-color: rgba($color8, 0);
+  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -1510,20 +1510,20 @@ a.status__content__spoiler-link {
   height: 24px;
   padding: 0;
   border-radius: 30px;
-  background-color: $color1;
+  background-color: $ui-base-color;
   transition: all 0.2s ease;
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: darken($color1, 10%);
+  background-color: darken($ui-base-color, 10%);
 }
 
 .react-toggle--checked .react-toggle-track {
-  background-color: $color4;
+  background-color: $ui-highlight-color;
 }
 
 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: lighten($color4, 10%);
+  background-color: lighten($ui-highlight-color, 10%);
 }
 
 .react-toggle-track-check {
@@ -1570,28 +1570,28 @@ a.status__content__spoiler-link {
   left: 1px;
   width: 22px;
   height: 22px;
-  border: 1px solid $color1;
+  border: 1px solid $ui-base-color;
   border-radius: 50%;
-  background-color: darken($color5, 2%);
+  background-color: darken($simple-background-color, 2%);
   box-sizing: border-box;
   transition: all 0.25s ease;
 }
 
 .react-toggle--checked .react-toggle-thumb {
   left: 27px;
-  border-color: $color4;
+  border-color: $ui-highlight-color;
 }
 
 .column-link {
-  background: lighten($color1, 8%);
-  color: $color5;
+  background: lighten($ui-base-color, 8%);
+  color: $primary-text-color;
   display: block;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
 
   &:hover {
-    background: lighten($color1, 11%);
+    background: lighten($ui-base-color, 11%);
   }
 
   &.hidden-on-mobile {
@@ -1607,8 +1607,8 @@ a.status__content__spoiler-link {
 }
 
 .column-subheading {
-  background: $color1;
-  color: lighten($color1, 26%);
+  background: $ui-base-color;
+  color: lighten($ui-base-color, 26%);
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 500;
@@ -1627,7 +1627,7 @@ a.status__content__spoiler-link {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  color: $color1;
+  color: $ui-base-color;
   padding: 10px;
   font-family: inherit;
   font-size: 14px;
@@ -1650,7 +1650,7 @@ a.status__content__spoiler-link {
 
 .autosuggest-textarea__textarea {
   min-height: 100px;
-  background: $color5;
+  background: $simple-background-color;
   border-radius: 4px 4px 0 0;
   padding-bottom: 0;
   padding-right: 10px + 22px;
@@ -1667,9 +1667,9 @@ a.status__content__spoiler-link {
   top: 100%;
   width: 100%;
   z-index: 99;
-  box-shadow: 0 0 15px rgba($color8, 0.4);
-  background: $color2;
-  color: $color1;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
+  background: $ui-secondary-color;
+  color: $ui-base-color;
   font-size: 14px;
 }
 
@@ -1678,12 +1678,12 @@ a.status__content__spoiler-link {
   cursor: pointer;
 
   &:hover {
-    background: darken($color2, 10%);
+    background: darken($ui-secondary-color, 10%);
   }
 
   &.selected {
-    background: $color4;
-    color: $color5;
+    background: $ui-highlight-color;
+    color: $base-border-color;
   }
 }
 
@@ -1718,7 +1718,7 @@ a.status__content__spoiler-link {
 }
 
 .character-counter--over {
-  color: $color9;
+  color: $warning-red;
 }
 
 .getting-started__wrapper {
@@ -1732,19 +1732,19 @@ a.status__content__spoiler-link {
   flex: 1 0 auto;
 
   p {
-    color: $color2;
+    color: $ui-secondary-color;
   }
 
   a {
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
   }
 }
 
 .setting-text {
-  color: $color3;
+  color: $ui-primary-color;
   background: transparent;
   border: none;
-  border-bottom: 2px solid $color3;
+  border-bottom: 2px solid $ui-primary-color;
   box-sizing: border-box;
   display: block;
   font-family: inherit;
@@ -1754,8 +1754,8 @@ a.status__content__spoiler-link {
 
   &:focus,
   &:active {
-    color: $color5;
-    border-bottom-color: $color4;
+    color: $primary-text-color;
+    border-bottom-color: $ui-highlight-color;
   }
 
   @media screen and (max-width: 600px) {
@@ -1787,15 +1787,15 @@ button.icon-button.active i.fa-retweet {
   display: flex;
   cursor: pointer;
   font-size: 14px;
-  border: 1px solid lighten($color1, 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   margin-top: 14px;
   text-decoration: none;
   overflow: hidden;
 
   &:hover {
-    background: lighten($color1, 8%);
+    background: lighten($ui-base-color, 8%);
   }
 }
 
@@ -1847,7 +1847,7 @@ button.icon-button.active i.fa-retweet {
   display: block;
   font-weight: 500;
   margin-bottom: 5px;
-  color: $color3;
+  color: $ui-primary-color;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1860,7 +1860,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .status-card__description {
-  color: $color3;
+  color: $ui-primary-color;
 }
 
 .status-card__host {
@@ -1871,7 +1871,7 @@ button.icon-button.active i.fa-retweet {
 
 .status-card__image {
   flex: 0 0 100px;
-  background: lighten($color1, 8%);
+  background: lighten($ui-base-color, 8%);
 }
 
 .status-card__image-image {
@@ -1884,13 +1884,13 @@ button.icon-button.active i.fa-retweet {
 
 .load-more {
   display: block;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   text-align: center;
   padding: 15px;
   text-decoration: none;
 
   &:hover {
-    background: lighten($color1, 2%);
+    background: lighten($ui-base-color, 2%);
   }
 }
 
@@ -1898,8 +1898,8 @@ button.icon-button.active i.fa-retweet {
   text-align: center;
   font-size: 16px;
   font-weight: 500;
-  color: lighten($color1, 16%);
-  background: $color1;
+  color: lighten($ui-base-color, 16%);
+  background: $ui-base-color;
   cursor: default;
   display: flex;
   flex: 1 1 auto;
@@ -1916,7 +1916,7 @@ button.icon-button.active i.fa-retweet {
 .column-header {
   padding: 15px;
   font-size: 16px;
-  background: lighten($color1, 4%);
+  background: lighten($ui-base-color, 4%);
   flex: 0 0 auto;
   cursor: pointer;
   position: relative;
@@ -1924,12 +1924,12 @@ button.icon-button.active i.fa-retweet {
   outline: 0;
 
   &.active {
-    box-shadow: 0 1px 0 rgba($color4, 0.3);
+    box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
   }
 
   &.active .fa {
-    color: $color4;
-    text-shadow: 0 0 10px rgba($color4, 0.4);
+    color: $ui-highlight-color;
+    text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
   }
 
   &.hidden-on-mobile {
@@ -1950,7 +1950,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .loading-indicator {
-  color: $color2;
+  color: $ui-secondary-color;
   font-size: 16px;
   font-weight: 500;
   padding-top: 120px;
@@ -1958,24 +1958,24 @@ button.icon-button.active i.fa-retweet {
 }
 
 .collapsable-collapsed {
-  color: $color3;
-  background: lighten($color1, 4%);
+  color: $ui-primary-color;
+  background: lighten($ui-base-color, 4%);
 }
 
 .collapsable {
-  color: $color5;
-  background: lighten($color1, 8%);
+  color: $primary-text-color;
+  background: lighten($ui-base-color, 8%);
 
   &:hover {
-    color: $color5;
-    background: lighten($color1, 8%);
+    color: $primary-text-color;
+    background: lighten($ui-base-color, 8%);
   }
 }
 
 .video-error-cover {
   align-items: center;
-  background: $color8;
-  color: $color5;
+  background: $base-overlay-background;
+  color: $primary-text-color;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -1989,8 +1989,8 @@ button.icon-button.active i.fa-retweet {
 
 .media-spoiler {
   align-items: center;
-  background: $color8;
-  color: $color5;
+  background: $base-overlay-background;
+  color: $primary-text-color;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -2015,19 +2015,19 @@ button.icon-button.active i.fa-retweet {
 .spoiler-button {
   left: 4px;
   position: absolute;
-  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
   top: 4px;
   z-index: 100;
 }
 
 .modal-container--preloader {
-  background: lighten($color1, 8%);
+  background: lighten($ui-base-color, 8%);
 }
 
 .account--panel {
-  background: lighten($color1, 4%);
-  border-top: 1px solid lighten($color1, 8%);
-  border-bottom: 1px solid lighten($color1, 8%);
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -2040,12 +2040,12 @@ button.icon-button.active i.fa-retweet {
 }
 
 .column-settings__outer {
-  background: lighten($color1, 8%);
+  background: lighten($ui-base-color, 8%);
   padding: 15px;
 }
 
 .column-settings__section {
-  color: $color3;
+  color: $ui-primary-color;
   cursor: default;
   display: block;
   font-weight: 500;
@@ -2054,9 +2054,9 @@ button.icon-button.active i.fa-retweet {
 
 .modal-container__nav {
   align-items: center;
-  background: rgba($color8, 0.5);
+  background: rgba($base-overlay-background, 0.5);
   box-sizing: border-box;
-  color: $color5;
+  color: $primary-text-color;
   cursor: pointer;
   display: flex;
   font-size: 24px;
@@ -2075,7 +2075,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .account--follows-info {
-  color: $color5;
+  color: $primary-text-color;
 }
 
 .setting-toggle__label {
@@ -2085,7 +2085,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .setting-toggle {
-  color: $color3;
+  color: $ui-primary-color;
   display: inline-block;
   margin-bottom: 14px;
   margin-left: 8px;
@@ -2100,14 +2100,14 @@ button.icon-button.active i.fa-retweet {
 }
 
 .report__target {
-  border-bottom: 1px solid lighten($color1, 4%);
-  color: $color2;
+  border-bottom: 1px solid lighten($ui-base-color, 4%);
+  color: $ui-secondary-color;
   flex: 0 0 auto;
   padding: 10px;
 
   strong {
     display: block;
-    color: $color5;
+    color: $primary-text-color;
     font-weight: 500;
   }
 }
@@ -2125,9 +2125,9 @@ button.icon-button.active i.fa-retweet {
   background: transparent;
   box-sizing: border-box;
   border: 0;
-  border-bottom: 2px solid $color3;
+  border-bottom: 2px solid $ui-primary-color;
   border-radius: 2px 2px 0 0;
-  color: $color5;
+  color: $primary-text-color;
   display: block;
   font-family: inherit;
   font-size: 14px;
@@ -2139,8 +2139,8 @@ button.icon-button.active i.fa-retweet {
 
   &:active,
   &:focus {
-    border-bottom-color: $color4;
-    background: rgba($color8, 0.1);
+    border-bottom-color: $ui-highlight-color;
+    background: rgba($base-overlay-background, 0.1);
   }
 }
 
@@ -2154,8 +2154,8 @@ button.icon-button.active i.fa-retweet {
 }
 
 .empty-column-indicator {
-  color: lighten($color1, 20%);
-  background: $color1;
+  color: lighten($ui-base-color, 20%);
+  background: $ui-base-color;
   text-align: center;
   padding: 20px;
   font-size: 15px;
@@ -2166,7 +2166,7 @@ button.icon-button.active i.fa-retweet {
   align-items: center;
 
   a {
-    color: $color4;
+    color: $ui-highlight-color;
     text-decoration: none;
 
     &:hover {
@@ -2186,7 +2186,7 @@ button.icon-button.active i.fa-retweet {
   pointer-events: none;
   height: 28px;
   z-index: 1;
-  background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%);
+  background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
 }
 
 @keyframes pulse {
@@ -2207,12 +2207,12 @@ button.icon-button.active i.fa-retweet {
 .emoji-dialog {
   width: 245px;
   height: 270px;
-  background: $color5;
+  background: $simple-background-color;
   box-sizing: border-box;
   border-radius: 4px;
   overflow: hidden;
   position: relative;
-  box-shadow: 0 0 8px rgba($color8, 0.2);
+  box-shadow: 0 0 8px rgba($base-shadow-color, 0.2);
 
   .emojione {
     margin: 0;
@@ -2256,7 +2256,7 @@ button.icon-button.active i.fa-retweet {
       }
 
       &.active {
-        border-bottom-color: $color4;
+        border-bottom-color: $ui-highlight-color;
 
         img,
         svg {
@@ -2294,7 +2294,7 @@ button.icon-button.active i.fa-retweet {
     font-size: 12px;
     text-transform: uppercase;
     font-weight: 500;
-    color: darken($color2, 18%);
+    color: darken($ui-secondary-color, 18%);
     cursor: default;
   }
 
@@ -2334,7 +2334,7 @@ button.icon-button.active i.fa-retweet {
         width: 7px;
         height: 7px;
         border-radius: 10px;
-        border: 2px solid $color5;
+        border: 2px solid $base-border-color;
         top: 2px;
         left: 2px;
       }
@@ -2343,7 +2343,7 @@ button.icon-button.active i.fa-retweet {
 
   .emoji-search-wrapper {
     padding: 10px;
-    border-bottom: 1px solid lighten($color2, 4%);
+    border-bottom: 1px solid lighten($ui-secondary-color, 4%);
   }
 
   .emoji-search {
@@ -2353,9 +2353,9 @@ button.icon-button.active i.fa-retweet {
     font-family: inherit;
     display: block;
     width: 100%;
-    background: rgba($color2, 0.3);
-    color: darken($color2, 18%);
-    border: 1px solid $color2;
+    background: rgba($ui-secondary-color, 0.3);
+    color: darken($ui-secondary-color, 18%);
+    border: 1px solid $ui-secondary-color;
     border-radius: 4px;
   }
 
@@ -2378,7 +2378,7 @@ button.icon-button.active i.fa-retweet {
     }
 
     &:hover {
-      background: lighten($color2, 3%);
+      background: lighten($ui-secondary-color, 3%);
 
       img,
       svg {
@@ -2400,7 +2400,7 @@ button.icon-button.active i.fa-retweet {
 
 .upload-area {
   align-items: center;
-  background: rgba($color8, 0.8);
+  background: rgba($base-overlay-background, 0.8);
   display: flex;
   height: 100%;
   justify-content: center;
@@ -2434,8 +2434,8 @@ button.icon-button.active i.fa-retweet {
   left: 0;
   z-index: -1;
   border-radius: 4px;
-  background: $color1;
-  box-shadow: 0 0 5px rgba($color8, 0.2);
+  background: $ui-base-color;
+  box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
 }
 
 .upload-area__content {
@@ -2443,16 +2443,16 @@ button.icon-button.active i.fa-retweet {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $color2;
+  color: $ui-secondary-color;
   font-size: 18px;
   font-weight: 500;
-  border: 2px dashed lighten($color1, 26%);
+  border: 2px dashed lighten($ui-base-color, 26%);
   border-radius: 4px;
 }
 
 .upload-progress {
   padding: 10px;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   overflow: hidden;
   display: flex;
 
@@ -2477,7 +2477,7 @@ button.icon-button.active i.fa-retweet {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: lighten($color1, 26%);
+  background: lighten($ui-base-color, 26%);
   position: relative;
   margin-top: 5px;
 }
@@ -2487,7 +2487,7 @@ button.icon-button.active i.fa-retweet {
   left: 0;
   top: 0;
   height: 6px;
-  background: $color4;
+  background: $ui-highlight-color;
   border-radius: 6px;
 }
 
@@ -2534,34 +2534,34 @@ button.icon-button.active i.fa-retweet {
   left: 0;
   top: 27px;
   width: 230px;
-  background: $color5;
+  background: $simple-background-color;
   border-radius: 0 4px 4px;
   z-index: 2;
   overflow: hidden;
 }
 
 .privacy-dropdown__option {
-  color: $color1;
+  color: $ui-base-color;
   padding: 10px;
   cursor: pointer;
   display: flex;
 
   &:hover,
   &.active {
-    background: $color4;
-    color: $color5;
+    background: $ui-highlight-color;
+    color: $primary-text-color;
 
     .privacy-dropdown__option__content {
-      color: $color5;
+      color: $primary-text-color;
 
       strong {
-        color: $color5;
+        color: $primary-text-color;
       }
     }
   }
 
   &.active:hover {
-    background: lighten($color4, 4%);
+    background: lighten($ui-highlight-color, 4%);
   }
 }
 
@@ -2574,25 +2574,25 @@ button.icon-button.active i.fa-retweet {
 
 .privacy-dropdown__option__content {
   flex: 1 1 auto;
-  color: darken($color3, 24%);
+  color: darken($ui-primary-color, 24%);
 
   strong {
     font-weight: 500;
     display: block;
-    color: $color1;
+    color: $ui-base-color;
   }
 }
 
 .privacy-dropdown.active {
   .privacy-dropdown__value {
-    background: $color5;
+    background: $simple-background-color;
     border-radius: 4px 4px 0 0;
-    box-shadow: 0 -4px 4px rgba($color8, 0.1);
+    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
   }
 
   .privacy-dropdown__dropdown {
     display: block;
-    box-shadow: 2px 4px 6px rgba($color8, 0.1);
+    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
   }
 }
 
@@ -2602,7 +2602,7 @@ button.icon-button.active i.fa-retweet {
 
 .search__input {
   padding-right: 30px;
-  color: $color2;
+  color: $ui-secondary-color;
   outline: 0;
   box-sizing: border-box;
   display: block;
@@ -2611,8 +2611,8 @@ button.icon-button.active i.fa-retweet {
   padding: 10px;
   padding-right: 30px;
   font-family: inherit;
-  background: $color1;
-  color: $color3;
+  background: $ui-base-color;
+  color: $ui-primary-color;
   font-size: 14px;
   margin: 0;
 
@@ -2627,7 +2627,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   &:focus {
-    background: lighten($color1, 4%);
+    background: lighten($ui-base-color, 4%);
   }
 
   @media screen and (max-width: 600px) {
@@ -2647,7 +2647,7 @@ button.icon-button.active i.fa-retweet {
     font-size: 18px;
     width: 18px;
     height: 18px;
-    color: $color2;
+    color: $ui-secondary-color;
     cursor: default;
     pointer-events: none;
 
@@ -2676,15 +2676,15 @@ button.icon-button.active i.fa-retweet {
     }
 
     &:hover {
-      color: $color5;
+      color: $primary-text-color;
     }
   }
 }
 
 .search-results__header {
-  color: lighten($color1, 26%);
-  background: lighten($color1, 2%);
-  border-bottom: 1px solid darken($color1, 4%);
+  color: lighten($ui-base-color, 26%);
+  background: lighten($ui-base-color, 2%);
+  border-bottom: 1px solid darken($ui-base-color, 4%);
   padding: 15px 10px;
   font-size: 14px;
   font-weight: 500;
@@ -2693,13 +2693,13 @@ button.icon-button.active i.fa-retweet {
 .search-results__hashtag {
   display: block;
   padding: 10px;
-  color: $color2;
+  color: $ui-secondary-color;
   text-decoration: none;
 
   &:hover,
   &:active,
   &:focus {
-    color: lighten($color2, 4%);
+    color: lighten($ui-secondary-color, 4%);
     text-decoration: underline;
   }
 }
@@ -2712,7 +2712,7 @@ button.icon-button.active i.fa-retweet {
   bottom: 0;
   z-index: 9999;
   opacity: 0;
-  background: rgba($color8, 0.7);
+  background: rgba($base-overlay-background, 0.7);
   transform: translateZ(0);
 }
 
@@ -2759,8 +2759,8 @@ button.icon-button.active i.fa-retweet {
 }
 
 .onboarding-modal {
-  background: $color2;
-  color: $color1;
+  background: $ui-secondary-color;
+  color: $ui-base-color;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
@@ -2810,7 +2810,7 @@ button.icon-button.active i.fa-retweet {
 
 .onboarding-modal__paginator {
   flex: 0 0 auto;
-  background: darken($color2, 8%);
+  background: darken($ui-secondary-color, 8%);
   display: flex;
   padding: 25px;
 
@@ -2819,7 +2819,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   a {
-    color: darken($color2, 34%);
+    color: darken($ui-secondary-color, 34%);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -2827,12 +2827,12 @@ button.icon-button.active i.fa-retweet {
     &:hover,
     &:focus,
     &:active {
-      color: darken($color2, 38%);
+      color: darken($ui-secondary-color, 38%);
     }
 
     &.onboarding-modal__done,
     &.onboarding-modal__next {
-      color: $color4;
+      color: $ui-highlight-color;
     }
   }
 }
@@ -2848,17 +2848,17 @@ button.icon-button.active i.fa-retweet {
   width: 14px;
   height: 14px;
   border-radius: 14px;
-  background: darken($color2, 16%);
+  background: darken($ui-secondary-color, 16%);
   margin: 0 3px;
   cursor: pointer;
 
   &:hover {
-    background: darken($color2, 18%);
+    background: darken($ui-secondary-color, 18%);
   }
 
   &.active {
     cursor: default;
-    background: darken($color2, 24%);
+    background: darken($ui-secondary-color, 24%);
   }
 }
 
@@ -2869,23 +2869,23 @@ button.icon-button.active i.fa-retweet {
   h1 {
     font-size: 18px;
     font-weight: 500;
-    color: $color1;
+    color: $ui-base-color;
     margin-bottom: 20px;
   }
 
   a {
-    color: $color4;
+    color: $ui-highlight-color;
 
     &:hover,
     &:focus,
     &:active {
-      color: lighten($color4, 4%);
+      color: lighten($ui-highlight-color, 4%);
     }
   }
 
   p {
     font-size: 16px;
-    color: lighten($color1, 8%);
+    color: lighten($ui-base-color, 8%);
     margin-top: 10px;
     margin-bottom: 10px;
 
@@ -2895,8 +2895,8 @@ button.icon-button.active i.fa-retweet {
 
     strong {
       font-weight: 500;
-      background: $color1;
-      color: $color2;
+      background: $ui-base-color;
+      color: $ui-secondary-color;
       border-radius: 4px;
       font-size: 14px;
       padding: 3px 6px;
@@ -2937,14 +2937,14 @@ button.icon-button.active i.fa-retweet {
   }
 
   .figure {
-    background: darken($color1, 8%);
-    color: $color2;
+    background: darken($ui-base-color, 8%);
+    color: $ui-secondary-color;
     margin-bottom: 20px;
     border-radius: 4px;
     padding: 10px;
     text-align: center;
     font-size: 14px;
-    box-shadow: 1px 2px 6px rgba($color8, 0.3);
+    box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
 
     .onboarding-modal__image {
       border-radius: 4px;
@@ -2986,7 +2986,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   .column-header {
-    color: $color5;
+    color: $primary-text-color;
   }
 }
 
@@ -3033,8 +3033,8 @@ button.icon-button.active i.fa-retweet {
 
 .boost-modal,
 .confirmation-modal {
-  background: lighten($color2, 8%);
-  color: $color1;
+  background: lighten($ui-secondary-color, 8%);
+  color: $ui-base-color;
   border-radius: 8px;
   overflow: hidden;
   max-width: 90vw;
@@ -3070,14 +3070,14 @@ button.icon-button.active i.fa-retweet {
 .boost-modal__action-bar,
 .confirmation-modal__action-bar {
   display: flex;
-  background: $color2;
+  background: $ui-secondary-color;
   padding: 10px;
   line-height: 36px;
 
   & > div {
     flex: 1 1 auto;
     text-align: right;
-    color: lighten($color1, 33%);
+    color: lighten($ui-base-color, 33%);
     padding-right: 10px;
   }
 
@@ -3110,7 +3110,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   a {
-    color: darken($color2, 34%);
+    color: darken($ui-secondary-color, 34%);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -3118,7 +3118,7 @@ button.icon-button.active i.fa-retweet {
     &:hover,
     &:focus,
     &:active {
-      color: darken($color2, 38%);
+      color: darken($ui-secondary-color, 38%);
     }
   }
 }
@@ -3134,7 +3134,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .loading-bar {
-  background-color: $color4;
+  background-color: $ui-highlight-color;
   height: 3px;
   position: absolute;
   top: 0;
@@ -3144,8 +3144,8 @@ button.icon-button.active i.fa-retweet {
 .media-gallery__gifv__label {
   display: block;
   position: absolute;
-  color: $color5;
-  background: rgba($color8, 0.5);
+  color: $primary-text-color;
+  background: rgba($base-overlay-background, 0.5);
   bottom: 6px;
   left: 6px;
   padding: 2px 6px;
@@ -3175,7 +3175,7 @@ button.icon-button.active i.fa-retweet {
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($color1, 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
   margin-top: 14px;
   overflow: hidden;
@@ -3183,10 +3183,10 @@ button.icon-button.active i.fa-retweet {
 
 .attachment-list__icon {
   flex: 0 0 auto;
-  color: lighten($color1, 26%);
+  color: lighten($ui-base-color, 26%);
   padding: 8px 18px;
   cursor: default;
-  border-right: 1px solid lighten($color1, 8%);
+  border-right: 1px solid lighten($ui-base-color, 8%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3213,7 +3213,7 @@ button.icon-button.active i.fa-retweet {
 
   a {
     text-decoration: none;
-    color: lighten($color1, 26%);
+    color: lighten($ui-base-color, 26%);
     font-weight: 500;
 
     &:hover {
@@ -3278,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
 
 /* Status Video Player */
 .status__video-player {
-  background: $color8;
+  background: $base-overlay-background;
   box-sizing: border-box;
   cursor: default; /* May not be needed */
   margin-top: 8px;
@@ -3298,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
 
 .status__video-player-expand,
 .status__video-player-mute {
-  color: $color5;
+  color: $primary-text-color;
   opacity: 0.8;
   position: absolute;
   right: 4px;
-  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
 }
 
 .status__video-player-spoiler {
-  color: $color5;
+  color: $primary-text-color;
   left: 4px;
   position: absolute;
-  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
   top: 4px;
   z-index: 100;
 }
@@ -3333,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
 
 .media-spoiler-video-play-icon {
   border-radius: 100px;
-  color: rgba($color5, 0.8);
+  color: rgba($primary-text-color, 0.8);
   font-size: 36px;
   left: 50%;
   padding: 5px;
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 3c489d5c8..390b9596c 100644
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -32,7 +32,7 @@
   h1 {
     display: block;
     text-align: center;
-    color: $color5;
+    color: $primary-text-color;
     font-size: 48px;
     font-weight: 500;
 
diff --git a/app/javascript/styles/footer.scss b/app/javascript/styles/footer.scss
index 90d430dfa..2d953b34e 100644
--- a/app/javascript/styles/footer.scss
+++ b/app/javascript/styles/footer.scss
@@ -2,7 +2,7 @@
   text-align: center;
   margin-top: 30px;
   font-size: 12px;
-  color: darken($color2, 25%);
+  color: darken($ui-secondary-color, 25%);
 
   .domain {
     font-weight: 500;
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index 20d28acb6..d66359943 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -16,7 +16,7 @@ code {
 
   span.hint {
     display: block;
-    color: $color3;
+    color: $ui-primary-color;
     font-size: 12px;
     margin-top: 4px;
   }
@@ -51,7 +51,7 @@ code {
     label {
       font-family: inherit;
       font-size: 16px;
-      color: $color5;
+      color: $primary-text-color;
       display: block;
       padding-top: 5px;
     }
@@ -65,7 +65,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: $color5;
+    color: $primary-text-color;
     display: block;
     width: auto;
   }
@@ -76,7 +76,7 @@ code {
     label {
       font-family: inherit;
       font-size: 14px;
-      color: $color5;
+      color: $primary-text-color;
       display: block;
       width: auto;
     }
@@ -108,11 +108,11 @@ code {
     background: transparent;
     box-sizing: border-box;
     border: 0;
-    border-bottom: 2px solid $color3;
+    border-bottom: 2px solid $ui-primary-color;
     border-radius: 2px 2px 0 0;
     padding: 7px 4px;
     font-size: 16px;
-    color: $color5;
+    color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
@@ -124,35 +124,35 @@ code {
     }
 
     &:focus:invalid {
-      border-bottom-color: $color6;
+      border-bottom-color: $error-value-color;
     }
 
     &:required:valid {
-      border-bottom-color: $color7;
+      border-bottom-color: $valid-value-color;
     }
 
     &:active,
     &:focus {
-      border-bottom-color: $color4;
-      background: rgba($color8, 0.1);
+      border-bottom-color: $ui-highlight-color;
+      background: rgba($base-overlay-background, 0.1);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: $color6;
+      color: $error-value-color;
     }
 
     input[type=text],
     input[type=email],
     input[type=password] {
-      border-bottom-color: $color6;
+      border-bottom-color: $error-value-color;
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: $color6;
+      color: $error-value-color;
       margin-top: 4px;
     }
   }
@@ -167,8 +167,8 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: $color4;
-    color: $color5;
+    background: $ui-highlight-color;
+    color: $primary-text-color;
     font-size: 18px;
     padding: 10px;
     text-transform: uppercase;
@@ -181,26 +181,26 @@ code {
     margin-bottom: 10px;
 
     &:hover {
-      background-color: lighten($color4, 5%);
+      background-color: lighten($ui-highlight-color, 5%);
     }
 
     &:active,
     &:focus {
       position: relative;
       top: 1px;
-      background-color: darken($color4, 5%);
+      background-color: darken($ui-highlight-color, 5%);
     }
 
     &.negative {
-      background: $color6;
+      background: $error-value-color;
 
       &:hover {
-        background-color: lighten($color6, 5%);
+        background-color: lighten($error-value-color, 5%);
       }
 
       &:active,
       &:focus {
-        background-color: darken($color6, 5%);
+        background-color: darken($error-value-color, 5%);
       }
     }
   }
@@ -211,12 +211,12 @@ code {
 }
 
 .flash-message {
-  background: $color1;
-  color: $color3;
+  background: $ui-base-color;
+  color: $ui-primary-color;
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
-  box-shadow: 0 0 5px rgba($color8, 0.2);
+  box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
   text-align: center;
 
   strong {
@@ -229,7 +229,7 @@ code {
   text-align: center;
 
   a {
-    color: $color5;
+    color: $primary-text-color;
     text-decoration: none;
 
     &:hover {
@@ -242,7 +242,7 @@ code {
 .follow-prompt {
   margin-bottom: 30px;
   text-align: center;
-  color: $color3;
+  color: $ui-primary-color;
 
   h2 {
     font-size: 16px;
@@ -250,7 +250,7 @@ code {
   }
 
   strong {
-    color: $color2;
+    color: $ui-secondary-color;
     font-weight: 500;
   }
 }
@@ -261,10 +261,10 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: $color5;
+  background: $simple-background-color;
   padding: 4px;
   margin-bottom: 20px;
-  box-shadow: 0 0 15px rgba($color8, 0.2);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   display: inline-block;
 
   svg {
@@ -275,7 +275,7 @@ code {
 
 .qr-alternative {
   margin-left: 10px;
-  color: $color3;
+  color: $ui-primary-color;
 
   samp {
     display: block;
@@ -296,16 +296,16 @@ code {
   .warning {
     max-width: 400px;
     box-sizing: border-box;
-    background: rgba($color6, 0.5);
-    color: $color5;
-    text-shadow: 1px 1px 0 rgba($color8, 0.3);
-    box-shadow: 0 2px 6px rgba($color8, 0.4);
+    background: rgba($error-value-color, 0.5);
+    color: $primary-text-color;
+    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
+    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
     border-radius: 4px;
     padding: 10px;
     margin-bottom: 15px;
 
     a {
-      color: $color5;
+      color: $primary-text-color;
       text-decoration: underline;
 
       &:hover,
diff --git a/app/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss
index 077827180..d2ac5b822 100644
--- a/app/javascript/styles/landing_strip.scss
+++ b/app/javascript/styles/landing_strip.scss
@@ -1,6 +1,6 @@
 .landing-strip {
-  background: rgba(darken($color1, 7%), 0.8);
-  color: $color3;
+  background: rgba(darken($ui-base-color, 7%), 0.8);
+  color: $ui-primary-color;
   font-weight: 400;
   padding: 14px;
   border-radius: 4px;
diff --git a/app/javascript/styles/reset.scss b/app/javascript/styles/reset.scss
index 71064cc31..cc5ba9d7c 100644
--- a/app/javascript/styles/reset.scss
+++ b/app/javascript/styles/reset.scss
@@ -59,31 +59,31 @@ table {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: lighten($color1, 4%);
-  border: 0px none $color5;
+  background: lighten($ui-base-color, 4%);
+  border: 0px none $base-border-color;
   border-radius: 50px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: lighten($color1, 6%);
+  background: lighten($ui-base-color, 6%);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: lighten($color1, 4%);
+  background: lighten($ui-base-color, 4%);
 }
 
 ::-webkit-scrollbar-track {
-  border: 0px none $color5;
+  border: 0px none $base-border-color;
   border-radius: 0;
-  background: rgba($color8, 0.1);
+  background: rgba($base-overlay-background, 0.1);
 }
 
 ::-webkit-scrollbar-track:hover {
-  background: $color1;
+  background: $ui-base-color;
 }
 
 ::-webkit-scrollbar-track:active {
-  background: $color1;
+  background: $ui-base-color;
 }
 
 ::-webkit-scrollbar-corner {
diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss
index bd679f00b..fcec32d44 100644
--- a/app/javascript/styles/stream_entries.scss
+++ b/app/javascript/styles/stream_entries.scss
@@ -1,13 +1,13 @@
 .activity-stream {
   clear: both;
-  box-shadow: 0 0 15px rgba($color8, 0.2);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
   .entry {
-    background: $color5;
+    background: $simple-background-color;
 
     .detailed-status.light,
     .status.light {
-      border-bottom: 1px solid $color2;
+      border-bottom: 1px solid $ui-secondary-color;
     }
 
     &:last-child {
@@ -50,7 +50,7 @@
         font-size: 14px;
 
         .status__relative-time {
-          color: $color4;
+          color: $ui-primary-color;
         }
       }
     }
@@ -59,7 +59,7 @@
       display: block;
       max-width: 100%;
       padding-right: 25px;
-      color: $color1;
+      color: $ui-base-color;
     }
 
     .status__avatar {
@@ -89,28 +89,28 @@
 
       strong {
         font-weight: 500;
-        color: $color1;
+        color: $ui-base-color;
       }
 
       span {
         font-size: 14px;
-        color: $color4;
+        color: $ui-primary-color;
       }
     }
 
     .status__content {
-      color: $color1;
+      color: $ui-base-color;
 
       a {
-        color: $color4;
+        color: $ui-highlight-color;
       }
 
       a.status__content__spoiler-link {
-        color: $color5;
-        background: $color3;
+        color: $primary-text-color;
+        background: $ui-primary-color;
 
         &:hover {
-          background: lighten($color3, 8%);
+          background: lighten($ui-primary-color, 8%);
         }
       }
     }
@@ -131,7 +131,7 @@
 
   .detailed-status.light {
     padding: 14px;
-    background: $color5;
+    background: $simple-background-color;
     cursor: default;
 
     .detailed-status__display-name {
@@ -153,12 +153,12 @@
 
         strong {
           font-weight: 500;
-          color: $color1;
+          color: $ui-base-color;
         }
 
         span {
           font-size: 14px;
-          color: $color3;
+          color: $ui-primary-color;
         }
       }
     }
@@ -174,25 +174,25 @@
     }
 
     .status__content {
-      color: $color1;
+      color: $ui-base-color;
 
       a {
-        color: $color4;
+        color: $ui-highlight-color;
       }
 
       a.status__content__spoiler-link {
-        color: $color5;
-        background: $color3;
+        color: $primary-text-color;
+        background: $ui-primary-color;
 
         &:hover {
-          background: lighten($color3, 8%);
+          background: lighten($ui-primary-color, 8%);
         }
       }
     }
 
     .detailed-status__meta {
       margin-top: 15px;
-      color: $color3;
+      color: $ui-primary-color;
       font-size: 14px;
       line-height: 18px;
 
@@ -291,13 +291,13 @@
       transform: translate(-50%, -50%);
       padding: 5px;
       border-radius: 100px;
-      color: rgba($color5, 0.8);
+      color: rgba($primary-text-color, 0.8);
       z-index: 1;
     }
   }
 
   .media-spoiler {
-    background: $color3;
+    background: $ui-primary-color;
     width: 100%;
     height: 100%;
     cursor: pointer;
@@ -313,7 +313,7 @@
     z-index: 2;
 
     &:hover {
-      background: darken($color3, 5%);
+      background: darken($ui-primary-color, 5%);
     }
 
     span {
@@ -335,7 +335,7 @@
     padding-left: (48px + 14px * 2);
     padding-bottom: 0;
     margin-bottom: -4px;
-    color: $color3;
+    color: $ui-primary-color;
     font-size: 14px;
     position: relative;
 
@@ -345,7 +345,7 @@
     }
 
     .status__display-name.muted strong {
-      color: $color3;
+      color: $ui-primary-color;
     }
   }
 
diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss
index ed0ef4468..f7def8cf3 100644
--- a/app/javascript/styles/tables.scss
+++ b/app/javascript/styles/tables.scss
@@ -10,13 +10,13 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-top: 1px solid $color1;
+    border-top: 1px solid $ui-base-color;
     text-align: left;
   }
 
   & > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid $color1;
+    border-bottom: 2px solid $ui-base-color;
     border-top: 0;
     font-weight: 500;
   }
@@ -27,11 +27,11 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: $color1;
+    background: $ui-base-color;
   }
 
   a {
-    color: $color4;
+    color: $ui-highlight-color;
     text-decoration: underline;
 
     &:hover {
@@ -53,11 +53,11 @@ a.table-action-link {
   display: inline-block;
   margin-right: 5px;
   padding: 0 10px;
-  color: rgba($color5, 0.7);
+  color: rgba($primary-text-color, 0.7);
   font-weight: 500;
 
   &:hover {
-    color: $color5;
+    color: $primary-text-color;
   }
 
   i.fa {
diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss
index 76b58426a..cdf70f027 100644
--- a/app/javascript/styles/variables.scss
+++ b/app/javascript/styles/variables.scss
@@ -1,10 +1,28 @@
-$color1: #282c37 !default; // darkest
-$color2: #d9e1e8 !default; // lightest
-$color3: #9baec8 !default; // lighter
-$color4: #2b90d9 !default; // vibrant
-$color5: #ffffff !default; // white
-$color6: #df405a !default; // error red
-$color7: #79bd9a !default; // succ green
-$color8: #000000 !default; // black
-$color9: #ff5050 !default; // red
-$color10: #ca8f04 !default; // dark goldenrod
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a;    // Padua
+$error-red: #df405a;        // Cerise
+$warning-red: #ff5050;      // Sunset Orange
+$gold-star: #ca8f04;        // Dark Goldenrod
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37;         // Midnight Express
+$classic-primary-color: #9baec8;      // Echo Blue
+$classic-secondary-color: #d9e1e8;    // Pattens Blue
+$classic-highlight-color: #2b90d9;    // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black;
+$base-overlay-background: $black;
+$base-border-color: $white;
+$simple-background-color: $white;
+$primary-text-color: $white;
+$valid-value-color: $success-green;
+$error-value-color: $error-red;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;             // Darkest
+$ui-primary-color: $classic-primary-color !default;       // Lighter
+$ui-secondary-color: $classic-secondary-color !default;   // Lightest
+$ui-highlight-color: $classic-highlight-color !default;   // Vibrant
generated by cgit-pink (git 2.37.1) at 2024-11-22 13:43:49 +0000