[#111] Review color evaluation

Use a function to lighten/darken colors, ensuring a hue consistence. Also reorganize the stylesheet a bit
cyChop · Nov 23, 2016 · f447873 · f447873
1 parent 000a5dd
commit f447873
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -13,11 +13,11 @@
   },
   "devDependencies": {
     "babel-core": "6.18.2",
-    "babel-eslint": "^7.1.1",
+    "babel-eslint": "7.1.1",
     "babel-loader": "6.2.8",
     "babel-preset-latest": "6.16.0",
     "css-loader": "0.25.0",
-    "eslint": "3.10.1",
+    "eslint": "3.10.2",
     "eslint-loader": "1.6.1",
     "exports-loader": "0.6.3",
     "extract-text-webpack-plugin": "2.0.0-beta.4",
@@ -42,7 +42,7 @@
     "karma-jasmine-jquery": "0.1.1",
     "karma-verbose-reporter": "0.0.3",
     "karma-webpack": "1.8.0",
-    "node-sass": "3.11.3",
+    "node-sass": "3.13.0",
     "postcss-loader": "1.1.1",
     "raw-loader": "0.5.1",
     "sass-loader": "4.0.2",

diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss
@@ -0,0 +1,17 @@
+/// Slightly lighten a color
+/// @access public
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access public
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss
@@ -22,7 +22,7 @@
   @each $bev-variant, $icon-map in $bev-variants {
     &.#{$bev-variant} {
       @include icon(map-get($icon-map, icon));
-      color: map-get($icon-map, icon-color);
+      color: map-get($icon-map, color);
     }
   }
 }

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -3,36 +3,28 @@
 $bev-variants: (
         tea-white: (
                 icon: $icon-leaf,
-                icon-color: #ddd,
-                hover-color: #fdfdfd
+                color: #ddd
         ), tea-green: (
                 icon: $icon-leaf,
-                icon-color: #7f7,
-                hover-color: #f7fff7
+                color: #7f7
         ), tea-oolong: (
                 icon: $icon-leaf,
-                icon-color: #7bd,
-                hover-color: #f7fbfd
+                color: #7bd
         ), tea-black: (
                 icon: $icon-leaf,
-                icon-color: #111,
-                hover-color: #f1f1f1
+                color: #111
         ), tea-rooibos: (
                 icon: $icon-leaf,
-                icon-color: #f55,
-                hover-color: #fff5f5
+                color: #f55
         ), infusion: (
                 icon: $icon-pagelines,
-                icon-color: #bfb,
-                hover-color: #fbfffb
+                color: #bfb
         ), coffee: (
                 icon: $icon-cup,
-                icon-color: #000,
-                hover-color: #aaa
+                color: #000
         ), cocoa: (
                 icon: $icon-cup,
-                icon-color: #ff6e0c,
-                hover-color: #fff7f1
+                color: #ff6e0c
         )
 );
 

diff --git a/src/scss/beverages.scss b/src/scss/beverages.scss
@@ -1,3 +1,4 @@
+@import "functions";
 @import "variables";
 @import "mixins";
 @import "bootstrap";
@@ -8,14 +9,45 @@
 
   @import "icons";
 
+  //* Animation */
+  @import "animations";
+
+  //* The real styling for the app */
+  .header {
+    @include clearfix();
+
+    .btn-group {
+      margin: {
+        left: 5px;
+        right: 5px;
+      }
+    }
+
+    .filters {
+      float: left !important;
+    }
+
+    .cart-controls {
+      float: right !important;
+      .cart {
+        span.min-max {
+          display: inline-block;
+          text-align: center;
+          width: 100px;
+          float: right;
+        }
+      }
+    }
+  }
+
   .beverage {
     padding: 12px;
     border-top: solid 1px $border-color;
     background-color: $white;
     &:hover {
       @each $bev-variant, $icon-map in $bev-variants {
         &.#{$bev-variant} {
-          background-color: map-get($icon-map, hover-color);
+          background-color: tint(map-get($icon-map, color), 90%);
         }
       }
     }
@@ -50,7 +82,7 @@
         border: solid 3px $bev-icon-back-color;
         @each $bev-variant, $icon-map in $bev-variants {
           &.#{$bev-variant} {
-            border-color: map-get($icon-map, icon-color);
+            border-color: map-get($icon-map, color);
           }
         }
       }
@@ -240,45 +272,15 @@
     }
   }
 
+  //* Utility classes */
   .tag {
     @each $bev-variant, $icon-map in $bev-variants {
       &.#{$bev-variant} {
-        @include tag-variant(map-get($icon-map, icon-color));
+        @include tag-variant(map-get($icon-map, color));
       }
     }
   }
 
-  .header {
-    @include clearfix();
-
-    .btn-group {
-      margin: {
-        left: 5px;
-        right: 5px;
-      }
-    }
-
-    .filters {
-      float: left !important;
-    }
-
-    .cart-controls {
-      float: right !important;
-      .cart {
-        span.min-max {
-          display: inline-block;
-          text-align: center;
-          width: 100px;
-          float: right;
-        }
-      }
-    }
-  }
-
-  //* Animation */
-  @import "animations";
-
-  //* Utility classes */
   .btn-plain {
     @extend .btn-link;
     color: inherit;