[Themes] Resolve conflicts

Resolve conflicts in preparation for merge, nasa/openmctweb#118
2015-09-22 16:09:42 -07:00
parent aba0969312 54334a8906
commit dbe1875e70
95 changed files with 11085 additions and 6512 deletions
--- a/platform/commonUI/general/res/sass/_about.scss
+++ b/platform/commonUI/general/res/sass/_about.scss
@@ -59,7 +59,7 @@
 	line-height: 120%;

 	a {
-		color: #84b3ff;
+		color: $colorAboutLink;
 	}
 	.s-description,
 	.s-info {
@@ -89,7 +89,7 @@
 				border-top: none;
 			}
 			em {
-				color: darken($colorBodyFg, 20%);
+				color: pushBack($colorBodyFg, 20%);
 //				margin-left: 2em;
 				&:first-child {
 //					margin-left: 0;
--- a/platform/commonUI/general/res/sass/_autoflow.scss
+++ b/platform/commonUI/general/res/sass/_autoflow.scss
@@ -29,7 +29,7 @@
 	font-size: 0.75rem;

 	&:hover {
-		.l-autoflow-header .l-btn.change-column-width {
+		.l-autoflow-header .s-btn.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -45,7 +45,7 @@
 		span {
 			vertical-align: middle;
 		}
-		.l-btn.change-column-width {
+		.s-btn.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -28,66 +28,8 @@ $bodyMargin: 10px;
 $interiorMargin: 5px;
 $interiorMarginLg: $interiorMargin * 2;
 $interiorMarginSm: 3px;
-$basicCr: 2px;
-$controlCr: 3px;
-$smallCr: 2px;
 $badgeW: 35px;

-/************************** COLORS AND SHADING */
-$colorBodyBg: #333;
-$colorBodyFg: #999;
-$colorFooterBg: #000;
-$colorKey: #0099cc;
-$colorKeySelectedBg: #005177;
-$colorKeyFg: #fff;
-$colorAlt1: #ffc700;
-$colorAlert: #ff3c00;
-$colorIconLink: #49dedb;
-$colorPausedBg: #c56f01;
-$colorPausedFg: #fff;
-$colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
-// Menu colors
-$colorMenuBg: lighten($colorBodyBg, 23%);
-$colorMenuFg: lighten($colorMenuBg, 70%);
-$colorMenuIc: lighten($colorKey, 17%);
-$colorInteriorBorder: lighten($colorBodyBg, 10%);
-$colorObjFrameBg: darken($colorBodyBg, 5%);
-// Form colors
-$colorCheck: $colorKey;
-$colorFormRequired: #ffc700;
-$colorFormValid: #33cc33;
-$colorFormError: #cc0000;
-$colorFormInvalid: #ff9900;
-// Limits and staleness colors
-$colorLimitYellow: #9d7500;
-$colorLimitRed: #aa0000;
-$colorTelemFresh: #fff;
-$colorTelemStale: #888;
-$styleTelemStale: italic;
-// Bubble colors
-$colorInfoBubbleFg: #666;
-$colorInfoBubbleBg: #ddd;
-$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
-$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
-// Overlay
-$colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: $colorBodyBg;
-$colorOvrFg: $colorBodyFg;
-// Items
-$colorItemBase: lighten($colorBodyBg, 5%);
-$colorItemFg: lighten($colorItemBase, 20%);
-$colorItemSelected: $colorKey;
-// Tabular
-$tabularColorBorder: rgba(white, 0.1);
-$tabularColorBodyBg: darken($colorBodyBg, 10%);
-$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
-$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
-$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
-$tabularColorHeaderBorder: $colorBodyBg;
-
 /************************** RATIOS */
 $ltGamma: 20%;
 $btnFontSizeToH: 0.45;
@@ -105,7 +47,7 @@ $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 30px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
@@ -117,15 +59,12 @@ $treeVCW: 10px;
 $treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
 // Tabular
 $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
 // Imagery
-$imageMainControlBarH: 22px;
+$imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
@@ -155,14 +94,14 @@ $formTBPad: $interiorMargin;
 $formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
-$scrollbarTrackSize: 10px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
+$btnFrameH: 16px;

 /************************** PATHS */
-$dirImgs: '../images/'; // Relative to platform/css/ directory
+// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
+$dirCommonRes: '../../../../general/res/';
+$dirImgs: $dirCommonRes + 'images/';

 /************************** TIMINGS */
 $controlFadeMs: 100ms;
-
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -52,7 +52,7 @@ a.disabled {
 }

@include keyframes(pulse) {
-	0%   { opacity: 0.2; }
+	0%   { opacity: 0.5; }
 	100% { opacity: 1; }
 }

--- a/platform/commonUI/general/res/sass/_fixed-position.scss
+++ b/platform/commonUI/general/res/sass/_fixed-position.scss
@@ -76,7 +76,7 @@
 		}

 		.l-fixed-position-text {
-			@include txtShdwSubtle();
+			//@include txtShdwSubtle();
 			border: 1px solid transparent;
 			font-size: 0.8rem;
 			$p: 1px; //$interiorMarginSm;
--- a/platform/commonUI/general/res/sass/_fonts.scss
+++ b/platform/commonUI/general/res/sass/_fonts.scss
@@ -1,38 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@font-face {
-	/*
-	* Use https://www.web-font-generator.com/ to gen fonts
-	*/
-	font-family: 'symbolsfont';
-	src: url('../fonts/symbols/wtdsymbols.eot');
-	src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
-	url('../fonts/symbols/wtdsymbols.woff') format('woff'),
-	url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
-	url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-.ui-symbol {
-	font-family: 'symbolsfont';
-}
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -19,6 +19,26 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+/************************** FONTS */
+@font-face {
+	/*
+    * Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+    */
+	font-family: 'symbolsfont';
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.ui-symbol {
+	font-family: 'symbolsfont';
+}
+
+/************************** HTML ENTITIES */
 a {
 	color: #ccc;
 	cursor: pointer;
@@ -42,7 +62,6 @@ body, html {
 }

 em {
-//	color: rgba(white, 0.2); Removed this as a global setting
 	font-style: normal;
 }

@@ -94,7 +113,7 @@ mct-container {

 .codehilite {
 	@extend .code;
-	background-color: rgba(#fff, 0.1);
+	background-color: rgba($colorBodyFg, 0.1);
 	padding: 1em;
 }

@@ -110,10 +129,6 @@ mct-container {
 	margin: 0;
 }

-.colorKey {
-	color: $colorKey;
-}
-
 .ds {
 	@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
 }
@@ -123,13 +138,6 @@ mct-container {
 	display: none !important;
 }

-.paused {
-	&:not(.s-btn) {
-		border-color: $colorPausedBg !important;
-		color: $colorPausedBg !important;
-	}
-}
-
 .sep {
 	color: rgba(#fff, 0.2);
 }
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,10 +29,8 @@
 }

 .ui-symbol {
-	$c: $colorKey;
 	&.icon {
-		color: $c;
-		@include txtShdwSubtle();
+		color: $colorKey;
 		&.alert {
 			color: $colorAlert;
 			&:hover {
@@ -54,7 +52,7 @@
 	display: inline-block;
 }

-.btn-menu .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
--- a/platform/commonUI/general/res/sass/_initialization.scss
+++ b/platform/commonUI/general/res/sass/_initialization.scss
@@ -1,20 +0,0 @@
-// Classes for initializing states of objects
-
-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane.left {
-            width: 15%;
-        }
-    }
-}
-
-.edit-mode {
-    .split-layout {
-        .split-pane-component.pane.right {
-            width: 15%;
-            .pane.bottom {
-                height: 30%;
-            }
-        }
-    }
-}
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@@ -1,52 +1,26 @@
-@mixin limit($c, $glyph) {
-	background: $c;
+@mixin limit($bg, $ic, $glyph) {
+	background: $bg !important;
+	//color: $fg !important;
 	&:before {
-		//@include pulse(500ms);
-		color: lighten($c, 30%);
+		//@include pulse(1000ms);
+		color: $ic;
 		content: $glyph;
 	}
 }

-/*.s-limit-upr,
-.s-limit-lwr {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.85em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
-}
-
-.s-limit-upr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
-}
-
-.s-limit-lwr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
-}*/
-
 [class*="s-limit"] {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
+	//white-space: nowrap;
 	&:before {
 		display: inline-block;
 		font-family: symbolsfont;
-		font-size: 0.85em;
+		font-size: 0.75em;
 		font-style: normal !important;
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
 }

-.s-limit-upr-red { @include limit($colorLimitRed, "\0000eb"); };
-.s-limit-upr-yellow { @include limit($colorLimitYellow, "\0000ed"); };
-.s-limit-lwr-yellow { @include limit($colorLimitYellow, "\0000ec"); };
-.s-limit-lwr-red { @include limit($colorLimitRed, "\0000ee"); };
+.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
+.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
+.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
+.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -19,63 +19,64 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/css3/animation";
-@import "compass/css3/user-interface";
-@import "compass/utilities";
-
-@import "mixins";
-@import "mobile/mixins";
-
@import "effects";
@import "global";
-@import "fonts";
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "fixed-position";
@import "about";
@import "text";
@import "icons";
@import "limits";
@import "data-status";
-@import "lists/tabular";
+@import "helpers/bubbles";
+@import "helpers/splitter";
+@import "helpers/wait-spinner";
+@import "messages";
+@import "properties";
+
+/********************************* CONTROLS */
@import "controls/breadcrumb";
@import "controls/buttons";
@import "controls/color-palette";
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
-@import "mobile/controls/menus";
@import "controls/time-controller";
-@import "edit/editor";
-@import "features/imagery";
-@import "features/time-display";
+@import "mobile/controls/menus";
+
+/********************************* FORMS */
@import "forms/elems";
-@import "forms/validation";
-@import "forms/text-input";
@import "forms/selects";
@import "forms/channel-selector";
@import "forms/datetime";
+@import "forms/validation";
@import "forms/filter";
-@import "plots/plots-main";
+
+/********************************* USER ENVIRON */
+@import "user-environ/layout";
+@import "mobile/layout";
+@import "edit/editor";
@import "search/search";
@import "mobile/search/search";
@import "overlay/overlay";
@import "mobile/overlay/overlay";
+@import "tree/tree";
+@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/bottom-bar";
-//@import "user-environ/object-browse";
@import "user-environ/tool-bar";
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "properties";
-@import "autoflow";
+
+/********************************* VIEWS */
+@import "fixed-position";
+@import "lists/tabular";
+@import "plots/plots-main";
@import "iframe";
-@import "messages";
-@import "initialization";
@import "hide-non-functional";
@import "views";
+@import "items/item";
+@import "mobile/item";
+
+
+/********************************* TO BE MOVED */
+@import "autoflow";
+@import "features/imagery";
+@import "features/time-display";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -145,46 +145,14 @@
    background-repeat: $repeatDir;
 }

-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-    $ltnRatio: 7%;
-    $gradRatio: 5%;
-    $hovRatio: 7%;
-    $bgBase: lighten($bg, $ltnRatio);
-    $fgBase: lighten($fg, $ltnRatio);
-    $gradC1: lighten($bgBase, $gradRatio);
-    $gradC2: $bgBase;
-    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
-
-    @include background-image(linear-gradient($gradC1, $gradC2));
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include boxShdwSubtle();
-    border: none;
-    border-top: 1px solid lighten($gradC1, 2%);
-    color: $fg;
-    display: inline-block;
-    @if $hover == true {
-        &:not(.disabled):hover {
-            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-            color: lighten($fgBase, $hovRatio);
-            &.btn-menu .invoke-menu {
-                color: lighten($cInvokeBase, $hovRatio);
-            }
-        }
-    }
-    &.btn-menu .invoke-menu {
-        color: $cInvokeBase;
-    }
-}
-
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    $b: 1px solid lighten($bg, 30%);
+    //$b: 1px solid lighten($bg, 30%);
    @include border-radius(2px);
    @include box-sizing(border-box);
    @include boxIncised(0.7);
    background-color: $bg;
-    border-bottom: $b;
-    border-right: $b;
+    //border-bottom: $b;
+    //border-right: $b;
 }

@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
@@ -211,38 +179,35 @@
        }
    }
    &:not(.disabled):hover:before {
-        @include trans-prop-nice("border-color", 50ms);
-        border-color: $colorKey;
+        @include trans-prop-nice("border-color", 25ms);
+        border-color: $colorGrippyInteriorHover;
    }
 }

-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include containerSubtle($bg, $fg, true);
-}
-
-@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    // No longer should be used; use btnSubtle instead
-    //@include containerSubtle($bg, $fg, true);
-    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-    /*	&:not(.disabled):hover {
-            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-        }*/
-}
-
-@mixin boxIncised($sVal: 0.6) {
-    @include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
+@mixin boxIncised($sVal: 0.6, $inset: 5px) {
+    @include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
 }

@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
    border: 1px solid $c;
 }

+@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
+	@if $sVal != 'none' {
+		@include box-shadow($sVal);
+	}
+}
+
@mixin boxShdwSubtle($sVal: 0.2) {
-    @include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
 }

@mixin boxShdwLarge($sVal: 0.7) {
-    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	}
 }

@mixin outerGlow($color: #fff, $sVal: 0.3) {
@@ -257,34 +222,94 @@
    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }

+@mixin txtShdw($sVal) {
+	//@if $sVal != 'none' {
+		@include text-shadow($sVal);
+	//}
+}
+
@mixin txtShdwSubtle($sVal: 0.1) {
-    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	@if $sVal != 'none' {
+	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
 }

@mixin txtShdwLarge($sVal: 0.7) {
    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }

-/*********************************************** FORM ELEMENTS */
+@function pullForward($c, $p: 20%) {
+    // For dark interfaces, lighter things come forward
+    @return lighten($c, $p);
+}
+
+@function pushBack($c, $p: 20%) {
+    // For dark interfaces, darker things move back
+    @return darken($c, $p);
+}
+
+@function percentToDecimal($p) {
+	@return $p / 100%;
+}
+
+@function decimalToPercent($d) {
+	@return percentage($d);
+}
+
+/*********************************************** CONTROLS, FORM ELEMENTS */
+
+@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background-color: $bg;
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	color: $fg;
+	display: inline-block;
+}
+
+@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
+    @include transition(background, .25s);
+	.icon {
+		color: $ic;
+	}
+	@include desktop {
+		@if $bgHov != none {
+			&:not(.disabled):hover {
+				background: $bgHov;
+				>.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
+}
+
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include appearance(none);
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-    //	background: lighten($bg, 20%);
-    background: rgba(#fff, 0.1);
-    border: none;
-    //border-bottom: 1px solid rgba(#fff, 0.1);
-    color: lighten($fg, 20%);
-    outline: none;
-    &.error {
-        background: rgba(red, 0.5);
-    }
+	@include appearance(none);
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
+	background: $bg;
+	border: none;
+	color: $fg;
+	outline: none;
+	&.error {
+		background: rgba(red, 0.5);
+	}
 }

@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
-    padding: 0 $interiorMarginSm;
+	@include input-base($bg, $fg);
+	padding: 0 $interiorMarginSm;
+}
+
+@mixin contextArrow() {
+	@include text-shadow(none);
+	content: '\76';
+	display: inline-block;
+	font-family: 'symbolsfont';
+	margin-left: $interiorMarginSm;
+	vertical-align: top;
 }

@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@@ -298,16 +323,6 @@
    border-bottom: 1px solid lighten($bg, 10%);
 }

-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-
@mixin menuUlReset() {
    margin: 0;
    padding: 0;
--- a/platform/commonUI/general/res/sass/_text.scss
+++ b/platform/commonUI/general/res/sass/_text.scss
@@ -37,7 +37,7 @@
 	}

 	h1, h2, h3 {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 		font-weight: normal !important;
 		margin-bottom: 1em;
 	}
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -22,140 +22,102 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;

-/******* LAYOUT AND SIZING */
-.btn,
-.l-btn {
-	@include user-select(none);
-	//line-height: 1.5em; // Was 1.25em
-	line-height: 150%;
-	padding: 0 $pad;
-	text-decoration: none;
-	&.lg,
-	&.create-btn {
-		$h: $ueTopBarH; // - $interiorMargin;
-		height: $h;
-		line-height: $h - 2;
-		//padding: 0 $pad * 6 0 $pad;
-		padding: 0 $pad * 3;
-	}
-	&.create-btn {
-		&:before {
-			content:"+";
-			font-family: symbolsfont;
-			font-size: 0.8em;
-		}
-		.menu {
-			margin-left: $pad * -1;
-		}
-		>.ui-symbol {
-			//font-size: 1.1em; // Normalizing for new icomoon symbols font
-		}
-	}
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
-}
-
-/*********************************** STYLE STYLES */
-.btn,
 .s-btn {
-	$base: lighten($colorBodyBg, 20%); // Moved to s-btn
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
-	cursor: pointer;
-	//line-height: 1.2em;
-	text-decoration: none;
-	&.major {
-		$bg: $colorKey;
-		@include btnSubtle($bg);
-		$fg: lighten($bg, 50%);
-		color: $fg;
-		&:hover {
-			@include btnSubtle(lighten($bg, 5%), $fg);
-			//color: $fg;
-		}
-		.invoke-menu {
-			color: $fg;
-		}
-	}
-	&.subtle {
-		@include btnSubtle($base, lighten($base, 40%));
-	}
-	&.very-subtle,
-	&.s-very-subtle {
-		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
-		&.paused {
-			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
-			.icon:before {
-				content:"\0000EF";
-			}
-		}
+    @include box-sizing(border-box);
+    @include user-select(none);
+    cursor: pointer;
+    text-decoration: none;
+    height: $btnStdH;
+    line-height: $btnStdH;
+    padding: 0 $pad;
+    font-size: 0.7rem;
+
+    .icon {
+        font-size: 0.8rem;
+        color: $colorKey;
+    }
+
+    .title-label {
+        vertical-align: top;
+    }
+
+	&.lg {
+		font-size: 1rem;
 	}
+
+    &.sm {
+        padding: 0 $pad / $baseRatio;
+    }
+
+    &.vsm {
+        padding: 0 ($pad / $baseRatio) / 2;
+    }
+
+    &.major {
+        $bg: $colorBtnMajorBg;
+        $hc: lighten($bg, 10%);
+        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
+    }
+
+    &:not(.major) {
+        // bg, bgHov, fg, ic
+        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+    }
+    &.pause-play {
+
+    }
+
+    &.pause-play {
+        .icon:before {
+            content: "\0000F1";
+        }
+        &.paused {
+            @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
+            .icon {
+                @include pulse(1000ms);
+                :before {
+                    content: "\0000EF";
+                }
+            }
+        }
+    }
+
+    &.show-thumbs {
+        .icon:before {
+            content: "\000039";
+        }
+    }
 }

-.icon-btn,
-.s-icon-btn {
-	@extend .s-btn;
-	font-size: 1em;
-	.icon {
-		color: $colorKey;
-	}
-	&.paused {
-		.icon {
-			color: $colorPausedFg;
-		}
-	}
+.l-btn-set {
+    // Buttons that have a very tight conceptual grouping - no internal space between them.
+    // Structure: .btn-set > mct-representation class=first|last > .s-btn
+    //@include test(red);
+    font-size: 0; // Remove space between s-btn elements due to white space in markup

-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($colorKey, $ltGamma);
-				}
-			}
-		}
-	}
+    .s-btn {
+        @include border-radius(0);
+        margin-left: 1px;
+    }

-	&.labeled {
-		padding: 0 $pad/2;
-		.icon {
-			//font-size: 1.5em;
-		}
-		.title-label {
-			margin-left: $interiorMargin;
-		}
-	}
+    .first {
+        .s-btn {
+            @include border-left-radius($controlCr);
+            margin-left: 0;
+        }
+    }

-	&.pause-play {
-/*		&.paused {
-			.icon {
-				@include pulse(500ms);
-			}
-		}*/
-		.icon:before {
-			content:"\0000F1";
-		}
-	}
-
-	&.show-thumbs {
-		.icon:before {
-			content:"\000039";
-		}
-	}
+    .last {
+        .s-btn {
+            @include border-right-radius($controlCr);
+        }
+    }
+}
+
+.paused {
+    &:not(.s-btn) {
+        border-color: $colorPausedBg !important;
+        color: $colorPausedBg !important;
+    }
 }

-/*********************************** LAYOUT STYLES */
-span.btn,
-span.btn span,
-span.l-btn,
-span.l-btn span,
-a.btn,
-a.btn span,
-a.l-btn,
-a.l-btn span {
-	display: inline-block;
-}
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -100,22 +100,6 @@
 	}
 }

-.btn-bar {
-	//	position: relative;
-/*	.btn,
-	.btn-set,
-	.t-btn {
-		display: inline-block;
-		//		margin-left: $interiorMargin;
-	}
-	.btn,
-	.t-btn {
-		&:first-child {
-			//			margin-left: 0;
-		}
-	}*/
-}
-
 .l-composite-control {
 	vertical-align: middle;
 	&.l-checkbox {
@@ -153,44 +137,8 @@
 	font-size: 0.7rem;
 }

-/*
-.btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	display: inline-block;
-	position: relative;
-	.btn,
-	.t-btn {
-		@include border-radius(0);
-		border-left: 1px solid lighten($colorBodyBg, 20%);
-		margin-left: 0;
-		&:first-child {
-			border-left: none;
-			@include border-left-radius($controlCr);
-		}
-		&:last-child {
-			@include border-right-radius($controlCr);
-		}
-	}
-}
-*/
-
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	line-height: 200%;
-	vertical-align: top;
-}
-
 label.checkbox.custom {
-	$bg: lighten($colorBodyBg, $ltGamma);
+	$bg: pullForward($colorBodyBg, 10%);
 	$d: $formRowCtrlsH;
 	cursor: pointer;
 	display: inline-block;
@@ -207,7 +155,8 @@ label.checkbox.custom {
 		&:before {
 			@include border-radius($basicCr * .75);
 			background: $bg;
-			border-bottom: 1px solid lighten($bg, 10%);
+			//border-bottom: 1px solid lighten($bg, 10%);
+			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
 			box-sizing: border-box;
 			content: " ";
 			font-family: 'symbolsfont';
@@ -256,7 +205,7 @@ label.checkbox.custom {
 	}
 }

-.btn-menu label.checkbox.custom {
+.s-menu label.checkbox.custom {
 	margin-left: 5px;
 }

@@ -267,84 +216,6 @@ label.checkbox.custom {
 	}
 }

-.btn-menu {
-	$h: 20px;
-	$p: $interiorMarginSm * 2;
-	$c: $colorBodyFg;
-	@include btnSubtle($colorBodyBg);
-	/*	height: $h;
-		line-height: $h;
-		&.dropdown {
-			padding-left: $p;
-			padding-right: $p;
-		}*/
-
-	&:not(.disabled):hover {
-		color: lighten($c, 20%);
-	}
-
-	/*	&.context-available {
-			// An element like the invoke-menu triangle;
-			// Indicates that this element has a dropdown menu available;
-			// Currently unused
-			$c: $colorKey;
-			color: $c;
-			padding: 0 5px;
-			&:hover {
-				color: lighten($c, 10%);
-			}
-		}*/
-
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
-
-	.type-icon {
-		//margin-right: $interiorMargin;
-	}
-
-	.name {
-		margin-left: $interiorMargin;
-	}
-	.menu {
-		//		margin-left: (-1 * $p);
-		position: absolute;
-		left: 0;
-		text-align: left;
-		.ui-symbol.icon {
-			width: 12px;
-		}
-	}
-}
-
-.top-bar .btn-menu {
-	$h: $btnStdH; //$ueTopBarBtnH; // 35px
-	$p: 10px;
-	$badgeM: $interiorMargin;
-	$badgeD: $h - ($badgeM * 2);
-	//height: $h;
-	//line-height: $h;
-	//padding-right: 10px;
-	&.browse-btn {
-		margin-right: $interiorMargin;
-		padding-left: $badgeD + $badgeM * 2;
-		.badge {
-			@include border-radius($controlCr * 1.5);
-			display: block;
-			font-size: 1em;
-			line-height: $badgeD;
-			position: absolute;
-			top: $badgeM;
-			left: $badgeM;
-			bottom: $badgeM;
-			right: auto;
-			width: $badgeD;
-			height: auto;
-		}
-	}
-}
-
 .context-available {
 	$c: $colorKey;
 	color: $c;
@@ -355,9 +226,6 @@ label.checkbox.custom {

 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
-	.type-icon {
-		//vertical-align: top;
-	}
 }

 /******************************************************** OBJECT-HEADER */
@@ -373,6 +241,7 @@ label.checkbox.custom {
 	//}

 	> .type-icon {
+		color: $colorObjHdrIc;
 		font-size: 120%;
 		float: left;
 		margin-right: $interiorMargin;
@@ -395,8 +264,9 @@ label.checkbox.custom {

 	.title-label {
 		//@include test(green, 0.9);
+		color: $colorObjHdrTxt;
 		@include ellipsize();
-		color: lighten($colorBodyFg, 40%);
+		//color: pushBack($colorBodyFg, 40%);
 		@include webkitProp(flex, '0 1 auto');
 		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
 		//position: relative;
@@ -476,24 +346,29 @@ label.checkbox.custom {

@include desktop {
 	::-webkit-scrollbar {
-		@include sliderTrack();
+		@include border-radius(2px);
+		@include box-sizing(border-box);
+		@include box-shadow(inset $scrollbarTrackShdw);
+		background-color: $scrollbarTrackColorBg;
 		height: $scrollbarTrackSize;
 		width: $scrollbarTrackSize;
 	}

 	::-webkit-scrollbar-thumb {
-		$bg: lighten($colorBodyBg, 10%);
-		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-		@include border-radius(1px);
+		$bg: $scrollbarThumbColor;
+		$hc: $scrollbarThumbColorHov;
+		$gr: 5%;
+		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
+		@include border-radius(2px);
 		@include box-sizing(border-box);
-		@include boxShdwSubtle();
-		border-top: 1px solid lighten($bg, 20%);
+		//@include boxShdwSubtle();
+		//border-top: 1px solid lighten($bg, 20%);
 		&:hover {
-			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
 		}
 	}

 	::-webkit-scrollbar-corner {
-		background: rgba(#000, 0.4);
+		background: $scrollbarTrackColorBg;
 	}
 }
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -19,17 +19,59 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/******************************************************** MENUS */
+/******************************************************** MENU BUTTONS */
+.s-menu {
+	// Formerly .btn-menu
+	@extend .s-btn;
+	span.l-click-area {
+		// In markup, this element should not enclose anything.
+		@extend .abs;
+	}
+
+	.icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		margin-left: $interiorMarginSm;
+	}
+
+	&:after {
+		// Adds the downward facing 'context available / invoke menu' arrow element
+		@include contextArrow();
+		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
+	}
+
+	&.create-btn {
+		.title-label {
+			font-size: 1rem;
+		}
+		//&:after {
+		//	color: rgba($colorInvokeMenu, 0.5);
+		//}
+	}
+
+	.menu {
+		left: 0;
+		text-align: left;
+		.ui-symbol.icon {
+			width: 12px;
+		}
+	}
+}
+
+/******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: lighten($colorBodyBg, 5%);
-	$bgHover: lighten($bg, 20%);
-	$iconColor: $colorKey;
+	$bg: $colorMenuBg;
+	$fg: $colorMenuFg;
+	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
 	.menu {
 		@include border-radius($basicCr);
-		@include containerSubtle($bg);
-		@include txtShdwSubtle(0.2);
+		@include containerSubtle($bg, $fg);
+		@include boxShdw($shdwMenu);
+		@include txtShdw($shdwMenuText);
 		display: block; // set to block via jQuery
 		padding: $interiorMarginSm 0;
 		position: absolute;
@@ -39,7 +81,7 @@
 			li {
 				@include box-sizing(border-box);
 				border-top: 1px solid lighten($bg, 20%);
-				color: lighten($bg, 60%);
+				color: pullForward($bg, 60%);
 				line-height: $menuLineH;
 				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
 				position: relative;
@@ -48,19 +90,12 @@
 					border: none;
 				}
 				&:hover {
-					background: $bgHover;
-					color: $colorKeyFg;
-					//a {
-					//	color: $colorKeyFg;
-					//}
+					background: $colorMenuHovBg;
+					color: $colorMenuHovFg;
 					.icon {
-						color: lighten($iconColor, 20%);
+						color: $colorMenuHovIc;
 					}
 				}
-				//a {
-				//	color: lighten($bg, 60%);
-				//	display: block;
-				//}
 				.type-icon {
 					left: $interiorMargin * 2;
 				}
@@ -68,16 +103,12 @@
 		}
 	}

+	.menu,
 	.context-menu,
 	.super-menu {
-		$bg: $colorMenuBg;
-		$fg: $colorMenuFg;
-		$ic: $colorMenuIc;
-		//font-size: 0.80rem;
 		pointer-events: auto;
-		@include containerSubtle($bg);
 		ul li {
-			padding-left: 25px;
+			//padding-left: 25px;
 			a {
 				color: $fg;
 			}
@@ -88,7 +119,7 @@
 				left: $interiorMargin;
 			}
 			&:hover .icon {
-				color: lighten($ic, 5%);
+				//color: lighten($ic, 5%);
 			}
 		}
 	}
@@ -123,10 +154,8 @@
 	.super-menu {
 		$w: 500px;
 		$h: $w - 20;
-		$plw: 50%; //$w * 0.5;
-		$prw: 50%; //$w - $plw;
-		$fg: #fff; //lighten($colorBodyFg, 40%);
-		$bgHover: $colorKey; //$bg;
+		$plw: 50%;
+		$prw: 50%;
 		display: block;
 		width: $w;
 		height: $h;
@@ -137,7 +166,7 @@
 			@include box-sizing(border-box);
 			&.left {
 				//@include test();
-				border-right: 1px solid rgba(white, 0.2);
+				border-right: 1px solid pullForward($colorMenuBg, 10%);
 				left: 0;
 				padding-right: $interiorMargin;
 				right: auto;
@@ -158,15 +187,13 @@
 				right: 0;
 				padding: $interiorMargin * 5;
 				width: $prw;
-				.icon {
-					color: $fg;
-				}
 			}
 		}
 		.menu-item-description {
 			.desc-area {
 				&.icon {
 					$h: 150px;
+					color: $colorCreateMenuLgIcon;
 					position: relative;
 					font-size: 8em;
 					left: 0;
@@ -176,13 +203,13 @@
 					text-align: center;
 				}
 				&.title {
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 1.2em;
 					margin-bottom: 0.5em;
 				}
 				&.description {
 					//color: lighten($bg, 30%);
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 0.8em;
 					line-height: 1.5em;
 				}
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -14,7 +14,7 @@
 	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
-		background-color: rgba(#fff, 0.1);
+		background-color: $colorPlotBg;
 		bottom: $imageMainControlBarH + $interiorMargin;
 	}
 	.l-image-main-controlbar {
@@ -66,7 +66,7 @@
 	}
 	.l-date,
 	.l-time {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 	}
 	.l-mag {
 		direction: ltr;
@@ -77,7 +77,7 @@
 		}
 	}
 	.s-mag {
-		color: darken($colorBodyFg, 20%);
+		color: pushBack($colorBodyFg, 20%);
 	}
 	.l-btn.show-thumbs {
 		display: none;
--- a/platform/commonUI/general/res/sass/forms.scss
+++ b/platform/commonUI/general/res/sass/forms.scss
@@ -1,39 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
-@import "forms/elems";
-@import "forms/textarea";
-@import "forms/text-input";
-@import "forms/selects";
-@import "forms/channel-selector";
-@import "forms/datetime";
-//@import "forms/filter";
--- a/platform/commonUI/general/res/sass/forms/_channel-selector.scss
+++ b/platform/commonUI/general/res/sass/forms/_channel-selector.scss
@@ -36,11 +36,11 @@
 	.btns-add-remove {
 //		background: rgba(#ff0000, 0.3);;
 		margin-top: 150px;
-		.btn {
+		.s-btn {
 			display: block;
-			font-size: 1.5em;
+			//font-size: 1.5em;
 			margin-bottom: $interiorMargin;
-			padding: 10px;
+			//padding: 10px;
 			text-align: center;
 		}
 	}
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -21,7 +21,7 @@
 *****************************************************************************/
 .section-header {
 	@include border-radius($basicCr);
-	background: rgba(#fff, 0.1);
+	background: $colorFormSectionHeader;
 	$c: lighten($colorBodyFg, 20%);
 	//border-bottom: 1px solid rgba(#fff, 0.3);
 	color: $c;
@@ -32,6 +32,7 @@

 .form {
 //	@include test(orange);
+	color: $colorFormText;
 	.form-section {
 		position: relative;
 		margin-bottom: $interiorMarginLg * 2;
@@ -69,7 +70,7 @@
 		}

 		.value {
-			color: lighten($colorBodyFg, 20%);
+			color: $colorInputFg; //lighten($colorBodyFg, 20%);
 		}

 		.controls {
@@ -111,18 +112,18 @@

 		.selector-list {
 			// Used in create overlay to display tree view
+			@include nice-input($colorInputBg, $colorInputFg);
 			$h: 150px;
-			@include border-radius($basicCr);
-			@include box-sizing(border-box);
-			background: rgba(black, 0.2);
-			padding: $interiorMargin;
+			//@include border-radius($basicCr);
+			//@include box-sizing(border-box);
+			//background: rgba(black, 0.2);
+			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
-			overflow: auto;
 //			max-width: 50%;
-			.wrapper {
+			>.wrapper {
 				$p: $interiorMargin;
-				overflow-y: auto;
+				overflow: auto;
 				position: absolute;
 				top: $p;
 				right: $p;
@@ -159,4 +160,24 @@ label.form-control.checkbox {
 		color: lighten($colorFormInvalid, 30%);
 		padding: $interiorMargin;
 	}
+}
+
+input[type="text"] {
+	@include nice-input($colorInputBg, $colorInputFg);
+	&.filter {
+		&.ng-dirty {
+			//            background: red;
+		}
+	}
+	&.numeric {
+		text-align: right;
+	}
+}
+
+textarea {
+	@include nice-textarea($colorInputBg, $colorInputFg);
+	//	font-size: 0.9em;
+	position: absolute;
+	height: 100%;
+	width: 100%;
 }
--- a/platform/commonUI/general/res/sass/forms/_mixins.scss
+++ b/platform/commonUI/general/res/sass/forms/_mixins.scss
@@ -1,52 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include appearance(none);
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-//	background: lighten($bg, 20%);
-	background: rgba(#fff, 0.1);
-	border: none;
-	//border-bottom: 1px solid rgba(#fff, 0.1);
-	color: lighten($fg, 20%);
-	outline: none;
-	&.error {
-		background: rgba(red, 0.5);
-	}
-}
-
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
-}
-
-@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: $interiorMargin;
-}
-
-@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include nice-input($bg, $fg);
-	background: lighten($bg, 3%);
-	border-bottom: 1px solid lighten($bg, 10%);
-}
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -19,32 +19,32 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-.form-control.select {
-	@include btnSubtle($colorBodyBg);
-	cursor: pointer;
-	display: inline-block;
+.select {
+	@include btnSubtle($colorSelectBg);
 	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+	padding: 0 $interiorMargin;
    overflow: hidden;
 	position: relative;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
 		background: none;
-		color: $colorBodyFg;
-		border: none !important;
+		color: $colorSelectFg;
 		cursor: pointer;
-		padding: 4px 25px 2px 5px;
+		border: none !important;
+		padding: 4px 25px 2px 0px;
        width: 120%;
        option {
            margin: $interiorMargin 0; // Firefox
        }
 	}
 	&:after {
-		color: $colorKey;
-		content:"v";
-		display: block;
-		font-family: 'symbolsfont';
-		pointer-events: none;
+		@include contextArrow();
+		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
+		//content:"v";
+		//display: block;
+		//font-family: 'symbolsfont';
+		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
--- a/platform/commonUI/general/res/sass/forms/_text-input.scss
+++ b/platform/commonUI/general/res/sass/forms/_text-input.scss
@@ -1,32 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-input[type="text"] {
-	@include nice-input();
-    &.filter {
-        &.ng-dirty {
-//            background: red;
-        }
-    }
-	&.numeric {
-		text-align: right;
-	}
-}
--- a/platform/commonUI/general/res/sass/forms/_textarea.scss
+++ b/platform/commonUI/general/res/sass/forms/_textarea.scss
@@ -1,28 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.edit-main textarea {
-	@include nice-textarea();
-//	font-size: 0.9em;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -21,22 +21,11 @@
 *****************************************************************************/
 .validates {
    > .label {
-        //        @include test(green, 0.1);
-        padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
+        padding-right: $reqSymbolM; // Keep room for validation element
        &::after {
-            //            @include test(yellow, 0.3);
-/*            display: block;
-            position: absolute;
-            top: 0;
-            right: $reqSymbolM;
-            bottom: 0;
-            left: auto;
-            height: auto;
-            width: $reqSymbolW;*/
+	        float: right;
            font-family: symbolsfont;
            font-size: $reqSymbolFontSize;
-            //text-align: right;
-            //vertical-align: middle;
        }
    }
    &.invalid,
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -20,18 +20,20 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .split-layout {
-	$b: lighten($colorBodyBg, 5%);
-	$splitterD: 5px;
-	// TEMP VAlS - this will need to be redone when we implement a draggable splitter
-	$splitL: 85%;
-	$splitT: 70%;
+	$b: pullForward($colorBodyBg, $contrastRatioPercent);

 	.splitter {
 		background-color: $b;
-		@include box-shadow(rgba(black, 0.4) 0 0 3px);
+		@include border-radius($splitterEndCr);
+		@include boxShdw($splitterShdw);
 		overflow: hidden;
 		position: absolute;
 		z-index: 1;
+		//@if $colorSplitterHover != 'none' {
+			&:hover {
+				background-color: $colorSplitterHover;
+			}
+		//}
 	}
 	&.horizontal {
 		// Slides vertically up and down, splitting the element horizontally
@@ -41,21 +43,17 @@
 			right: 0;
 			&.top {
 				bottom: auto;
-//				height: $splitT;
 			}
 			&.bottom {
 				top: auto;
-//				height: 100% - $splitT;
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, horizontal);
+			@include controlGrippy($colorSplitterInterior, horizontal);
 			cursor: row-resize;
 			left: 0; right: 0;
 			width: auto;
-			height: $splitterD;
-//			margin-top: ($splitterD + 2) * -1;  // Controlled by splitter
-//			top: $splitT;  // Controlled by splitter
+			height: $splitterW;
 		}
 	}
 	&.vertical {
@@ -65,20 +63,16 @@
 			bottom: 0;
 			&.left {
 				right: auto;
-//				width: $splitL - 1%; // Controlled by splitter
 			}
 			&.right {
 				left: auto;
-//				width: 100% - $splitL; // Controlled by splitter
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, vertical);
+			@include controlGrippy($colorBodyBg, vertical);
 			bottom: 0;
 			cursor: col-resize;
-			width: $splitterD;
-//			margin-left: ($splitterD + 2) * -1;  // Controlled by splitter
-//			left: $splitL;  // Controlled by splitter
+			width: $splitterW;
 		}
 	}
 }
--- a/platform/commonUI/general/res/sass/items.scss
+++ b/platform/commonUI/general/res/sass/items.scss
@@ -1,33 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "mobile/mixins";
-@import "items/item";
-@import "mobile/item";
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -29,11 +29,10 @@
        &.grid-item {
            //div { @include test() }
            $d: $ueBrowseGridItemLg;
-            //$iconD: 100px;
            $iconMargin: 40px;
            $iconD: ($d - ($iconMargin * 2)) * 0.85;
            $transTime: 200ms;
-            @include btnSubtle($colorItemBase);
+            @include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
            box-sizing: border-box;
            cursor: pointer;
            float: left;
@@ -44,13 +43,12 @@
            position: relative;
            &:hover .item-main {
 	            .item-type {
-		            color: lighten($colorKey, 10%) !important;
+		            color: lighten($colorKey, 10%);
                    .l-icon-link {
                        color: $colorIconLink;
                    }
                }
 	            .item-open {
-		            //display: block;
                    opacity: 1;
 	            }
            }
@@ -62,6 +60,7 @@
            .bar {
                &.top-bar {
                    bottom: auto;
+	                color: $colorItemSubIcons;
                    height: $ueBrowseGridItemTopBarH;
                    line-height: $ueBrowseGridItemTopBarH;
                    text-align: right;
@@ -78,31 +77,27 @@
                }
                &.bottom-bar {
                    top: auto;
-                    //height: $ueBrowseGridItemBottomBarH;
                    line-height: 110%;
                }
            }
            .item-main {
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
-                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;
+                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
                line-height: $lh;
 	            z-index: 1;
                .item-type {
                    //@include trans-prop-nice("color", $transTime);
                    @include absPosDefault($iconMargin, false);
                    //@include test(red);
-                    //color: $colorItemFg;
+                    //color: $colorItemIc;
                    text-align: center;
                    font-size: $iconD * 0.95; //6em;
                    line-height: $iconD;
                    bottom: auto;
                    height: $iconD;
                    top: $iconMargin - 10;
-                    //line-height: $lh;
                    .l-icon-link {
-                        // When the link icon is in the item-type icon holder
-                        //color: darken($colorIconLink, 25%);
                        color: $colorIconLink;
                        height: auto;
                        line-height: 100%;
@@ -114,30 +109,30 @@
                    }
                }
                .item-open {
-                    //@include test();
                    @include trans-prop-nice("opacity", $transTime);
                    opacity: 0;
-	                //display: none;
+	                color: $colorItemOpenIcon;
                    font-size: 3em;
-                    //line-height: $lh;
                    left: auto; width: 50px;
                    pointer-events: none;
                    text-align: right;
                }
            }
            .title {
-	            @include txtShdwSubtle();
+	            @include txtShdw($shdwItemText);
                @include ellipsize();
-                color: lighten($colorBodyFg, 20%);
+                color: $colorItemFg;
            }
            .details {
+                @include txtShdw($shdwItemText);
                @include ellipsize();
+	            color: $colorItemFgDetails;
                font-size: 0.8em;
            }
 	        &.selected {
-		        $cfg: lighten($colorItemSelected, 35%);
+		        $cfg: lighten($colorItemBgSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemSelected);
+		        @include btnSubtle($colorItemBgSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -29,30 +29,22 @@ table {
 	@include box-sizing(border-box);
 	border-spacing: 0;
 	border-collapse: collapse;
-	color: #fff;
 	display: table;
 	font-size: 0.75rem;
 	position: relative;
-	//height: 100%; MOVED
 	width: 100%;
 	thead, .thead,
 	tbody tr, .tbody .tr {
-		//display: table; MOVED
 		width: 100%;
-		//table-layout: fixed; MOVED
 	}
 	thead, .thead {
-		border-bottom: 1px solid $tabularColorHeaderBorder;
+		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
 	tbody, .tbody {
-		//@include absPosDefault(0); MOVED
-		//top: $tabularHeaderH; MOVED
-		//display: block; MOVED
-		//overflow-y: scroll; MOVED
 		display: table-row-group;
 		tr, .tr {
 			&:hover {
-				background: rgba(white, 0.1);
+				background: rgba($colorTabBodyFg, 0.1);
 			}
 		}
 	}
@@ -64,17 +56,17 @@ table {
 		&.group-header {
 			td, .td {
 				$d: 5%;
-				background-color: darken($tabularColorHeaderBg, $d);
-				color: darken($tabularColorHeaderFg, $d);
+				background-color: pushBack($colorTabHeaderBg, $d);
+				color: pushBack($colorTabHeaderFg, $d);
 			}
 		}
 		th, .th, td, .td {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $tabularColorHeaderBg;
-			border-left: 1px solid $tabularColorHeaderBorder;
-			color: $tabularColorHeaderFg;
+			background-color: $colorTabHeaderBg;
+			border-left: 1px solid $colorTabHeaderBorder;
+			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
@@ -99,7 +91,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $tabularColorBorder;
+			border-bottom: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,9 +20,6 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-/************************** STYLE */
-$colorMobilePaneLeft: #222;
-
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -119,7 +119,7 @@
        }
        .view-switcher {
            margin-right: 0 !important;
-            .name {
+            .title-label {
                // Hide the name in mobile
                display: none;
            }
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -47,5 +47,10 @@
            float: none;
            width: 100%;
        }
+	    > .label {
+		    &:after {
+			    float: none;
+		    }
+	    }
    }
 }
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -25,13 +25,14 @@
 		z-index: 100;
 	}
    .clk-icon.close {
+        font-size: 0.8rem;
        position: absolute;
        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
    }
 	>.holder {
 		$i: 15%;
-		@include containerSubtle();
+		@include containerSubtle($colorOvrBg, $colorOvrFg);
 		@include border-radius($basicCr * 3);
 		color: $colorOvrFg;
 		top: $i; right: $i; bottom: $i; left: $i;
@@ -63,8 +64,22 @@
        //font-size: 1em;
        height: $ovrFooterH;
        text-align: right;
-        .btn {
-            margin-left: 10px;
+        .s-btn {
+	        $bg: $colorOvrBtnBg;
+	        &:not(.major) {
+	            @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+	        }
+	        font-size: 95%;
+	        height: $ovrFooterH;
+	        line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+	        padding: 0 $interiorMargin * 3;
+	        //&.major {
+		     //   @extend .s-btn.major;
+		     //   &:hover {
+			 //       @extend .s-btn.major:hover;
+		     //   }
+	        //}
        }
    }
    .contents.l-dialog {
@@ -74,5 +89,10 @@
 	    bottom: $myM;
 	    left: $myM;
        overflow: auto;
+	    .field.l-med {
+		    input[type='text'] {
+			    width: 100%;
+		    }
+	    }
    }
 }
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -23,13 +23,13 @@ $yBarW: 60px;
 $yLabelW: auto;
 $xBarH: 32px;
 $legendH: 20px;
-$colorHash: rgba(white, 0.3);
-$styleHash: dashed;
+//$colorHash: rgba(white, 0.3); // MOVED INTO CONSTANTS
+//$styleHash: dashed; // MOVED INTO CONSTANTS
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left

 .gl-plot {
-	color: $colorBodyFg;
+	color: $colorPlotFg;
 	font-size: 0.7rem;
 	position: relative;
 	width: 100%;
@@ -74,13 +74,16 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	}

 	.gl-plot-display-area {
+		@if $colorPlotBg != none {
+			background-color: $colorPlotBg;
+		}
 		position: absolute;
 		top: nth($plotDisplayArea, 1);
 		right: nth($plotDisplayArea, 2);
 		bottom: nth($plotDisplayArea, 3);
 		left: nth($plotDisplayArea, 4);
 		cursor: crosshair;
-		border: 1px solid $colorInteriorBorder;
+		border: 1px solid $colorPlotAreaBorder;
 	}

 	.gl-plot-label,
@@ -130,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa

 	.gl-plot-hash {
 		position: absolute;
-		border: 0 $colorHash $styleHash;
+		border: 0 $colorPlotHash $stylePlotHash;
 		&.hash-v {
 			border-right-width: 1px;
 			height: 100%;
@@ -170,8 +173,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa

 		height: auto;
 		z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellow); }
-		&.s-limit-red { @include limitBg($colorLimitRed); }
+		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
+		&.s-limit-red { @include limitBg($colorLimitRedBg); }
 	}

 	.l-oob-data {
@@ -213,7 +216,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			width: $swatchD;
 			//margin-right: $interiorMarginSm;
 		}
-		.title-label {}
+		&[class*='s-limit'] {
+			.title-label {
+				//color: #fff;
+			}
+		}
 	}
 }

@@ -221,7 +228,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.plot-legend-item {
 		//@include test();
 		@include border-radius($smallCr);
-		color: #fff;
+		//color: #fff;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
@@ -234,7 +241,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa

 .tick {
 	position: absolute;
-	border: 0 $colorHash solid;
+	border: 0 $colorPlotHash solid;
 	&.tick-x {
 		border-right-width: 1px;
 		height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -69,7 +69,7 @@
 		.menu-icon {
 			//@include test(#008800);
 			@include box-sizing(border-box);
-			color: $colorItemFg;
+			color: $colorInputIcon;
 			height: $iconD; width: $iconD;
 			line-height: $iconD;
 			position: absolute;
@@ -80,7 +80,7 @@
 		.clear-icon,
 		.menu-icon {
 			cursor: pointer;
-			transition: color .25s;
+			@include transition(color, .25s);
 		}


@@ -97,7 +97,7 @@
 		}

 		.search-icon {
-			color: $colorItemFg;
+			//color: $colorItemFg;
 			left: $interiorMarginSm;
 			transition: visibility .15s, opacity .15s, color .2s;
 			pointer-events: none;
@@ -117,7 +117,7 @@

 		// Make icon lighten when hovering over search bar
 		.search-input:hover + div.search-icon {
-			color: lighten($colorItemFg, 20%);
+			color: pullForward($colorInputIcon, 10%);
 		}

 		.clear-icon {
@@ -135,7 +135,7 @@
 			}

 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}

@@ -146,7 +146,7 @@
 			text-align: right;

 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}

@@ -191,7 +191,8 @@


 		.clear-filters-icon {
-			opacity: 0.4;
+			color: $colorInputIcon;
+			opacity: 1;
 			font-size: 0.8em;
 			position: absolute;
 			left: 1px;
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/theme-espresso.scss
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "constants";
-@import "mobile/constants";
-@import "themes/theme-espresso";
-@import "main";
--- a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
@@ -1,24 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* CONSTANTS */
-//$colorBodyBg: #fff;
-//$colorBodyFg: #666;
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "mobile/mixins";
-@import "tree/tree";
-@import "mobile/tree";
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -22,6 +22,7 @@

 ul.tree {
 	@include menuUlReset();
+	@include user-select(none);
 	li {
 		display: block;
 		position: relative;
@@ -45,6 +46,7 @@ ul.tree {
 	position: relative;

 	.view-control {
+		color: $colorItemTreeVC;
 		display: inline-block;
 		margin-left: $interiorMargin;
 		font-size: 0.75em;
@@ -53,7 +55,7 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				color: $colorItemTreeVCHover;
+				color: $colorItemTreeVCHover !important;
 			}
 		}
 	}
@@ -69,7 +71,7 @@ ul.tree {
 		.type-icon {
 			//@include absPosDefault(0, false);
 			$d: $treeTypeIconH; // 16px is crisp size
-			@include txtShdwSubtle(0.6);
+			@include txtShdwSubtle($shdwItemTreeIcon);
 			font-size: $d;
 			color: $colorItemTreeIcon;
 			left: $interiorMargin;
@@ -81,7 +83,7 @@ ul.tree {
 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
-					@include txtShdwSubtle(1);
+					//@include txtShdw($shdwItemTreeIcon);
 					position: absolute;
 					z-index: 2;
 				}
@@ -124,14 +126,13 @@ ul.tree {
 	}

 	&.selected {
-		$c: #fff;
-		background: $colorKeySelectedBg;
-		color: $c;
+		background: $colorItemTreeSelectedBg;
+		color: $colorItemTreeSelectedFg;
 		.view-control {
-			color: $colorItemTreeIcon;
+			color: $colorItemTreeSelectedVC;
 		}
 		.label .type-icon {
-			color: #fff; //$colorItemTreeIconHover;
+			color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
 		}
 	}

@@ -139,11 +140,11 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
-				color: lighten($colorBodyFg, 20%);
-				.context-trigger {
-					display: block;
-				}
+				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
+				color: pullForward($colorBodyFg, 20%);
+				//.context-trigger {
+				//	display: block;
+				//}
 				.icon {
 					color: $colorItemTreeIconHover;
 				}
--- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
@@ -54,7 +54,7 @@
 .status.block {
 	//display: inline-block;
 	display: inline;  // New status bar design. Inline to support ellipsis overflow
-	margin-right: $interiorMargin * 2;
+	margin-right: $interiorMarginLg;
 	.status-indicator {
 		//@include border-radius($controlCr * 0.9);
 		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .frame {
-	$ohH: 16px;
+	$ohH: $btnFrameH;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
@@ -46,8 +46,21 @@
 		left: $myM;
 	}
 	&.frame-template {
-		.view-switcher {
+		.s-btn,
+		.s-menu {
+			height: $ohH;
 			line-height: $ohH;
+			padding: 0 $interiorMargin;
+			> span {
+				font-size: 0.65rem;
+			}
+		}
+
+		.s-menu:after {
+			font-size: 8px;
+		}
+
+		.view-switcher {
 			z-index: 10;
 		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
@@ -64,7 +77,7 @@
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
-		.name {
+		.title-label {
 			display: none;
 		}
 	}
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -216,16 +216,17 @@
 .edit-mode {
    .split-layout {
        .split-pane-component.pane.right {
-            //min-width: 150px;
-            //max-width: 50%;
-            .split-pane-component.pane.bottom {
+            width: 15%;
+            .pane.bottom {
                min-height: 50px;
-                max-height: 80%;
+                height: 30%;
            }
        }
    }
 }

+
+
 .pane {
    position: absolute;
    &.treeview.left {
@@ -298,19 +299,15 @@
 	}
 }

-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-    $h: $btnToolbarH;
-    display: inline-block;
-    font-size: $h * $btnFontSizeToH;
-    line-height: 200%;
-    vertical-align: top;
+.object-browse-bar .s-btn,
+.top-bar .buttons-main .s-btn,
+.top-bar .s-menu,
+.tool-bar .s-btn,
+.tool-bar .s-menu {
+	$h: $btnToolbarH;
+	height: $h;
+	line-height: $h;
+	vertical-align: top;
 }

 .object-browse-bar,
@@ -344,6 +341,7 @@
 	.left {
 		//@include test(red);
 		@include webkitProp(flex, '1 1 0');
+		padding-right: $interiorMarginLg;
 	}
 }

--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -28,9 +28,9 @@
 		line-height: $ueTopBarH;
    }
 	
-	.title {
+/*	.title {
 		color: #fff;
-	}
+	}*/
 	
 	.buttons-main {
 		font-size: 0.8em;