Replace all color literals with color variables

app/styles/components/loading-bar.scss

@@ -13,7 +13,7 @@
         height: 5px;
     }
 
-    $colors-list: #bbe831 #237400 #e43050 #810061 #618000;
+    $colors-list: $yellow-pear $green-japanese-laurel $red-amaranth $purple-eggplant $green-olive;
     @each $current-color in $colors-list {
         $i: index($colors-list, $current-color) - 1;
         .item-#{$i} {

app/styles/dependencies/colors.scss

@@ -5,9 +5,21 @@ $blackish: #050505;
 $grayer: #444;
 $gray: #555;
 $gray-light: #b8b8b8;
+$gray-tower-gray: #a6b2a7;
+$gray-saltpan: #e9f0da;
+$gray-silver: #cdcdcd;
+$gray46-47: #777;
+$gray60: #999;
+$gray80: #ccc;
+$gray87-88: #ddd;
+$gray-mine-shaft: #232323;
 $whitish: #f5f5f5;
 $white: #fff;
 
+$green-japanese-laurel: #237400;
+$green-olive: #618000;
+$green-christi: #74a218;
+
 $green-taiga: #72a114;
 $fresh-taiga: #9dce0a;
 $dark-taiga: #879b89;
@@ -15,6 +27,10 @@ $dark-taiga: #879b89;
 $red-light: #ff8282;
 $red: #f00;
 
+$red-amaranth: #e43050;
+$purple-eggplant: #810061;
+$yellow-pear: #bbe831;
+
 $postit: #fff8e4;
 $postit-hover: #f1e8cd;
 $postit-dark-hover: #cfc29b;

app/styles/layout/base.scss

@@ -5,8 +5,8 @@ html {
 }
 body {
     @extend %text;
-    background: #fff; // fallback
-    color: #444;
+    background: $white; // fallback
+    color: $grayer;
     min-height: 100%;
     width: 100%;
     .master {

app/styles/layout/elements.scss

@@ -3,17 +3,17 @@
 // Blockquotes
 blockquote,
 blockquote p {
-    color: #777;
+    color: $gray46-47;
     font-style: italic;
     line-height: 24px;
 }
 blockquote {
-    border-left: 1px solid #ddd;
+    border-left: 1px solid $gray87-88;
     margin: 0 0 20px;
     padding: 9px 20px 0 19px;
     cite {
         @extend %small;
-        color: #555;
+        color: $gray;
         display: block;
         &:before {
             content: '\2014 \0020';

app/styles/layout/invitation.scss

@@ -100,7 +100,7 @@
         text-align: center;
         width: 200px;
         .form-header {
-            color: #999;
+            color: $gray60;
         }
     }
     .register-form {

app/styles/layout/typography.scss

@@ -80,7 +80,7 @@ strong {
 }
 
 hr {
-    border: solid #ddd;
+    border: solid $gray87-88;
     border-width: 1px 0 0;
     clear: both;
     height: 0;

app/styles/modules/admin/admin-functionalities.scss

@@ -19,7 +19,7 @@
         vertical-align: top;
         width: 32%;
         &.active {
-            background-color: #e9f0da;
+            background-color: $gray-saltpan;
             opacity: 1;
         }
         .icon {

app/styles/modules/admin/admin-membership-table.scss

@@ -139,7 +139,7 @@
         }
         input:checked {
             + div {
-                background-color: #74a218;
+                background-color: $green-christi;
                 margin-left: 50%;
                 transition: all .2s linear;
             }

app/styles/modules/admin/admin-roles.scss

@@ -88,7 +88,7 @@
         }
         input:checked {
             + div {
-                background-color: #74a218;
+                background-color: $green-christi;
                 margin-left: 50%;
                 transition: all .2s linear;
             }
@@ -104,7 +104,7 @@
         input:disabled {
             cursor: auto;
             + div {
-                background-color: #ccc;
+                background-color: $gray80;
             }
         }
     }

app/styles/modules/admin/admin-submenu-roles.scss

@@ -6,7 +6,7 @@
     li {
         @extend %larger;
         @extend %title;
-        border-bottom: 1px solid #a6b2a7;
+        border-bottom: 1px solid $gray-tower-gray;
         text-transform: uppercase;
         &:last-child {
             border-bottom: 0;

app/styles/modules/admin/admin-submenu.scss

@@ -6,7 +6,7 @@
     li {
         @extend %larger;
         @extend %title;
-        border-bottom: 1px solid #a6b2a7;
+        border-bottom: 1px solid $gray-tower-gray;
         text-transform: uppercase;
         &:last-child {
             border-bottom: 0;

app/styles/modules/common/projects-nav.scss

@@ -1,5 +1,5 @@
 .projects-nav {
-    background-color: #232323;
+    background-color: $gray-mine-shaft;
     display: flex;
     flex-direction: column;
     height: 100%;

app/styles/modules/wiki/wiki-nav.scss

@@ -2,7 +2,7 @@
     li {
         @extend %large;
         @extend %title;
-        border-bottom: 1px solid #cdcdcd;
+        border-bottom: 1px solid $gray-silver;
         text-transform: uppercase;
         &:hover {
             .icon {