Слегка подрефакторен scss

src/components/auth/appInfo.scss

@@ -24,7 +24,7 @@
 }
 
 .logo {
-    font-family: $robotoCondensed;
+    font-family: $font-family-title;
     color: #fff;
     font-size: 22px;
 }
@@ -34,7 +34,7 @@
 }
 
 .description {
-    font-family: $roboto;
+    font-family: $font-family-base;
     color: #cccccc;
     font-size: 13px;
     line-height: 1.7;

src/components/ui/buttons.scss

@@ -1,24 +1,48 @@
 @import './colors.scss';
 @import './fonts.scss';
 
+@mixin button-color($colorName, $backgroundColor, $textColor : $defaultButtonTextColor) {
+    .#{$colorName} {
+        composes: button;
+
+        @if ($textColor != $defaultButtonTextColor) {
+            color: $textColor;
+        }
+
+        background-color: $backgroundColor;
+
+        &:hover {
+            background-color: lighter($backgroundColor);
+        }
+
+        &:active {
+            background-color: darker($backgroundColor);
+        }
+    }
+}
+
 .button {
     display: inline-block;
     height: 50px;
     padding: 0 15px;
 
-    font-family: $robotoCondensed;
+    font-family: $font-family-title;
-    color: #fff;
+    color: $defaultButtonTextColor;
     font-size: 18px;
     line-height: 50px;
     text-decoration: none;
-}
 
-.blue {
+    transition: background-color 0.25s;
-    composes: button;
 
-    background: $blue;
+    background-color: $black;
 
     &:hover {
-        background: lighter($blue);
+        background-color: $black-button-light;
+    }
+
+    &:active {
+        background-color: $black-button-dark;
     }
 }
+
+@include button-color('blue', $blue);

src/components/ui/colors.scss

@@ -9,10 +9,44 @@ $light: #ebe8e1;
 
 $black: #232323;
 
+$defaultButtonTextColor : #fff;
+$black-button-light: #392f2c;
+$black-button-dark: #1e0b11;
+
 @function darker($color) {
+    $elyColorsMap : (
+        $green        : #1a6449,
+        $blue         : #568297,
+        $red          : #e15457,
+        $violet       : #66437a,
+        $dark_blue    : #233d49,
+        $light_violet : #864567,
+        $orange       : #d86e3e,
+        $black        : #1c1c1c,
+    );
+
+    @if(map_has_key($elyColorsMap, $color)) {
+        @return map-get($elyColorsMap, $color);
+    } @else {
         @return darken($color, 4%);
     }
+}
 
 @function lighter($color) {
+    $elyColorsMap : (
+        $green        : #379070,
+        $blue         : #71a6b2,
+        $red          : #fc7872,
+        $violet       : #816795,
+        $dark_blue    : #3e6164,
+        $light_violet : #a16982,
+        $orange       : #f39259,
+        $black        : #2e2e2e,
+    );
+
+    @if(map_has_key($elyColorsMap, $color)) {
+        @return map-get($elyColorsMap, $color);
+    } @else {
         @return lighten($color, 3%);
     }
+}

src/components/ui/fonts.scss

@@ -1,4 +1,3 @@
-// TODO: need more abstract names
 // TODO: should we host fonts from our side?
-$robotoCondensed: 'Roboto Condensed', Arial, sans-serif;
+$font-family-title: 'Roboto Condensed', Arial, sans-serif;
-$roboto: 'Roboto', Arial, sans-serif;
+$font-family-base: 'Roboto', Arial, sans-serif;

src/pages/auth/auth.scss

@@ -1,3 +1,5 @@
+@import "~components/ui/colors.scss";
+
 .sidebar {
     position: absolute;
     top: 0;
@@ -5,7 +7,7 @@
     left: 0;
     width: 300px;
 
-    background: #232323;
+    background: $black;
 }
 
 .content {

src/pages/root/root.scss

@@ -26,7 +26,7 @@
     display: inline-block;
     background: darker($green);
 
-    font-family: $robotoCondensed;
+    font-family: $font-family-title;
     font-size: 33px;
     color: #fff;
 }