Refactor color variables thorgh the app

app/styles/dependencies/colors.scss

@@ -5,21 +5,9 @@ $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;
@@ -27,10 +15,14 @@ $dark-taiga: #879b89;
 $red-light: #ff8282;
 $red: #f00;
 
+$postit: #fff8e4;
+$postit-hover: #f1e8cd;
+$postit-dark-hover: #cfc29b;
+
+//Loading bar
+$green-japanese-laurel: #237400;
+$green-olive: #618000;
 $red-amaranth: #e43050;
 $purple-eggplant: #810061;
 $yellow-pear: #bbe831;
 
-$postit: #fff8e4;
-$postit-hover: #f1e8cd;
-$postit-dark-hover: #cfc29b;

app/styles/layout/elements.scss

@@ -3,12 +3,12 @@
 // Blockquotes
 blockquote,
 blockquote p {
-    color: $gray46-47;
+    color: $gray;
     font-style: italic;
     line-height: 24px;
 }
 blockquote {
-    border-left: 1px solid $gray87-88;
+    border-left: 1px solid $gray-light;
     margin: 0 0 20px;
     padding: 9px 20px 0 19px;
     cite {

app/styles/layout/invitation.scss

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

app/styles/layout/typography.scss

@@ -80,7 +80,7 @@ strong {
 }
 
 hr {
-    border: solid $gray87-88;
+    border: solid $blackish;
     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: $gray-saltpan;
+            background-color: rgba($green-taiga, .3);
             opacity: 1;
         }
         .icon {

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

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

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

@@ -104,7 +104,7 @@
         input:disabled {
             cursor: auto;
             + div {
-                background-color: $gray80;
+                background-color: $gray-light;
             }
         }
     }

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

@@ -6,7 +6,7 @@
     li {
         @extend %larger;
         @extend %title;
-        border-bottom: 1px solid $gray-tower-gray;
+        border-bottom: 1px solid $gray-light;
         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 $gray-tower-gray;
+        border-bottom: 1px solid $gray-light;
         text-transform: uppercase;
         &:last-child {
             border-bottom: 0;

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

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