[Frontend] IN-PROGRESS Major restructuring of /platform/commonUI/ to add themes structure

open #95
New themes bundle files, .scss and directories;
Moved constants definitions (mainly colors) from commonUI/.../_constants
to individual themes _constants files;
tweaks to mixins files;
changed pathways to font and images in commonUI/.../_constants;

bundles.json

@@ -8,6 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
+    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",

platform/commonUI/general/bundle.json

@@ -24,10 +24,6 @@
             {
                 "stylesheetUrl": "css/normalize.min.css",
                 "priority": "mandatory"
-            },
-            {
-                "stylesheetUrl": "css/theme-espresso.css",
-                "priority": 1000
             }
         ],
         "templates": [

platform/commonUI/general/res/config.rb

@@ -13,7 +13,7 @@ javascripts_dir = "js"
 output_style = :nested
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 # line_comments = false

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

@@ -33,62 +33,6 @@ $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);
-$colorInvokeMenu: #fff;
-// 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;
@@ -118,9 +62,6 @@ $treeVCW: 10px;
 $treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
 // Tabular
 $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
@@ -157,13 +98,13 @@ $formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
 
 /************************** 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;
-

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';
-}

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;

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

@@ -29,10 +29,8 @@
 }
 
 .ui-symbol {
-	$c: $colorKey;
 	&.icon {
-		color: $c;
+		color: $colorKey;
-		@include txtShdwSubtle();
 		&.alert {
 			color: $colorAlert;
 			&:hover {

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

@@ -21,7 +21,6 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
-@import "fonts";
 @import "about";
 @import "text";
 @import "icons";

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

@@ -149,9 +149,9 @@
     $ltnRatio: 7%;
     $gradRatio: 5%;
     $hovRatio: 7%;
-    $bgBase: lighten($bg, $ltnRatio);
+    $bgBase: $bg; //pullForward($bg, $ltnRatio);
-    $fgBase: lighten($fg, $ltnRatio);
+    $fgBase: $fg; // pullForward($fg, $ltnRatio);
-    $gradC1: lighten($bgBase, $gradRatio);
+    $gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
     $gradC2: $bgBase;
     $cInvokeBase: #fff;
 
@@ -165,8 +165,8 @@
     display: inline-block;
     @if $hover == true {
         &:not(.disabled):hover {
-            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
+            @include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
-            color: lighten($fgBase, $hovRatio);
+            color: pullForward($fgBase, $hovRatio);
         }
     }
 }
@@ -212,7 +212,9 @@
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
 	// $ic: Icon color
+    @include border-radius($controlCr);
     @include containerSubtle($bg, $fg, true);
+    @include text-shadow(rgba(black, 0.3) 0 1px 1px);
 	.icon {
 		color: $ic;
 	}
@@ -263,6 +265,16 @@
     @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }
 
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward
+    @return lighten($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back
+    @return darken($c, $p);
+}
+
 /*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include appearance(none);

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

@@ -59,19 +59,15 @@ $pad: $interiorMargin * $baseRatio;
 
 /*********************************** STYLE STYLES */
 .s-btn {
-	$base: lighten($colorBodyBg, 20%);
-	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
 	@include user-select(none);
-	//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
 	cursor: pointer;
 	text-decoration: none;
 	height: $btnStdH;
 	line-height: $btnStdH;
 	padding: 0 $pad;
+	font-size: 0.7rem;
 
-		font-size: 0.7rem;
 	.icon {
 		font-size: 0.8rem;
 		color: $colorKey;
@@ -89,7 +85,7 @@ $pad: $interiorMargin * $baseRatio;
 	}
 
 	&:not(.major) {
-		@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
+		@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
 	}
 
 	&.major {

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%);
-}

platform/commonUI/themes/espresso/bundle.json

@@ -0,0 +1,12 @@
+{
+  "name": "Espresso",
+  "description": "Espresso theme: dark and rich",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/theme-espresso.css",
+        "priority": 1000
+      }
+    ]
+  }
+}

platform/commonUI/themes/espresso/res/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

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

@@ -0,0 +1,68 @@
+/************************** COLORS AND SHADING */
+$colorBodyBg: #333;
+$colorBodyFg: #999;
+$colorFooterBg: #000;
+$colorKey: #0099cc;
+$colorKeySelectedBg: #005177;
+$colorKeyFg: #fff;
+
+$contrastRatio: 7%;
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
+$colorBtnFg: $colorBodyFg;
+$colorBtnIcon: $colorKey;
+$colorInvokeMenu: #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);
+$colorInvokeMenu: #fff;
+// 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;
+// Tree
+$colorItemTreeIcon: $colorKey;
+$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
+// Scrollbar
+$scrollbarTrackColorBg: rgba(#000, 0.4);

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

@@ -0,0 +1,9 @@
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward - opposite for light interfaces
+    @return lighten($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back - opposite for light interfaces
+    @return darken($c, $p);
+}

platform/commonUI/themes/espresso/res/sass/theme-espresso.scss

@@ -25,12 +25,12 @@
 @import "compass/css3";
 @import "compass/utilities";
 
-@import "constants";
+@import "../../../../general/res/sass/_mixins";
-@import "mobile/constants";
+@import "../../../../general/res/sass/mobile/mixins";
-
 @import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
 
-@import "themes/theme-espresso";
+@import "../../../../general/res/sass/constants";
-@import "main";
+@import "../../../../general/res/sass/mobile/constants";
+@import "constants";
+
+@import "../../../../general/res/sass/main";

platform/commonUI/themes/snow/bundle.json

@@ -0,0 +1,12 @@
+{
+  "name": "Sonw",
+  "description": "Snow theme: light and cool",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/theme-snow.css",
+        "priority": 1000
+      }
+    ]
+  }
+}

platform/commonUI/themes/snow/res/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

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

@@ -0,0 +1,68 @@
+/************************** COLORS AND SHADING */
+$colorBodyBg: #fff;
+$colorBodyFg: #666;
+$colorFooterBg: #000;
+$colorKey: #0099cc;
+$colorKeySelectedBg: #005177;
+$colorKeyFg: #fff;
+
+$contrastRatio: 25%;
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
+$colorBtnFg: $colorBodyBg;
+$colorBtnIcon: $colorBtnFg;
+$colorInvokeMenu: #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);
+$colorInvokeMenu: #fff;
+// 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;
+// Tree
+$colorItemTreeIcon: $colorKey;
+$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
+// Scrollbar
+$scrollbarTrackColorBg: rgba(#000, 0.4);

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

@@ -0,0 +1,7 @@
+.s-btn {
+    &.major {
+        $bg: $colorKey;
+        $fg: lighten($bg, 70%);
+        @include btnSubtle($bg, $fg, $fg, 0);
+    }
+}

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

@@ -0,0 +1,48 @@
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) {
+    $hovRatio: 5%;
+    $bgBase: $bg; //pullForward($bg, $contrastRatio);
+    $fgBase: $fg; //pushBack($bg, $contrastRatio);
+
+    background-color: $bgBase;
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    //@include boxShdwSubtle();
+    //border: none;
+    //border-top: 1px solid lighten($gradC1, 2%);
+    display: inline-block;
+    @if $hover == true {
+        &:not(.disabled):hover {
+            background-color: $colorKey; //pullForward($bgBase, $hovRatio);
+            //color: pushBack($fgBase, $hovRatio);
+        }
+    }
+}
+
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) {
+    // $ic: Icon color
+    @include border-radius($controlCr);
+    @include containerSubtle($bg, $fg, true, 30%);
+    color: $ic;
+    .icon {
+        color: $ic;
+    }
+/*    &:not(.disabled) {
+        &:not(.paused) {
+            &:hover {
+                .icon {
+                    color: pullForward($ic, $ltGamma);
+                }
+            }
+        }
+    }*/
+}
+
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward - opposite for light interfaces
+    @return darken($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back - opposite for light interfaces
+    @return lighten($c, $p);
+}

platform/commonUI/themes/snow/res/sass/theme-snow.scss

@@ -19,12 +19,28 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
-//$colorBodyBg: #fff;
-//$colorBodyFg: #666;
 
-/*
+@import "compass";
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@import "compass/reset";
-	background: red;
+@import "compass/css3";
-	display: inline-block;
+@import "compass/utilities";
-}*/
+
+@import "../../../../general/res/sass/_mixins";
+@import "../../../../general/res/sass/mobile/mixins";
+@import "mixins";
+
+@import "../../../../general/res/sass/constants";
+@import "../../../../general/res/sass/mobile/constants";
+@import "constants";
+
+@import "../../../../general/res/sass/main";
+@import "controls";
+
+
+
+
+
+
+
+
+