adding files

index.html

@@ -37,6 +37,7 @@
         const FIVE_MINUTES = 5 * 60 * 1000;
         const THIRTY_MINUTES = 30 * 60 * 1000;
 
+        openmct.install(openmct.plugins.Themes());
         [
             'example/eventGenerator',
             'example/styleguide'

package.json

@@ -27,6 +27,7 @@
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
     "fast-sass-loader": "1.4.6",
+    "fibers": "^4.0.2",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",
@@ -60,8 +61,10 @@
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
+    "sass": "^1.23.7",
+    "sass-loader": "^8.0.0",
     "split": "^1.0.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^1.0.1",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
     "vue-loader": "^15.2.6",

src/api/overlays/components/DialogComponent.vue

@@ -26,8 +26,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin legacyMessage() {
         flex: 0 1 auto;
         font-family: symbolsfont;

src/api/overlays/components/OverlayComponent.vue

@@ -26,8 +26,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
         position: absolute;
         top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;

src/plugins/displayLayout/components/BoxView.vue

@@ -32,8 +32,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
-
     .c-box-view {
         display: flex;
         align-items: stretch;

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -60,8 +60,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin displayMarquee($c) {
         > .c-frame-edit {
             // All other frames

src/plugins/displayLayout/components/EditMarquee.vue

@@ -35,8 +35,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-frame-edit {
         // In Layouts, this is the editing rect and handles
         display: none; // Set to display: block in DisplayLayout.vue

src/plugins/displayLayout/components/ImageView.vue

@@ -32,7 +32,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-image-view {
         background-size: cover;

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************* FRAME */
     .c-frame {
         display: flex;

src/plugins/displayLayout/components/TelemetryView.vue

@@ -45,7 +45,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-telemetry-view {
         display: flex;

src/plugins/displayLayout/components/TextView.vue

@@ -33,7 +33,6 @@
  </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .c-text-view {
         display: flex;

src/plugins/filters/components/FiltersView.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-inspector {
         .c-filter-indication {
             border-radius: $smallCr;

src/plugins/filters/components/GlobalFilters.vue

@@ -26,9 +26,7 @@
     </li>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
+<style lang="scss">    .c-filter-indication {
         // Appears as a block element beneath tables
         @include userSelectNone();
         background: $colorFilterBg;

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -85,7 +85,6 @@
 </template>
 
 <style lang="scss">
-    @import '~styles/sass-base';
     
     @mixin containerGrippy($headerSize, $dir) {
         position: absolute;

src/plugins/folderView/components/GridItem.vue

@@ -23,8 +23,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* GRID ITEMS */
     .c-grid-item {
         // Mobile-first

src/plugins/folderView/components/GridView.vue

@@ -9,8 +9,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* GRID VIEW */
     .l-grid-view {
         display: flex;

src/plugins/folderView/components/ListItem.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* LIST ITEM */
     .c-list-item {
         &__name a {

src/plugins/folderView/components/ListView.vue

@@ -53,8 +53,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* LIST VIEW */
     .c-list-view {
         overflow-x: auto !important;

src/plugins/plugins.js

@@ -22,6 +22,7 @@
 
 define([
     'lodash',
+    './themes/plugin',
     './utcTimeSystem/plugin',
     './localTimeSystem/plugin',
     '../../example/generator/plugin',
@@ -47,6 +48,7 @@ define([
     './clearData/plugin'
 ], function (
     _,
+    ThemesPlugin,
     UTCTimeSystem,
     LocalTimeSystem,
     GeneratorPlugin,
@@ -85,6 +87,7 @@ define([
         };
     });
 
+    plugins.Themes = ThemesPlugin.default;
     plugins.UTCTimeSystem = UTCTimeSystem;
     plugins.LocalTimeSystem = LocalTimeSystem;
 

src/plugins/tabs/components/tabs.vue

@@ -42,8 +42,6 @@
 </template>
 
 <style lang="scss">
-    @import '~styles/sass-base.scss';
-
     .c-tabs-view {
         $h: 20px;
         @include abs();

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -11,9 +11,7 @@
     </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
+<style lang="scss">    .c-filter-indication {
         @include userSelectNone();
         background: $colorFilterBg;
         color: $colorFilterFg;

src/plugins/telemetryTable/components/table.vue

@@ -152,8 +152,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-telemetry-table__drop-target {
         position: absolute;
         width: 2px;

src/plugins/themes/plugin.js

@@ -0,0 +1,35 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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 core from '../../styles/core.scss';
+import styles from '../../styles/theme-espresso.scss';
+
+export default function ThemesPlugin(options) {
+    return function (openmct) {
+        console.log(styles)
+        core.use();
+        styles.use();
+        // setTimeout(() => {
+        //     styles.unuse();
+        // }, 3000)
+        ThemesPlugin._installed = true;
+    };
+}

src/plugins/timeConductor/Conductor.vue

@@ -104,8 +104,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-input--submit {
         // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
         visibility: none;

src/plugins/timeConductor/ConductorAxis.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-conductor-axis {
         $h: 18px;
         $tickYPos: ($h / 2) + 12px;

src/plugins/timeConductor/ConductorMode.vue

@@ -50,8 +50,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-conductor__mode-menu {
         max-height: 80vh;
         max-width: 500px;

src/plugins/timeConductor/ConductorModeIcon.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @keyframes clock-hands {
         0% { transform: translate(-50%, -50%) rotate(0deg); }
         100% { transform: translate(-50%, -50%) rotate(360deg);  }

src/plugins/timeConductor/DatePicker.vue

@@ -58,8 +58,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************************************** PICKER */
     .c-datetime-picker {
         @include userSelectNone();

src/styles/core-espresso.scss

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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 "vendor/normalize-min";
+ // Imports only constants, mixins, etc.
+ // Meant for use as a single line import in Vue SFC's.
+ // Do not include anything that renders to CSS!
+ @import "constants";
+ @import "constants-mobile.scss";
+ @import "constants-espresso";
+ 
+ @import "mixins";
+ @import "animations";
+ 
+ /******************** RENDERS CSS */
+ @import "about";
+ @import "glyphs";
+ @import "global";
+ @import "status";
+ @import "controls";
+ @import "forms";
+ @import "table";
+ @import "legacy";
+ @import "legacy-plots";
+ @import "plotly";
+ @import "legacy-messages";
+ 

src/styles/core-snow.scss

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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 "vendor/normalize-min";
+ // Imports only constants, mixins, etc.
+ // Meant for use as a single line import in Vue SFC's.
+ // Do not include anything that renders to CSS!
+ @import "constants";
+ @import "constants-mobile.scss";
+ @import "constants-snow";
+ 
+ @import "mixins";
+ @import "animations";
+ 
+ /******************** RENDERS CSS */
+ @import "about";
+ @import "glyphs";
+ @import "global";
+ @import "status";
+ @import "controls";
+ @import "forms";
+ @import "table";
+ @import "legacy";
+ @import "legacy-plots";
+ @import "plotly";
+ @import "legacy-messages";
+ 

src/styles/core.scss

@@ -21,17 +21,17 @@
  *****************************************************************************/
 
 @import "vendor/normalize-min";
-@import "sass-base";
+// @import "sass-base";
 
 /******************** RENDERS CSS */
-@import "about";
-@import "glyphs";
-@import "global";
-@import "status";
-@import "controls";
-@import "forms";
-@import "table";
-@import "legacy";
-@import "legacy-plots";
-@import "plotly";
-@import "legacy-messages";
+// @import "about";
+// @import "glyphs";
+// @import "global";
+// @import "status";
+// @import "controls";
+// @import "forms";
+// @import "table";
+// @import "legacy";
+// @import "legacy-plots";
+// @import "plotly";
+// @import "legacy-messages";

src/styles/sass-base.scss

@@ -26,7 +26,7 @@
 @import "constants";
 @import "constants-mobile.scss";
 //@import "constants-espresso"; // TEMP
-@import "constants-snow"; // TEMP
+// @import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
-@import "mixins";
-@import "animations";
+// @import "mixins";
+// @import "animations";

src/styles/test-a.scss

@@ -0,0 +1,3 @@
+body {
+    background: purple !important;
+}

src/styles/theme-espresso.scss

@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
+// Imports only constants, mixins, etc.
+// Meant for use as a single line import in Vue SFC's.
+// Do not include anything that renders to CSS!
+// @import "constants";
+// @import "constants-mobile.scss";
+@import "constants-espresso"; // TEMP
+// @import "constants-snow"; // TEMP
+//@import "constants-maelstrom";
+@import "mixins";
+@import "animations";
+@import "about";
+@import "glyphs";
+@import "global";
+@import "status";
+@import "controls";
+@import "forms";
+@import "table";
+@import "legacy";
+@import "legacy-plots";
+@import "plotly";
+@import "legacy-messages";

src/ui/components/ObjectFrame.vue

@@ -51,8 +51,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-so-view {
         display: flex;
         flex-direction: column;

src/ui/components/ObjectLabel.vue

@@ -10,9 +10,7 @@
 </a>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-object-label {
+<style lang="scss">    .c-object-label {
         // <a> tag and draggable element that holds type icon and name.
         // Used mostly in trees and lists
         border-radius: $controlCr;

src/ui/components/ProgressBar.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************************************** PROGRESS BAR */
     @keyframes progress {
         100% { background-position: $progressAnimW center; }

src/ui/components/ToggleSwitch.vue

@@ -9,8 +9,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-toggle-switch {
         $d: 12px;
         $m: 2px;

src/ui/components/search.vue

@@ -13,8 +13,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-search {
         @include wrappedInput();
 

src/ui/inspector/Elements.vue

@@ -28,8 +28,6 @@
 </div>
 </template>
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-elements-pool {
         display: flex;
         flex-direction: column;

src/ui/inspector/Inspector.vue

@@ -15,8 +15,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-inspector {
         > [class*="__"] {
             min-height: 50px;

src/ui/inspector/Location.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-location {
         display: flex;
         flex-wrap: wrap;

src/ui/layout/BrowseBar.vue

@@ -247,8 +247,6 @@ const PLACEHOLDER_OBJECT = {};
 </script>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .l-browse-bar {
         display: flex;
         align-items: center;

src/ui/layout/CreateButton.vue

@@ -28,8 +28,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-create-button,
     .c-create-menu {
         font-size: 1.1em;

src/ui/layout/Layout.vue

@@ -58,8 +58,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /******************************* SHELL */
     .l-shell {
         position: absolute;

src/ui/layout/mct-tree.vue

@@ -42,8 +42,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-tree-and-search {
         display: flex;
         flex-direction: column;

src/ui/layout/pane.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     /**************************** BASE - MOBILE AND DESKTOP */
     .l-multipane {
         display: flex;

src/ui/layout/status-bar/Indicators.vue

@@ -20,8 +20,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-indicator {
         @include cControl();
         @include cClickIconButtonLayout();

src/ui/layout/status-bar/NotificationBanner.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
         $bgPb: 10%;
         $bgPbD: 10%;

src/ui/preview/Preview.vue

@@ -52,7 +52,6 @@
     </div>
 </template>
 <style lang="scss">
-    @import '~styles/sass-base';
 
     .l-preview-window {
         display: flex;

src/ui/toolbar/components/toolbar-checkbox.vue

@@ -17,8 +17,6 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
     .c-custom-checkbox {
         $d: 14px;
         display: flex;

webpack.config.js

@@ -20,6 +20,8 @@ const webpackConfig = {
     mode: devMode ? 'development' : 'production',
     entry: {
         openmct: './openmct.js',
+        espresso: './src/styles/core-espresso.scss',
+        snow: './src/styles/core-snow.scss'
     },
     output: {
         filename: '[name].js',
@@ -71,14 +73,14 @@ const webpackConfig = {
             {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
-                    devMode ? 'style-loader': MiniCssExtractPlugin.loader,
-                    'css-loader',
                     {
-                        loader: 'fast-sass-loader',
+                        loader: devMode ? 'style-loader': MiniCssExtractPlugin.loader,
                         options: {
-                            includePaths: bourbon.includePaths
+                            injectType: 'lazyStyleTag' // change to lazyStyleTag and use styles in themes plugin
                         }
-                    }
+                    },
+                    {loader: 'css-loader'},
+                    {loader: 'sass-loader'}
                 ]
             },
             {