[Refactor] WIP!

Really, really in progress at this point;

platform/commonUI/general/res/sass/_main.scss

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@import "effects";
+//@import "effects";
 @import "glyphs";
 @import "animations";
 @import "global";

platform/commonUI/general/res/sass/_mixins.scss

@@ -283,12 +283,12 @@
 
 /*********************************************** CONTROLS, FORM ELEMENTS */
 
-@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+//@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background-color: $bg;
+//	background: $bg;
-	//border-radius: $controlCr;
+//	//border-radius: $controlCr;
-	box-sizing: border-box;
+//	//box-sizing: border-box;
-	color: $fg;
+//	color: $fg;
-}
+//}
 
 @mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
@@ -311,11 +311,79 @@
 }
 
 @mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-    @include containerSubtle($bg, $fg);
+    @include containerSubtle($bg, $fg); // Varies per theme
     @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
     text-shadow: $shdwItemText;
 }
 
+@mixin sButton(
+    $bg: $colorBtnBg,
+    $bgHov: $colorBtnBgHov,
+    $fg: $colorBtnFg,
+    $fgHov: $colorBtnFgHov,
+    $ic: $colorBtnIcon,
+    $icHov: $colorBtnIconHov,
+    $important: false) {
+    $baseRatio: 1.5;
+    $pad: $interiorMargin * $baseRatio;
+    $imp: '';
+    @if $important == true {
+        $imp: !important;
+    }
+    //@include user-select(none);
+    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
+    box-sizing: border-box;
+
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.7rem;
+    text-decoration: none;
+    height: $btnStdH;
+    line-height: $btnStdH;
+    padding: 0 $pad;
+
+    &.lg {
+        font-size: 1rem;
+    }
+
+    &.sm {
+        padding: 0 $pad / $baseRatio;
+    }
+
+    &.vsm {
+        padding: 0 ($pad / $baseRatio) / 2;
+    }
+
+    &.major {
+        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
+    }
+
+    &.no-label {
+        .label, .title-label { display: none; }
+    }
+
+    &[disabled="true"] {
+        opacity: 0.3;
+    }
+
+    &.pause-play {
+        @extend .icon-pause;
+        &.paused {
+            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
+            @extend .icon-play;
+            &:before { @include pulse($dur: 1000ms); }
+        }
+    }
+
+    .icon {
+        font-size: 0.8rem;
+    }
+
+    .title-label {
+        vertical-align: top;
+    }
+}
+
 @mixin input-base() {
 	@include appearance(none);
 	border-radius: $controlCr;
@@ -445,3 +513,42 @@
     color: rgba($colorTelemFresh, $a) !important;
     font-style: italic;
 }
+
+/********************************************* EFFECTS */
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes($animName) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-direction(alternate);
+    @include animation-iteration-count($iteration);
+    @include animation-timing-function(ease-in-out);
+}
+
+.pulse {
+    @include pulse($animName: pulse, $dur: 750ms);
+}
+
+.pulse-subtle {
+    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
+}
+
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include keyframes($animName) {
+        from { #{propName}: $propValStart; }
+        to { #{$propName}: $propValEnd; }
+    }
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
+}
+
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-delay($delay);
+    @include animation-fill-mode(both);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
+    @include animation-timing-function(ease-in-out);
+}

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

@@ -19,62 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-$baseRatio: 1.5;
-$pad: $interiorMargin * $baseRatio;
-
 .s-button {
-    @include user-select(none);
+    @include sButton();
-    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 0.7rem;
-    text-decoration: none;
-    height: $btnStdH;
-    line-height: $btnStdH;
-    padding: 0 $pad;
-
-    &.labeled:before {
-        // Icon when it's included
-        margin-right: $interiorMarginSm;
-    }
-
-	&.lg {
-		font-size: 1rem;
-	}
-
-    &.sm {
-        padding: 0 $pad / $baseRatio;
-    }
-
-    &.vsm {
-        padding: 0 ($pad / $baseRatio) / 2;
-    }
-
-    &.major {
-        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
-    }
-
-    &.no-label {
-        .label, .title-label { display: none; }
-    }
-
-    &.pause-play {
-        @extend .icon-pause;
-        &.paused {
-            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
-            @extend .icon-play;
-            &:before { @include pulse($dur: 1000ms); }
-        }
-    }
-
-    .icon {
-        font-size: 0.8rem;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
 }
 
 body.desktop .mini-tab-icon {

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -52,6 +52,9 @@ body.touch {
     }
 
     .selector-list .tree-item {
-        @include containerBase($bg: $colorMobileSelectListTreeItemBg);
+        background: $colorMobileSelectListTreeItemBg;
+        box-sizing: border-box;
+        color: $colorBodyFg;
     }
+
 }

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

@@ -20,16 +20,16 @@ $smallCr: 2px;
 $overlayCr: 11px;
 
 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBg: #454545;
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
+$colorBtnBgHov: #5e5e5e;
 $colorBtnFg: $colorBodyFg;
-$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
+$colorBtnFgHov: #b3b3b3;
 $colorBtnIcon: $colorBtnFg;
 $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
+$colorBtnMajorBgHov: deepskyblue;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
+$colorBtnMajorFgHov: white;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorBodyFg, 0.5);
@@ -44,7 +44,7 @@ $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
 $sliderColorKnob: $sliderColorBase;
-$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
+$sliderColorKnobHov: #33ccff;
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
 $sliderKnobW: 15px;
@@ -69,17 +69,17 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 20%);
+$colorObjHdrIc: #cccccc;
 $colorTick: rgba(white, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableSelectedSecondary: #004d66;
 $colorSelectableHov: $colorSelectableSelectedSecondary;
 
 // Menu colors
-$colorMenuBg: pullForward($colorBodyBg, 23%);
+$colorMenuBg: #6e6e6e;
-$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuFg: white;
-$colorMenuIc: pullForward($colorKey, 17%);
+$colorMenuIc: #24c8ff;
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuHovBg: #878787;
 $colorMenuHovFg: #fff;
 $colorMenuHovIc: $colorMenuHovFg;
 $shdwMenu: none;
@@ -98,19 +98,19 @@ $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
-$colorInputFg: pullForward($colorBodyFg, 20%);
+$colorInputFg: #cccccc;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorInputPlaceholder: #666666;
 $colorFormText: rgba(#fff, 0.5);
-$colorInputIcon: pushBack($colorBodyFg, 15%);
+$colorInputIcon: #737373;
-$colorFieldHint: pullForward($colorBodyFg, 20%);
+$colorFieldHint: #cccccc;
 
 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 3%);
+$colorInspectorBg: #3b3b3b;
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 15%);
+$colorInspectorPropName: #737373;
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorPropVal: #bfbfbf;
 $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+$colorInspectorSectionHeaderFg: #a1a1a1;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
@@ -132,8 +132,8 @@ $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;
 
 // Limits, status and staleness colors
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemFresh: #cccccc;
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemStale: #666666;
 $styleTelemStale: italic;
 $colorLimitYellowBg: rgba($colorWarningLo, 0.3);
 $colorLimitYellowIc: $colorWarningLo;
@@ -143,23 +143,23 @@ $colorLimitRedIc: $colorWarningHi;
 // Bubble colors
 $colorInfoBubbleBg: #ddd;
 $colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleFg: #b3b3b3;
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+$colorThumbsBubbleBg: #4d4d4d;
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: pullForward($colorBodyBg, 10%);
+$colorOvrBg: #4d4d4d;
-$colorOvrFg: pullForward($colorBodyFg, 30%);
+$colorOvrFg: #e6e6e6;
-$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
+$colorOvrBtnBg: gray;
 $colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
+$colorFieldHintOverlay: #999999;
 $durLargeViewExpand: 250ms;
 
 // Items
-$colorItemBg: lighten($colorBodyBg, 5%);
+$colorItemBg: #404040;
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
+$colorItemBgHov: #595959;
-$colorItemFg: lighten($colorItemBg, 50%);
+$colorItemFg: #bfbfbf;
-$colorItemFgDetails: lighten($colorItemBg, 30%);
+$colorItemFgDetails: #8c8c8c;
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
@@ -167,9 +167,9 @@ $shdwItemText: rgba(black, 0.1) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
-$colorTabBorder: pullForward($colorBodyBg, 5%);
+$colorTabBorder: #404040;
-$colorTabBodyBg: darken($colorBodyBg, 10%);
+$colorTabBodyBg: #1a1a1a;
-$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
+$colorTabBodyFg: gray;
 $colorTabHeaderBg: rgba(white, 0.1);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
@@ -180,22 +180,22 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$colorPlotLabelFg: #666666;
 $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.1);
 
 // Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
+$colorItemTreeHoverBg: #4d4d4d;
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
+$colorItemTreeHoverFg: #b3b3b3;
 $colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeIconHover: #33ccff;
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedBg: #006080;
-$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeSelectedFg: #cccccc;
 $colorItemTreeEditingBg: #344154;
 $colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
-$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
+$colorItemTreeVCHover: #cccccc;
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $shdwItemTreeIcon: 0.6;
 
@@ -206,36 +206,36 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
 $scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
-$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
+$scrollbarThumbColor: #4d4d4d;
-$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
+$scrollbarThumbColorHov: #525252;
-$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
+$scrollbarThumbColorOverlay: #666666;
-$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
+$scrollbarThumbColorOverlayHov: #6b6b6b;
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
+$scrollbarThumbColorMenu: #a1a1a1;
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColorMenuHov: #a6a6a6;
 
 // Splitter
 // All splitterD* values MUST both be either odd or even numbers
 $splitterD: 20px;
 $splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
 $splitterHandleD: 2px;
-$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
+$colorSplitterBaseBg: #4d4d4d;
 $colorSplitterBg: $colorSplitterBaseBg;
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
+$colorSplitterHover: #666666;
 $colorSplitterActive: $colorKey;
 
 // Minitabs
 $uePaneMiniTabH: 24px;
 $uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
+$colorMiniTabFg: #333333;
 $colorMiniTabBgHov: $colorSplitterHover;
 $colorMiniTabFgHov: #fff;
 
 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 5%);
+$colorMobilePaneLeft: #262626;
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeftTreeItemBg: #2e2e2e;
 $colorMobileSelectListTreeItemBg: rgba(#fff, 0.05);
 
 // Datetime Picker
@@ -243,10 +243,10 @@ $colorCalCellHovBg: $colorKey;
 $colorCalCellHovFg: $colorKeyFg;
 $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
+$colorCalCellInMonthBg: #616161;
 
 // Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteFg: #bbbbbb;
 $colorPaletteSelected: #fff;
 $shdwPaletteFg: black 0 0 2px;
 $shdwPaletteSelected: inset 0 0 0 1px #000;
@@ -256,4 +256,4 @@ $colorAboutLink: #84b3ff;
 
 // Loading
 $colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
+$colorLoadingBg: rgba($colorBodyFg, 0.2);

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

@@ -1,6 +1,6 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
+    color: $fg;
-	@include background-image(linear-gradient(pullForward($bg, $gradRatio), $bg));
+	@include background-image(linear-gradient(lighten($bg, $gradRatio), $bg));
 	@include boxShdw($shdwBtns);
 }
 

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

@@ -20,8 +20,8 @@ $smallCr: 3px;
 $overlayCr: 11px;
 
 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBg: #969696;
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
+$colorBtnBgHov: #7d7d7d;
 $colorBtnFg: #fff;
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnIcon: #eee;
@@ -29,7 +29,7 @@ $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
+$colorBtnMajorFgHov: white;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorClickIcon, 0.5);
@@ -43,7 +43,7 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: pushBack($sliderColorBase, 20%);
+$sliderColorKnob: #33ccff;
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange;
 $sliderColorRangeValHovFg: $colorBodyFg;
@@ -69,17 +69,17 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
+$colorObjHdrIc: #b3b3b3;
 $colorTick: rgba(black, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableSelectedSecondary: #33ccff;
 $colorSelectableHov: $colorSelectableSelectedSecondary;
 
 // Menu colors
-$colorMenuBg: pushBack($colorBodyBg, 10%);
+$colorMenuBg: white;
-$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuFg: #4d4d4d;
 $colorMenuIc: $colorKey;
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuHovBg: #e6e6e6;
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
@@ -99,18 +99,18 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorInputPlaceholder: #999999;
-$colorFormText: pushBack($colorBodyFg, 10%);
+$colorFormText: gray;
-$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorInputIcon: #a6a6a6;
-$colorFieldHint: pullForward($colorBodyFg, 40%);
+$colorFieldHint: black;
 
 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorBg: #efefef;
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropName: #999999;
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorPropVal: #404040;
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderBg: #e3e3e3;
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+$colorInspectorSectionHeaderFg: #898989;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #999;
@@ -132,8 +132,8 @@ $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;
 
 // Limits and staleness colors//
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemFresh: #333333;
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemStale: #999999;
 $styleTelemStale: italic;
 $colorLimitYellowBg: rgba(#ffaa00, 0.3);
 $colorLimitYellowIc: #ffaa00;
@@ -143,23 +143,23 @@ $colorLimitRedIc: red;
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleFg: #4d4d4d;
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+$colorThumbsBubbleBg: #e3e3e3;
 
 // Overlay
-$colorOvrBlocker: rgba(black, 0.7);//
+$colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
-$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
+$colorOvrBtnBg: #969696;
 $colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
+$colorFieldHintOverlay: #969696;
 $durLargeViewExpand: 250ms;
 
 // Items
 $colorItemBg: #ddd;
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
+$colorItemBgHov: #cbcbcb;
 $colorItemFg: $colorBodyFg;
-$colorItemFgDetails: pushBack($colorItemFg, 15%);
+$colorItemFgDetails: #8c8c8c;
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
@@ -167,11 +167,11 @@ $shdwItemText: none;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
-$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBorder: #e3e3e3;
 $colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabBodyFg: #333333;
-$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
+$colorTabHeaderBg: #e3e3e3;
-$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderFg: #333333;
 $colorTabHeaderBorder: $colorBodyBg;
 
 // Plot
@@ -180,17 +180,17 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$colorPlotLabelFg: #999999;
 $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
+$colorItemTreeHoverBg: #e3e3e3;
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
+$colorItemTreeHoverFg: #4d4d4d;
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon;
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedBg: #1ac6ff;
 $colorItemTreeSelectedFg: $colorBodyBg;
 $colorItemTreeEditingBg: #caf1ff;
 $colorItemTreeEditingFg: $colorEditAreaFg;
@@ -206,12 +206,12 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColor: #7d7d7d;
 $scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
+$scrollbarThumbColorOverlay: #7d7d7d;
 $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenu: #e6e6e6;
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColorMenuHov: #e0e0e0;
 
 // Splitter
 // All splitterD* values MUST both be either odd or even numbers
@@ -219,23 +219,23 @@ $splitterD: 16px;
 $splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
 $splitterHandleD: 2px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
+$colorSplitterBg: #d6d6d6;
 $splitterShdw: none;
 $splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
+$colorSplitterHover: #a3a3a3;
 $colorSplitterActive: $colorKey;
 
 // Minitabs
 $uePaneMiniTabH: 24px;
 $uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
+$colorMiniTabFg: #898989;
 $colorMiniTabBgHov: $colorSplitterHover;
 $colorMiniTabFgHov: #fff;
 
 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeft: #f7f7f7;
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeftTreeItemBg: #efefef;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 
 // Datetime Picker, Calendar
@@ -243,10 +243,10 @@ $colorCalCellHovBg: $colorKey;
 $colorCalCellHovFg: $colorKeyFg;
 $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
+$colorCalCellInMonthBg: #f2f2f2;
 
 // Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteFg: #b3b3b3;
 $colorPaletteSelected: #333;
 $shdwPaletteFg: none;
 $shdwPaletteSelected: inset 0 0 0 1px #fff;

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

@@ -1,5 +1,6 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
+    background: $bg;
+    color: $fg;
 	@include boxShdw($shdwBtns);
 }