Fixed code issues in gaugeRadial

- Placing, sizing;

index.html

@@ -78,6 +78,7 @@
         openmct.install(openmct.plugins.Notebook());
         openmct.install(openmct.plugins.FolderView());
         openmct.install(openmct.plugins.Tabs());
+        openmct.install(openmct.plugins.Gauge());
         openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
         openmct.time.timeSystem('utc');
         openmct.start();

src/plugins/displayLayout/DisplayLayout.vue

@@ -87,8 +87,8 @@
 <script>
     import LayoutFrame from './LayoutFrame.vue';
 
-    const DEFAULT_GRID_SIZE = [32, 32],
-          DEFAULT_DIMENSIONS = [12, 8],
+    const DEFAULT_GRID_SIZE = [5, 5],
+          DEFAULT_DIMENSIONS = [50, 50],
           DEFAULT_POSITION = [0, 0],
           MINIMUM_FRAME_SIZE = [320, 180],
           DEFAULT_HIDDEN_FRAME_TYPES = [

src/plugins/displayLayout/LayoutFrame.vue

@@ -97,7 +97,7 @@
         &__name {
             @include ellipsize();
             flex: 0 1 auto;
-            font-size: 1.2em;
+            @include headerFont($size: 1.2em);
 
             &:before {
                 // Object type icon

src/plugins/gauge/components/gaugeRadial.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="c-gauge">
+        <div class="c-gauge__wrapper">
+            <svg class="c-gauge__range" viewBox="0 0 512 512">
+                <text class="c-gauge__curval" transform="translate(256 310)" text-anchor="middle">{{ this.curVal }}</text>
+                <text font-size="35" transform="translate(105 455) rotate(-45)">{{ this.rangeLow }}</text>
+                <text font-size="35" transform="translate(407 455) rotate(45)" text-anchor="end">{{ this.rangeHigh }}</text>
+            </svg>
+
+            <div class="c-dial">
+                <svg class="c-dial__bg" viewBox="0 0 512 512">
+                    <g>
+                        <path d="M256,0C114.6,0,0,114.6,0,256S114.6,512,256,512,512,397.4,512,256,397.4,0,256,0Zm0,412A156,156,0,1,1,412,256,155.9,155.9,0,0,1,256,412Z"/>
+                    </g>
+                </svg>
+
+                <svg class="c-dial__limit" viewBox="0 0 512 512"
+                     v-if="degLimit < 270"
+                     :class="{
+                        'c-limit-clip--90': this.degLimit > 90,
+                        'c-limit-clip--180': this.degLimit >= 180
+                     }">
+                    <path d="M100,256A156,156,0,1,1,366.3,366.3L437,437a255.2,255.2,0,0,0,75-181C512,114.6,397.4,0,256,0S0,114.6,0,256A255.2,255.2,0,0,0,75,437l70.7-70.7A155.5,155.5,0,0,1,100,256Z"
+                          :style="`transform: rotate(${this.degLimit}deg)`"/>
+                </svg>
+
+                <svg class="c-dial__value" viewBox="0 0 512 512"
+                     v-if="this.degValue > 0"
+                     :class="{
+                        'c-dial-clip--90': this.degValue < 90,
+                        'c-dial-clip--180': this.degValue >= 90 && this.degValue < 180
+                     }">
+                    <path d="M256,31A224.3,224.3,0,0,0,98.3,95.5l48.4,49.2a156,156,0,1,1-1,221.6L96.9,415.1A224.4,224.4,0,0,0,256,481c124.3,0,225-100.7,225-225S380.3,31,256,31Z"
+                          :style="`transform: rotate(${this.degValue}deg)`"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-gauge {
+        @include abs();
+        overflow: hidden;
+
+        &__wrapper {
+            position: absolute;
+            width: 100%;
+            padding-bottom: 100%;
+            overflow: hidden;
+        }
+
+        &__value {
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 3vw;
+        }
+
+        &__range {
+            $o: 21%;
+            position: absolute;
+            fill: rgba(#fff, 0.8);
+        }
+
+        &__curval {
+            font-family: $heroFont;
+            font-size: 170px;
+        }
+    }
+
+    .c-dial {
+        // Dial elements
+        @include abs();
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
+
+        svg,
+        &__ticks,
+        &__bg,
+        &__limit,
+        &__value {
+            @include abs();
+        }
+
+        svg {
+            path {
+                transform-origin: center;
+            }
+        }
+
+        &__limit {
+            &.c-limit-clip--90 {
+                clip-path: polygon(0 0, 100% 0, 100% 100%);
+            }
+
+            &.c-limit-clip--180 {
+                clip-path: polygon(100% 0, 100% 100%, 0 100%);
+            }
+
+            path {
+                fill: rgba(orange, 0.4);
+            }
+        }
+
+        &__value {
+            &.c-dial-clip--90 {
+                clip-path: polygon(0 0, 50% 50%, 0 100%);
+            }
+
+            &.c-dial-clip--180 {
+                clip-path: polygon(0 0, 100% 0, 0 100%);
+            }
+
+            path {
+                fill: rgba(#fff, 0.8);
+            }
+        }
+
+        &__bg {
+            g {
+                fill: rgba(#fff, 0.1);
+            }
+        }
+    }
+
+</style>
+
+<script>
+    export default {
+        name: "gaugeRadial",
+        data: function () {
+            return {
+                rangeLow:  -10.4,
+                rangeHigh: 100,
+                curVal: 79.09,
+                limit1: 91.0
+            }
+        },
+        methods: {
+            round: function(val, decimals) {
+                let precision = Math.pow(10, decimals);
+                return Math.round(val * precision)/precision;
+            },
+            valToPercent: function(vValue) {
+                return ((vValue - this.rangeLow) / (this.rangeHigh - this.rangeLow)) * 100;
+            },
+            percentToDegrees: function(vPercent) {
+                return this.round((vPercent/100)*270, 2);
+            }
+        },
+        computed: {
+            degValue: function() {
+                return this.percentToDegrees(this.valToPercent(this.curVal));
+            },
+            degLimit: function() {
+                return this.percentToDegrees(this.valToPercent(this.limit1));
+            }
+        }
+    }
+</script>

src/plugins/gauge/gauge.js

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    './components/gaugeRadial.vue',
+    'vue'
+], function (
+    GaugeComponent,
+    Vue
+) {
+    function Gauge(openmct) {
+        return {
+            key: 'gauge',
+            name: 'Gauge',
+            cssClass: 'icon-gauge',
+            canView: function (domainObject) {
+                return domainObject.type === 'gauge';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                GaugeComponent: GaugeComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject,
+                                composition: openmct.composition.get(domainObject)
+                            },
+                            el: element,
+                            template: '<gauge-component></gauge-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return Gauge;
+});

src/plugins/gauge/plugin.js

@@ -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.
+ *****************************************************************************/
+
+define([
+    './gauge'
+], function (
+    Gauge
+) {
+    return function plugin() {
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new Gauge(openmct));
+
+            openmct.types.addType('gauge', {
+                name: "Gauge",
+                creatable: true,
+                description: "Graphically visualize a telemetry element's current value between a minimum and maximum.",
+                cssClass: 'icon-gauge',
+                initialize(domainObject) {
+                    domainObject.composition = [];
+                }
+            });
+        };
+    };
+});

src/plugins/plugins.js

@@ -38,6 +38,7 @@ define([
     './displayLayout/plugin',
     './folderView/plugin',
     './tabs/plugin',
+    './gauge/plugin',
     '../../platform/features/fixed/plugin'
 ], function (
     _,
@@ -57,6 +58,7 @@ define([
     DisplayLayoutPlugin,
     FolderView,
     Tabs,
+    Gauge,
     FixedView
 ) {
     var bundleMap = {
@@ -170,6 +172,7 @@ define([
     plugins.DisplayLayout = DisplayLayoutPlugin.default;
     plugins.FolderView = FolderView;
     plugins.Tabs = Tabs;
+    plugins.Gauge = Gauge;
     plugins.FixedView = FixedView;
 
     return plugins;

src/styles-new/_constants-espresso.scss

@@ -24,6 +24,8 @@
 
 @import "constants";
 
+// TODO: parity with font approach as in maelstrom2 theme
+
 // Functions
 @function buttonBg($c: $colorBtnBg) {
     @return linear-gradient(lighten($c, 5%), $c);

src/styles-new/_constants-maelstrom2.scss

@@ -0,0 +1,356 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/************************************************** MAELSTROM2 THEME CONSTANTS */
+
+@import "constants";
+
+// FONTS
+@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,600,700|Michroma|Teko:400,700');
+
+$heroFont: 'Teko', sans-serif;
+$headerFont: 'Michroma', sans-serif;
+$bodyFont: 'Chakra Petch', sans-serif;
+
+@mixin heroFont($size: 1em) {
+    $mult: 1;
+    font-family: $heroFont;
+    font-size: $size * $mult;
+}
+
+@mixin headerFont($size: 1em) {
+    $mult: 0.8;
+    font-family: $headerFont;
+    font-size: $size * $mult;
+    text-transform: uppercase;
+    word-spacing: 0.25em;
+}
+
+@mixin bodyFont($size: 1em) {
+    $mult: 1;
+    font-family: $bodyFont;
+    font-size: $size * $mult;
+}
+
+// Functions
+@function buttonBg($c: $colorBtnBg) {
+    @return linear-gradient(lighten($c, 5%), $c);
+}
+
+// Constants
+$fontBaseSize: 12px;
+$smallCr: 2px;
+$controlCr: 3px;
+$basicCr: 4px;
+
+// Base colors
+$colorBodyBg: #393939;
+$colorBodyFg: #aaa;
+$colorGenBg: #222;
+$colorHeadBg: #262626;
+$colorHeadFg: $colorBodyFg;
+$colorStatusBarBg: $colorHeadBg;
+$colorStatusBarFg: $colorBodyFg;
+$colorStatusBarFgHov: #aaa;
+$colorKey: #0099cc;
+$colorKeyFg: #fff;
+$colorKeyHov: #00c0f6;
+$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
+$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
+$colorKeySelectedBg: $colorKey;
+$colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorA: #ccc;
+$colorAHov: #fff;
+
+// Layout
+$shellMainPad: 4px 0;
+$shellPanePad: $interiorMargin, 7px;
+
+// Status colors, mainly used for messaging and item ancillary symbols
+$colorStatusFg: #999;
+$colorStatusDefault: #ccc;
+$colorStatusInfo: #60ba7b;
+$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
+$colorStatusAlert: #ffb66c;
+$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
+$colorStatusError: #da0004;
+$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
+$colorStatusBtnBg: #666; // Where is this used?
+
+// States
+$colorPausedBg: #ff9900;
+$colorPausedFg: #fff;
+$colorOk: #33cc33;
+
+// Base variations
+$colorBodyBgSubtle: lighten($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: darken($colorKey, 50%);
+$colorKeySubtle: darken($colorKey, 10%);
+
+// Time Colors
+$colorTime: #618cff;
+$colorTimeBg: $colorTime;
+$colorTimeFg: lighten($colorTimeBg, 30%);
+$colorTimeHov: lighten($colorTime, 10%);
+$colorTimeSubtle: darken($colorTime, 20%);
+$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
+$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+
+// Edit Colors
+$editColor: #00c7c3;
+$editColorFg: $colorBodyFg;
+$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
+$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
+$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
+$editBorderSelectable: 1px dotted rgba($editColor, 1);
+$editBorderSelectableHov: 1px dashed rgba($editColor, 1);
+$editBorderSelected: 1px solid $editColor;
+$editBorderDrilledIn: 1px dashed #ff4d9a;
+$colorGridLines: rgba($editColor, 0.2);
+
+// Icons
+$colorIconAlias: #4af6f3;
+$colorIconAliasForKeyFilter: #aaa;
+
+// Holders
+$colorTabsHolderBg: rgba(black, 0.2);
+
+// Buttons and Controls
+$colorBtnBg: lighten($colorBodyBg, 10%);
+$colorBtnBgHov: lighten($colorBtnBg, 10%);
+$colorBtnFg: lighten($colorBodyFg, 10%);
+$colorBtnReverseFg: lighten($colorBtnFg, 10%);
+$colorBtnReverseBg: lighten($colorBtnBg, 10%);
+$colorBtnFgHov: $colorBtnFg;
+$colorBtnMajorBg: $colorKey;
+$colorBtnMajorBgHov: $colorKeyHov;
+$colorBtnMajorFg: $colorKeyFg;
+$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%);
+$colorBtnCautionBg: #f16f6f;
+$colorBtnCautionBgHov: #f1504e;
+$colorBtnCautionFg: $colorBtnFg;
+$colorClickIcon: $colorKey;
+$colorClickIconBgHov: rgba($colorKey, 0.6);
+$colorClickIconFgHov: $colorKeyHov;
+$colorDropHint: $colorKey;
+$colorDropHintBg: darken($colorDropHint, 10%);
+$colorDropHintBgHov: $colorDropHint;
+$colorDropHintFg: lighten($colorDropHint, 40%);
+
+// Menus
+$colorMenuBg: lighten($colorBodyBg, 15%);
+$colorMenuFg: lighten($colorBodyFg, 30%);
+$colorMenuIc: lighten($colorKey, 15%);
+$colorMenuHovBg: $colorMenuIc;
+$colorMenuHovFg: lighten($colorMenuFg, 10%);
+$colorMenuHovIc: $colorMenuHovFg;
+$colorMenuElementHilite: lighten($colorMenuBg, 10%);
+$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenuText: none;
+$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+
+// Palettes and Swatches
+$paletteItemBorderOuterColorSelected: black;
+$paletteItemBorderInnerColorSelected: white;
+$paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
+
+// Form colors
+$colorCheck: $colorKey;
+$colorFormRequired: $colorKey;
+$colorFormValid: $colorOk;
+$colorFormError: #990000;
+$colorFormInvalid: #ff2200;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
+$colorFormLines: rgba(#000, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.05);
+$colorInputBg: rgba(black, 0.2);
+$colorInputFg: $colorBodyFg;
+$colorInputPlaceholder: darken($colorBodyFg, 20%);
+$colorFormText: darken($colorBodyFg, 10%);
+$colorInputIcon: darken($colorBodyFg, 25%);
+$colorFieldHint: lighten($colorBodyFg, 40%);
+$shdwInput: inset rgba(black, 0.4) 0 0 1px;
+$shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
+$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+
+// Inspector
+$colorInspectorBg: lighten($colorBodyBg, 5%);
+$colorInspectorFg: $colorBodyFg;
+$colorInspectorPropName: darken($colorBodyFg, 20%);
+$colorInspectorPropVal: lighten($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%);
+
+// Overlay
+$overlayColorBg: $colorMenuBg;
+$overlayColorFg: $colorMenuFg;
+$overlayCr: $interiorMarginLg;
+$overlayBrightnessAdjust: brightness(1.3);
+
+// Indicator colors
+$colorIndicatorAvailable: $colorKey;
+$colorIndicatorDisabled: #444;
+$colorIndicatorOn: $colorOk;
+$colorIndicatorOff: #666;
+
+// Limits and staleness colors//
+$colorTelemFresh: lighten($colorBodyFg, 20%);
+$colorTelemStale: darken($colorBodyFg, 20%);
+$styleTelemStale: italic;
+$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+$colorLimitYellowIc: #ffaa00;
+$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitRedIc: red;
+
+// Bubble colors
+$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleFg: #666;
+
+// Items
+$colorItemBg: buttonBg($colorBtnBg);
+$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%));
+$colorListItemBg: transparent;
+$colorListItemBgHov: rgba($colorKey, 0.1);
+$colorItemFg: $colorBtnFg;
+$colorItemFgDetails: darken($colorItemFg, 20%);
+$shdwItemText: none;
+
+// Tabular
+$colorTabBorder: lighten($colorBodyBg, 10%);
+$colorTabBodyBg: $colorBodyBg;
+$colorTabBodyFg: lighten($colorBodyFg, 20%);
+$colorTabHeaderBg: lighten($colorBodyBg, 10%);
+$colorTabHeaderFg: lighten($colorBodyFg, 20%);
+$colorTabHeaderBorder: $colorBodyBg;
+
+// Plot
+$colorPlotBg: rgba(black, 0.05);
+$colorPlotFg: $colorBodyFg;
+$colorPlotHash: black;
+$opacityPlotHash: 0.2;
+$stylePlotHash: dashed;
+$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: darken($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);
+
+// Tree
+$colorTreeBg: transparent;
+$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
+$colorItemTreeHoverFg: lighten($colorBodyFg, 10%);
+$colorItemTreeIcon: $colorKey; // Used
+$colorItemTreeIconHover: $colorItemTreeIcon; // Used
+$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeSelectedBg: darken($colorKey, 15%);
+$colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeEditingBg: $editColor;
+$colorItemTreeEditingFg: $editColorFg;
+$colorItemTreeVC: $colorBodyFg;
+$colorItemTreeVCHover: $colorKey;
+$shdwItemTreeIcon: none;
+
+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
+// Scrollbar
+$scrollbarTrackSize: 7px;
+$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
+$scrollbarTrackColorBg: rgba(#000, 0.2);
+$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColorHov: $colorKey;
+$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%);
+
+// Splitter
+$splitterHandleD: 2px;
+$splitterHandleHitMargin: 4px;
+$colorSplitterBaseBg: $colorBodyBg;
+$colorSplitterBg: lighten($colorSplitterBaseBg, 10%);
+$colorSplitterFg: $colorBodyBg;
+$colorSplitterHover: $colorKey;
+$colorSplitterActive: $colorKey;
+$splitterBtnD: (16px, 35px); // height, width
+$splitterBtnColorBg: $colorBtnBg;
+$splitterBtnColorFg: #999;
+$splitterBtnLabelColorFg: #666;
+$splitterCollapsedBtnColorBg: #222;
+$splitterCollapsedBtnColorFg: #666;
+$splitterCollapsedBtnColorBgHov: $colorKey;
+$splitterCollapsedBtnColorFgHov: $colorKeyFg;
+
+// Mobile
+$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
+$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
+$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
+
+// About Screen
+$colorAboutLink: $colorKeySubtle;
+
+// Loading
+$colorLoadingFg: #776ba2;
+$colorLoadingBg: rgba($colorLoadingFg, 0.1);
+
+// Transitions
+$transIn: all 50ms ease-in-out;
+$transOut: all 250ms ease-in-out;
+$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
+$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
+
+// Discrete items, like Notebook entries, Widget rules
+$createBtnTextTransform: uppercase;
+
+@mixin discreteItem() {
+    background: rgba($colorBodyFg,0.1);
+    border: none;
+    border-radius: $controlCr;
+
+    .c-input-inline:hover {
+        background: $colorBodyBg;
+    }
+}
+
+@mixin discreteItemInnerElem() {
+    border: 1px solid rgba(#fff, 0.1);
+    border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+    background: linear-gradient(lighten($c, 5%), $c);
+    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
+}
+
+/**************************************************** OVERRIDES */
+.c-frame {
+    &:not(.no-frame) {
+        $bc: #666;
+        $bLR: 3px solid transparent;
+        $br: 20px;
+        border-radius: $br;
+        border-top: 4px solid $bc !important;
+        border-bottom: 2px solid $bc !important;
+        border-left: $bLR !important;;
+        border-right: $bLR !important;;
+        padding: 5px 10px 10px 10px !important;
+    }
+}

src/styles-new/_global.scss

@@ -116,8 +116,7 @@ body, html {
 body {
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: $fontBaseSize;
+    @include bodyFont($size: $fontBaseSize);
     font-weight: normal;
     background-color: $colorBodyBg;
     color: $colorBodyFg;

src/styles-new/sass-base.scss

@@ -24,6 +24,6 @@
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
 @import "constants";
-@import "constants-espresso"; // TEMP
+@import "constants-maelstrom2"; // TEMP
 //@import "constants-snow"; // TEMP
 @import "mixins";

src/ui/components/layout/BrowseBar.vue

@@ -178,7 +178,7 @@
             align-items: center;
             display: flex;
             flex: 0 1 auto;
-            font-size: 1.4em;
+            @include headerFont($size: 1.4em);
             min-width: 0;
 
             &:before {