refactor: color variables (#132)

* refactor(buttons.scss): add color variables

* refactor(inputs.scss): replace to color variables

* refactor(checkboxes.scss): replace to color variables

* refactor(containers.scss): replace to color variables

* refactor(radios.scss): replace to color variables

scss/base/variables.scss

@@ -7,3 +7,33 @@ $background-color: $color-white;
 
 $cursor-url: url(../assets/cursor.png);
 $cursor-click-url: url(../assets/cursor-click.png);
+
+$default-colors: (
+  normal: $background-color,
+  hover: #e7e7e7,
+  shadow: #adafbc
+);
+$disabled-colors: (
+  normal: #d3d3d3,
+  shadow: #adafbc
+);
+$primary-colors: (
+  normal: #209cee,
+  hover: #108de0,
+  shadow: #006bb3
+);
+$success-colors: (
+  normal: #92cc41,
+  hover: #76c442,
+  shadow: #4aa52e
+);
+$warning-colors: (
+  normal: #f7d51d,
+  hover: #f2c409,
+  shadow: #e59400
+);
+$error-colors: (
+  normal: #e76e55,
+  hover: #ce372b,
+  shadow: #8c2022
+);

scss/elements/buttons.scss

@@ -26,51 +26,51 @@
     box-shadow:
       0 -4px $hover-background,
       inset 0 -2px $shadow,
-      0 -8px #212529,
+      0 -8px $base-color,
       4px 0 $shadow,
-      4px -4px #212529, 
+      4px -4px $base-color,
-      8px 0 #212529, 
+      8px 0 $base-color,
       0 4px $shadow,
-      4px 4px #212529, 
+      4px 4px $base-color,
-      0 8px #212529,
+      0 8px $base-color,
       -4px 0 $hover-background,
       inset -2px 0 $shadow,
-      -4px -4px #212529, 
+      -4px -4px $base-color,
-      -8px 0 #212529,
+      -8px 0 $base-color,
-      -4px 4px #212529;
+      -4px 4px $base-color;
   }
 
   &:active {
     // prettier-ignore
     box-shadow:
       0 -4px $shadow,
-      0 -8px #212529, 
+      0 -8px $base-color,
       4px 0 $hover-background,
-      4px -4px #212529,
+      4px -4px $base-color,
-      8px 0 #212529, 
+      8px 0 $base-color,
       0 4px $hover-background,
-      4px 4px #212529, 
+      4px 4px $base-color,
-      0 8px #212529, 
+      0 8px $base-color,
       -4px 0 $shadow,
-      -4px -4px #212529, 
+      -4px -4px $base-color,
-      -8px 0 #212529, 
+      -8px 0 $base-color,
-      -4px 4px #212529;
+      -4px 4px $base-color;
   }
 
   // prettier-ignore
   box-shadow:
     0 -4px $background,
-    0 -8px #212529, 
+    0 -8px $base-color,
     4px 0 $shadow,
-    4px -4px #212529, 
+    4px -4px $base-color,
-    8px 0 #212529,
+    8px 0 $base-color,
     0 4px $shadow,
-    4px 4px #212529, 
+    4px 4px $base-color,
-    0 8px #212529, 
+    0 8px $base-color,
     -4px 0 $background,
-    -4px -4px #212529,
+    -4px -4px $base-color,
-    -8px 0 #212529, 
+    -8px 0 $base-color,
-    -4px 4px #212529;
+    -4px 4px $base-color;
 }
 
 // Default style
@@ -86,7 +86,12 @@
   cursor: $cursor-click-url, pointer;
   user-select: none;
 
-  @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
+  @include btn-style(
+    $base-color,
+    map-get($default-colors, "normal"),
+    map-get($default-colors, "hover"),
+    map-get($default-colors, "shadow")
+  );
 
   &::before,
   &::after {
@@ -123,18 +128,18 @@
   &.is-disabled:focus {
     color: $base-color;
     cursor: not-allowed;
-    background-color: #d3d3d3;
+    background-color: map-get($disabled-colors, "normal");
-    box-shadow: inset -4px -4px #adafbc;
+    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
     opacity: 0.6;
   }
 
   // Other styles
   // prettier-ignore
   $types:
-    "primary" #fff #209cee #108de0 #006bb3,
+    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
-    "success" #fff #92cc41 #76c442 #4aa52e,
+    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
-    "warning" $base-color #f7d51d #f2c409 #e59400,
+    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
-    "error" #fff #e76e55 #ce372b #8c2022;
+    "error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
 
   @each $type in $types {
     &.is-#{nth($type, 1)} {
@@ -145,7 +150,12 @@
   &.is-rounded {
     box-sizing: content-box;
     padding: 6px 8px;
-    @include btn-extra-pixelize-style($base-color, #fff, #e7e7e7, #adafbc);
+    @include btn-extra-pixelize-style(
+      $base-color,
+      map-get($default-colors, "normal"),
+      map-get($default-colors, "hover"),
+      map-get($default-colors, "shadow")
+    );
 
     &::before,
     &::after {

scss/elements/checkboxes.scss

@@ -45,7 +45,7 @@
     (2,0,0,1,0,0,0,2,0,0),
     (2,2,2,2,2,2,2,2,0,0)
   );
-  $colors: ($base-color, #adafbb);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;

scss/elements/containers.scss

@@ -117,7 +117,7 @@
     }
 
     &::after {
-      border-color: #fff;
+      border-color: $background-color;
     }
 
     &.with-title {

scss/elements/radios.scss

@@ -19,7 +19,7 @@
     (2,2,2,2,0,0),
     (2,2,0,0,0,0),
   );
-  $colors: ($base-color, #adafbc);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-right: 20px;
   -webkit-appearance: none;

scss/form/inputs.scss

@@ -14,16 +14,16 @@
   margin: 4px;
   border: none;
 
-  @include border-style($base-color, #e7e7e7);
+  @include border-style($base-color, map-get($default-colors, "hover"));
 
   &.is-success {
-    @include border-style(#92cc41, #76c442);
+    @include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
   }
   &.is-warning {
-    @include border-style(#f7d51d, #f2c409);
+    @include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
   }
   &.is-error {
-    @include border-style(#e76e55, #ce372b);
+    @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
   }
 }