[Frontend] Fixed colors

Fixes #1047
WIP: fixed colors related to changes to
btnSubtle mixin; new constants for clickable
icons

Author: charlesh88

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -35,7 +35,7 @@ $pad: $interiorMargin * $baseRatio;
     padding: 0 $pad;
     font-size: 0.7rem;
     vertical-align: top;
-    @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
+    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
 
     &.labeled:before {
         // Icon when it's included
@@ -65,7 +65,7 @@ $pad: $interiorMargin * $baseRatio;
     &.pause-play {
         @extend .icon-pause;
         &.paused {
-            @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
+            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
             @extend .icon-play;
             &:before { @include pulse($dur: 1000ms); }
         }

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -75,8 +75,15 @@
 .s-clickable-icon {
     // Clickable icon elements that have hover
     @extend .ui-symbol;
-    &.inactive:hover {
-        color: $colorBtnBgHov !important;
+    color: $colorClickIcon;
+    &.active {
+        color: $colorClickIconActive;
+        //&:hover {
+        //    color: rgba($colorClickIconActive, 0.7);
+        //}
+    }
+     &:hover {
+        color: $colorClickIconHov;
     }
 }
 
@@ -226,7 +233,7 @@ input[type="search"] {
 
 /******************************************************** SELECTS */
 .select {
-    @include btnSubtle($colorSelectBg);
+    @include btnSubtle($bg: $colorSelectBg);
     @if $shdwBtns != none {
         margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
     }

platform/commonUI/general/res/sass/items/_item.scss

@@ -31,7 +31,7 @@
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
+            @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -121,7 +121,7 @@
 	        &.selected {
 		        $cfg: lighten($colorItemBgSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemBgSelected);
+		        @include btnSubtle($bg: $colorItemBgSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -29,6 +29,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
+$colorClickIcon: pullForward($colorBodyBg, 10%);
+$colorClickIconActive: $colorKey;
+$colorClickIconHov: rgba($colorClickIconActive, 0.4);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -29,6 +29,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: #007fbc;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
+$colorClickIcon: pullForward($colorBodyBg, 10%);
+$colorClickIconActive: $colorKey;
+$colorClickIconHov: rgba($colorClickIconActive, 0.4);
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
@@ -110,8 +113,8 @@ $progressBarStripeW: 20px;
 $shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
 
 // Selects
-$colorSelectBg: #ddd;
-$colorSelectFg: $colorBodyFg;
+$colorSelectBg: $colorBtnBg;
+$colorSelectFg: $colorBtnFg;
 
 // Limits and staleness colors//
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
@@ -138,7 +141,7 @@ $colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
 
 // Items
 $colorItemBg: #ddd;
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
+$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
 $colorItemFg: $colorBodyFg;
 $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;

platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html

@@ -32,7 +32,7 @@
               ng-click="ngModel.toggleGraph(); parameters.commit()"
               title="Click to enable or disable inclusion in Resource Graphing">
             <span class="icon-plot-resource s-clickable-icon"
-                  ng-class="{ inactive: !ngModel.graph() }">
+                  ng-class="{ active: ngModel.graph() }">
             </span>
         </span>
         <span class="l-col l-col-icon l-link">