feat(colors): refactor color scheme structure

src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js

@@ -42,8 +42,8 @@
         "id": "g3",
         color: layoutColors.default,
         "valueAxis": "v1",
-        "lineColor": layoutColors.primaryBg,
+        "lineColor": layoutColors.primaryLight,
-        "fillColors": layoutColors.primaryBg,
+        "fillColors": layoutColors.primaryLight,
         "fillAlphas": 0.8,
         "lineAlpha": 0.8,
         "type": "column",

src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js

@@ -10,6 +10,7 @@
 
   /** @ngInject */
   function DashboardCalendarCtrl(layoutColors) {
+    var palette = layoutColors.bgColorPalette;
     var $element = $('#calendar').fullCalendar({
       //height: 335,
       header: {
@@ -39,23 +40,23 @@
         {
           title: 'All Day Event',
           start: '2016-03-01',
-          color: layoutColors.successCharts
+          color: palette.silverTree
         },
         {
           title: 'Long Event',
           start: '2016-03-07',
           end: '2016-03-10',
-          color: layoutColors.primaryCharts
+          color: palette.blueStone
         },
         {
           title: 'Dinner',
           start: '2016-03-14T20:00:00',
-          color: layoutColors.infoCharts
+          color: palette.surfieGreen
         },
         {
           title: 'Birthday Party',
           start: '2016-04-01T07:00:00',
-          color: layoutColors.warningCharts
+          color: palette.gossipDark
         }
       ]
     });

src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js

@@ -9,46 +9,52 @@
       .controller('TrafficChartCtrl', TrafficChartCtrl);
 
   /** @ngInject */
-  function TrafficChartCtrl(layoutColors) {
+  function TrafficChartCtrl(layoutColors, $scope) {
-    var doughnutData = [
+    var palette = layoutColors.bgColorPalette;
+    $scope.doughnutData = [
       {
         value: 2000,
-        color: layoutColors.defaultCharts,
+        color: palette.white,
-        highlight: "#f1f1f1",
+        highlight: palette.whiteDark,
-        label: 'Ad Campaigns'
+        label: 'Ad Campaigns',
-      },
+        percentage: 87,
-      {
+        order: 0,
+      }, {
         value: 1500,
-        color: layoutColors.primaryCharts,
+        color: palette.blueStone,
-        highlight: "#136775",
+        highlight: palette.blueStoneDark,
-        label: 'Search engines'
+        label: 'Search engines',
-      },
+        percentage: 22,
-      {
+        order: 4,
+      }, {
         value: 1000,
-        color: layoutColors.infoCharts,
+        color: palette.surfieGreen,
-        highlight: "#13998a",
+        highlight: palette.surfieGreenDark,
-        label: 'Direct Traffic'
+        label: 'Referral Traffic',
-      },
+        percentage: 70,
-      {
+        order: 3,
+      }, {
         value: 1200,
-        color: layoutColors.successCharts,
+        color: palette.silverTree,
-        highlight: "#94d7a1",
+        highlight: palette.silverTreeDark,
-        label: 'Referral Traffic'
+        label: 'Direct Traffic',
-      },
+        percentage: 38,
-      {
+        order: 2,
+      }, {
         value: 400,
-        color: layoutColors.warningCharts,
+        color: palette.gossip,
-        highlight: "#dcfcc4",
+        highlight: palette.gossipDark,
-        label: 'Other'
+        label: 'Other',
-      }
+        percentage: 17,
+        order: 1,
+      },
     ];
 
     var ctx = document.getElementById('chart-area').getContext('2d');
-    window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
+    window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
       segmentShowStroke: false,
       percentageInnerCutout : 64,
       responsive: true
     });
-
   }
 })();

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -14,61 +14,16 @@
 
   <div class="channels-info">
     <div>
-
+      <div class="channels-info-item" ng-repeat="item in doughnutData | orderBy:'order'">
-      <div class="channels-info-item">
+        <div class="legend-color" style="background-color: {{::item.color}}"></div>
-        <div class="legend-color default"></div>
+        <p>{{::item.label}}<span class="channel-number">+{{item.percentage}}%</span></p>
-        <p>Ad Campaigns<span class="channel-number">+87%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
-               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
+               aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
-      <div class="channels-info-item">
-        <div class="legend-color warning"></div>
-        <p>Other<span class="channel-number">+17%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color success"></div>
-        <p>Direct Traffic<span class="channel-number">+38%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color info"></div>
-        <p>Referral Traffic<span class="channel-number">+70%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color primary"></div>
-        <p>Search engines<span class="channel-number">+22%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
-          </div>
-        </div>
-      </div>
-
-
-
-    </div>
-  </div>
-
-</div>
-

src/app/theme/theme.constants.js

@@ -7,38 +7,66 @@
 
   var IMAGES_ROOT = 'assets/img/';
 
-  angular.module('BlurAdmin.theme')
+  // main color scheme
-    .constant('layoutColors', {
+  var colorScheme = {
     primary: '#209e91',
     info: '#2dacd1',
     success: '#90b900',
     warning: '#dfb81c',
     danger: '#e85656',
+  };
+
+  // background color palette
+  var bgColorPalette = {
+    blueStone: '#005562',
+    surfieGreen: '#0e8174',
+    silverTree: '#6eba8c',
+    gossip: '#b9f2a1',
+    white: '#ffffff',
+  };
+
+  angular.module('BlurAdmin.theme')
+    .constant('layoutColors', {
+      primary: colorScheme.primary,
+      info: colorScheme.info,
+      success: colorScheme.success,
+      warning: colorScheme.warning,
+      danger: colorScheme.danger,
+
+      primaryLight: tint(colorScheme.primary, 30),
+      infoLight: tint(colorScheme.info, 30),
+      successLight: tint(colorScheme.success, 30),
+      warningLight: tint(colorScheme.warning, 30),
+      dangerLight: tint(colorScheme.danger, 30),
+
+      primaryDark: shade(colorScheme.primary, 15),
+      infoDark: shade(colorScheme.info, 15),
+      successDark: shade(colorScheme.success, 15),
+      warningDark: shade(colorScheme.warning, 15),
+      dangerDark: shade(colorScheme.danger, 15),
+
+      primaryBg: tint(colorScheme.primary, 20),
+      infoBg: tint(colorScheme.info, 20),
+      successBg: tint(colorScheme.success, 20),
+      warningBg: tint(colorScheme.warning, 20),
+      dangerBg: tint(colorScheme.danger, 20),
+
       default: '#ffffff',
-      successLight: '#85BA54',
+      defaultText: '#ffffff',
-      primaryLight: '#5FBCBB',
-      warningLight: '#c5d36a',
 
-      primaryDark: '#17857a',
+      bgColorPalette: {
-      dangerDark: '#c24848',
+        blueStone: bgColorPalette.blueStone,
-      successDark: '#7b9e00',
+        surfieGreen: bgColorPalette.surfieGreen,
-      warningDark: '#c6a315',
+        silverTree: bgColorPalette.silverTree,
-      infoDark: '#258ead',
+        gossip: bgColorPalette.gossip,
+        white: bgColorPalette.white,
 
-      primaryBg: '#63cec3',
+        blueStoneDark: shade(bgColorPalette.blueStone, 15),
-      infoBg: '#5abfdd',
+        surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
-      successBg: '#b5d448',
+        silverTreeDark: shade(bgColorPalette.silverTree, 15),
-      warningBg: '#e8ca52',
+        gossipDark: shade(bgColorPalette.gossip, 15),
-      dangerBg: '#f67171',
+        whiteDark: shade(bgColorPalette.white, 5),
-
+      },
-      primaryCharts: '#005562',
-      successCharts: '#6eba8c',
-      infoCharts: '#0e8174',
-      warningCharts: '#b9f2a1',
-      dangerCharts: '#ffa76d',
-      defaultCharts: '#ffffff',
-
-      defaultText: '#ffffff'
     })
     .constant('layoutSizes', {
       resWidthCollapseSidebar: 1200,
@@ -53,4 +81,32 @@
       }
     });
 
+  function shade(color, weight) {
+    return mix('#000000', color, weight);
+  }
+
+  function tint(color, weight) {
+    return mix('#ffffff', color, weight);
+  }
+
+  //SASS mix function
+  function mix(color1, color2, weight) {
+    // convert a decimal value to hex
+    function d2h(d) {
+      return d.toString(16);
+    }
+    // convert a hex value to decimal
+    function h2d(h) {
+      return parseInt(h, 16);
+    }
+
+    var result = "#";
+    for(var i = 1; i < 7; i += 2) {
+      var color1Part = h2d(color1.substr(i, 2));
+      var color2Part = h2d(color2.substr(i, 2));
+      var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
+      result += ('0' + resultPart).slice(-2);
+    }
+    return result;
+  }
 })();

src/sass/app/_alerts.scss

@@ -27,18 +27,18 @@
 .bg-success {
   background-color: rgba($success,0.85);
   a{
-    color: $primary-charts;
+    color: $danger;
     &:hover{
-      color: $primary-dark;
+      color: $danger-dark;
     }
   }
 }
 .bg-info {
   background-color: rgba($info,0.85);
   a{
-    color: $warning-bg;
-    &:hover{
     color: $warning;
+    &:hover{
+      color: $warning-dark;
     }
   }
 }

src/sass/app/_form.scss

@@ -135,7 +135,6 @@ textarea.form-control {
   }
   &.bootstrap-switch-focused {
     box-shadow: none;
-    border-color: $input-border-focus;
     &.bootstrap-switch-off {
       border-color: $input-border;
     }

src/sass/common.scss

@@ -1,2 +1,3 @@
 @import 'theme/conf/mixins';
+@import 'theme/conf/colorScheme';
 @import 'theme/conf/variables';

src/sass/theme/conf/_colorScheme.scss

@@ -0,0 +1,23 @@
+$primary: #209e91 !default;
+$info: #2dacd1 !default;
+$success: #90b900 !default;
+$warning: #dfb81c !default;
+$danger: #e85656 !default;
+
+$primary-light: tint($primary, 30%);
+$info-light: tint($info, 30%);
+$success-light: tint($success, 30%);
+$warning-light: tint($warning, 30%);
+$danger-light: tint($danger, 30%);
+
+$primary-dark: shade($primary, 15%);
+$info-dark: shade($info, 15%);
+$success-dark: shade($success, 15%);
+$warning-dark: shade($warning, 15%);
+$danger-dark: shade($danger, 15%);
+
+$primary-bg: tint($primary, 20%);
+$info-bg: tint($info, 20%);
+$success-bg: tint($success, 20%);
+$warning-bg: tint($warning, 20%);
+$danger-bg: tint($danger, 20%);

src/sass/theme/conf/_variables.scss

@@ -1,41 +1,12 @@
 $font-family: 'Roboto', sans-serif;
 
-$default: #ffffff !default;
-$primary: #209e91 !default;
-$info: #2dacd1 !default;
-$success: #90b900 !default;
-$warning: #dfb81c !default;
-$danger: #e85656 !default;
-
-$primary-light: #5FBCBB;
-$success-light: #85BA54;
-
-$primary-dark:  #17857a;
-$info-dark:  #258ead;
-$success-dark:  #7b9e00;
-$warning-dark:  #c6a315;
-$danger-dark:  #c24848;
-
-$primary-bg:  #63cec3;
-$info-bg:  #5abfdd;
-$success-bg:  #b5d448;
-$warning-bg:  #e8ca52;
-$danger-bg:  #f67171;
-
-$primary-charts :#005562;
-$success-charts :#6eba8c;
-$info-charts    :#0e8174;
-$warning-charts :#b9f2a1;
-$danger-charts  :#ffa76d;
-$default-charts :#ffffff;
-
 $view-total :rgba(0,0,0,.4);
 
-
-$accent: #E3FF53;
 $activelink: $primary;
 $hoverlink: $primary-dark;
 
+$default: #ffffff !default;
+
 $facebook-color: #3b5998;
 $twitter-color: #55acee;
 $google-color: #dd4b39;
@@ -57,7 +28,6 @@ $help-text: #949494;
 $border: #dddddd;
 $border-light: #eeeeee;
 $input-border: #cccccc;
-$input-border-focus: #1488b0;
 
 $resXXL: 1280px;
 $resXL: 1170px;

src/sass/theme/dashboard/_trafficChart.scss

@@ -116,66 +116,7 @@
   top: 27px;
   border-radius: 15px;
   left: -45px;
-  &.info{
-    background-color: $info-charts;
 }
-  &.success{
-    background-color: $success-charts;
-  }
-  &.danger{
-    background-color: $danger-charts;
-  }
-  &.default{
-    background-color: $default;
-  }
-  &.warning{
-    background-color: $warning-charts;
-  }
-  &.primary{
-    background-color: $primary-charts;
-  }
-}
-
-//@mixin doughnut-size($size) {
-//  .traffic-chart .canvas-holder {
-//    width: $size;
-//    height: $size;
-//    canvas {
-//      width: $size;
-//      height: $size;
-//    }
-//  }
-//}
-
-//@media (max-width: $resS) {
-//  @include doughnut-size(250px);
-//  .canvas-holder {
-//    float: none;
-//  }
-//  .traffic-legend {
-//    display: block;
-//    padding: 10px 0 0;
-//    width: 300px;
-//  }
-//  ul.doughnut-legend {
-//    padding-left: 20px;
-//    li {
-//      &:nth-child(2n-1) {
-//        float: left;
-//      }
-//    }
-//  }
-//  .traffic-chart{
-//    width: 100%;
-//  }
-//  .canvas-holder{
-//    display: block;
-//    margin: 0 auto;
-//  }
-//  .panel.medium-panel.traffic-panel{
-//    height: inherit;
-//  }
-//}
 
 .traffic-chart canvas{
   border: 10px solid rgba(0,0,0,0.0);