[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;

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

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * 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/reset";
+@import "compass/css3";
+@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";
+
+
+
+
+
+
+
+
+