refactor: colors

src/client/bar.scss

@@ -25,6 +25,7 @@
 }
 
 .bar__brandItem {
+  color: $color-muted;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -59,7 +60,7 @@
     background-color: #272727;
   }
   &.active {
-    background-color: $active-color;
+    background-color: $color-active;
   }
   .closed &.active {
     background-color: #2a2a2a;

src/client/chat--left.scss

@@ -1,4 +1,5 @@
 @import '~/client/scss/breakpoints.scss';
+@import '~/client/scss/colors.scss';
 
 .left {
   background-color: #373737;
@@ -32,6 +33,7 @@
 }
 
 .channel__chatsTitle {
+  color: $color-muted;
   font-family: var(--thick-title-font-family);
   font-size: 0.7em;
   font-weight: bold;

src/client/home.scss

@@ -44,7 +44,7 @@
 }
 
 .home__login {
-  background-color: $active-color;
+  background-color: $color-active;
   display: inline-block;
   font-family: var(--thick-title-font-family);
   font-size: 2em;
@@ -52,7 +52,7 @@
   text-decoration: none;
   transition: background-color 0.2s;
   &:hover {
-    background-color: lighten($active-color, 10%);
+    background-color: lighten($color-active, 10%);
   }
 }
 

src/client/index.scss

@@ -143,7 +143,7 @@ select {
 }
 
 *:focus {
-  box-shadow: 0 0 2px 0 $active-color;
+  box-shadow: 0 0 2px 0 $color-active;
   outline: none;
   z-index: 1;
 }

src/client/scss/colors.scss

@@ -1 +1,2 @@
-$active-color: rgb(0, 99, 112);
+$color-active: rgb(0, 99, 112);
+$color-muted: #bbbbbb;