[Frontend] Normalize color constants

Fixes #1047 Normalize color constant values for themes; consolidated and cleaned up btn-related mixins; fixed hover color issues
nasa · Jul 21, 2016 · 2704640 · 2704640
1 parent 421286c
commit 2704640
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 25 deletions.
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
@@ -308,22 +308,31 @@
 	display: inline-block;
 }
 
-@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
-	.icon {
+    color: $fg;
+	.icon,
+    &:before {
 		color: $ic;
 	}
-  @if $bgHovColor != none {
+  @if $bgHov != none {
       &:not(.disabled):hover {
-          background: $bgHovColor; // was just background, and background-image before that
+          background: $bgHov;
+          color: $fgHov;
           >.icon,
           &:before {
-              color: pullForward($ic, $ltGamma);
+              color: $icHov;
           }
       }
   }
 }
 
+@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
+    @include containerSubtle($bg, $fg);
+    @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
+    text-shadow: $shdwItemText;
+}
+
 @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
 	@include appearance(none);
 	border-radius: $controlCr;

diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -55,9 +55,7 @@ $pad: $interiorMargin * $baseRatio;
     }
 
     &.major {
-        $bg: $colorBtnMajorBg;
-        $hc: pullForward($bg, 10%);
-        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
+        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
     }
 
     &.no-label {

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -23,9 +23,12 @@ $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: $colorBodyFg;
 $colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
+$colorBtnIcon: $colorBtnFg;
+$colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
+$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnIcon: $colorBtnFg;
+$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;

diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -1,15 +1,9 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	@include containerBase($bg, $fg);
 	@include background-image(linear-gradient(lighten($bg, 5%), $bg));
 	@include boxShdw($shdwBtns);
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
-	@include containerSubtle($bg, $fg);
-	@include btnBase($bg, $bgHovColor, $fg, $ic);
-	text-shadow: $shdwItemText;
-}
-
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
     @return lighten($c, $p);

diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -8,7 +8,7 @@ $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorKeyHov: pullForward($colorKey, 20%);
 $colorEditAreaBg: #eafaff;
-$colorEditAreaFg: #4bb1c7; //587ab5;
+$colorEditAreaFg: #4bb1c7;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
@@ -22,10 +22,13 @@ $smallCr: 3px;
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: #fff;
-$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
+$colorBtnFgHov: $colorBtnFg;
+$colorBtnIcon: #eee;
+$colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
+$colorBtnMajorBgHov: #007fbc;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnIcon: #eee;
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;

diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -3,12 +3,6 @@
 	@include boxShdw($shdwBtns);
 }
 
-@mixin btnSubtle($bg: $colorBtnBg, $bgHovColor: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
-	@include containerSubtle($bg, $fg);
-	@include btnBase($bg, $bgHovColor, $fg, $ic);
-	text-shadow: $shdwItemText;
-}
-
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
     @return darken($c, $p);