Merge branch 'master' of https://github.com/nasa/openmct into darkmatter-theme-merged

.webpack/webpack.common.mjs

@@ -49,7 +49,8 @@ const config = {
     couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
     inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
     espressoTheme: './src/plugins/themes/espresso-theme.scss',
-    snowTheme: './src/plugins/themes/snow-theme.scss'
+    snowTheme: './src/plugins/themes/snow-theme.scss',
+    darkmatterTheme: './src/plugins/themes/darkmatter-theme.scss'
   },
   output: {
     globalObject: 'this',

e2e/playwright-visual-a11y.config.js

@@ -36,6 +36,13 @@ const config = {
         browserName: 'chromium',
         theme: 'snow'
       }
+    },
+    {
+      name: 'diy-theme', //Runs the same visual tests but with diy-theme
+      use: {
+        browserName: 'chromium',
+        theme: 'diy-theme'
+      }
     }
   ],
   reporter: [

index.html

@@ -106,140 +106,136 @@
       openmct.install(openmct.plugins.example.ExampleImagery());
       openmct.install(openmct.plugins.example.ExampleTags());
 
-      openmct.install(openmct.plugins.Espresso());
-      openmct.install(openmct.plugins.MyItems());
-      openmct.install(
-        openmct.plugins.PlanLayout({
-          creatable: true
-        })
-      );
-      openmct.install(openmct.plugins.Timeline());
-      openmct.install(openmct.plugins.Hyperlink());
-      openmct.install(openmct.plugins.UTCTimeSystem());
-      openmct.install(
-        openmct.plugins.AutoflowView({
-          type: 'telemetry.panel'
-        })
-      );
-      openmct.install(
-        openmct.plugins.DisplayLayout({
-          showAsView: ['summary-widget', 'example.imagery']
-        })
-      );
-      openmct.install(
-        openmct.plugins.Conductor({
-          menuOptions: [
-            {
-              name: 'Fixed',
-              timeSystem: 'utc',
-              bounds: {
-                start: Date.now() - THIRTY_MINUTES,
-                end: Date.now()
-              },
-              // commonly used bounds can be stored in history
-              // bounds (start and end) can accept either a milliseconds number
-              // or a callback function returning a milliseconds number
-              // a function is useful for invoking Date.now() at exact moment of preset selection
-              presets: [
-                {
-                  label: 'Last Day',
-                  bounds: {
-                    start: () => Date.now() - ONE_DAY,
-                    end: () => Date.now()
-                  }
-                },
-                {
-                  label: 'Last 2 hours',
-                  bounds: {
-                    start: () => Date.now() - TWO_HOURS,
-                    end: () => Date.now()
-                  }
-                },
-                {
-                  label: 'Last hour',
-                  bounds: {
-                    start: () => Date.now() - ONE_HOUR,
-                    end: () => Date.now()
-                  }
-                }
-              ],
-              // maximum recent bounds to retain in conductor history
-              records: 10
-              // maximum duration between start and end bounds
-              // for utc-based time systems this is in milliseconds
-              // limit: ONE_DAY
+    openmct.install(openmct.plugins.Darkmatter());
+    openmct.install(openmct.plugins.MyItems());
+    openmct.install(
+      openmct.plugins.PlanLayout({
+        creatable: true
+      })
+    );
+    openmct.install(openmct.plugins.Timeline());
+    openmct.install(openmct.plugins.Hyperlink());
+    openmct.install(openmct.plugins.UTCTimeSystem());
+    openmct.install(
+      openmct.plugins.AutoflowView({
+        type: 'telemetry.panel'
+      })
+    );
+    openmct.install(
+      openmct.plugins.DisplayLayout({
+        showAsView: ['summary-widget', 'example.imagery']
+      })
+    );
+    openmct.install(
+      openmct.plugins.Conductor({
+        menuOptions: [
+          {
+            name: 'Fixed',
+            timeSystem: 'utc',
+            bounds: {
+              start: Date.now() - THIRTY_MINUTES,
+              end: Date.now()
             },
-            {
-              name: 'Realtime',
-              timeSystem: 'utc',
-              clock: 'local',
-              clockOffsets: {
-                start: -THIRTY_MINUTES,
-                end: THIRTY_SECONDS
-              },
-              presets: [
-                {
-                  label: '1 Hour',
-                  bounds: {
-                    start: -ONE_HOUR,
-                    end: THIRTY_SECONDS
-                  }
-                },
-                {
-                  label: '30 Minutes',
-                  bounds: {
-                    start: -THIRTY_MINUTES,
-                    end: THIRTY_SECONDS
-                  }
-                },
-                {
-                  label: '15 Minutes',
-                  bounds: {
-                    start: -FIFTEEN_MINUTES,
-                    end: THIRTY_SECONDS
-                  }
-                },
-                {
-                  label: '5 Minutes',
-                  bounds: {
-                    start: -FIVE_MINUTES,
-                    end: THIRTY_SECONDS
-                  }
-                },
-                {
-                  label: '1 Minute',
-                  bounds: {
-                    start: -ONE_MINUTE,
-                    end: THIRTY_SECONDS
-                  }
+            // commonly used bounds can be stored in history
+            // bounds (start and end) can accept either a milliseconds number
+            // or a callback function returning a milliseconds number
+            // a function is useful for invoking Date.now() at exact moment of preset selection
+            presets: [
+              {
+                label: 'Last Day',
+                bounds: {
+                  start: () => Date.now() - ONE_DAY,
+                  end: () => Date.now()
                 }
-              ]
-            }
-          ]
-        })
-      );
-      openmct.install(openmct.plugins.SummaryWidget());
-      openmct.install(openmct.plugins.Notebook());
-      openmct.install(openmct.plugins.LADTable());
-      openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
-      openmct.install(openmct.plugins.ObjectMigration());
-      openmct.install(
-        openmct.plugins.ClearData(
-          ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked', 'example.imagery'],
-          { indicator: true }
-        )
-      );
-      openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
-      openmct.install(openmct.plugins.Timer());
-      openmct.install(openmct.plugins.Timelist());
-      openmct.install(openmct.plugins.BarChart());
-      openmct.install(openmct.plugins.ScatterPlot());
-      document.addEventListener('DOMContentLoaded', function () {
-        openmct.start();
-      });
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
+              },
+              {
+                label: 'Last 2 hours',
+                bounds: {
+                  start: () => Date.now() - TWO_HOURS,
+                  end: () => Date.now()
+                }
+              },
+              {
+                label: 'Last hour',
+                bounds: {
+                  start: () => Date.now() - ONE_HOUR,
+                  end: () => Date.now()
+                }
+              }
+            ],
+            // maximum recent bounds to retain in conductor history
+            records: 10
+            // maximum duration between start and end bounds
+            // for utc-based time systems this is in milliseconds
+            // limit: ONE_DAY
+          },
+          {
+            name: 'Realtime',
+            timeSystem: 'utc',
+            clock: 'local',
+            clockOffsets: {
+              start: -THIRTY_MINUTES,
+              end: THIRTY_SECONDS
+            },
+            presets: [
+              {
+                label: '1 Hour',
+                bounds: {
+                  start: -ONE_HOUR,
+                  end: THIRTY_SECONDS
+                }
+              },
+              {
+                label: '30 Minutes',
+                bounds: {
+                  start: -THIRTY_MINUTES,
+                  end: THIRTY_SECONDS
+                }
+              },
+              {
+                label: '15 Minutes',
+                bounds: {
+                  start: -FIFTEEN_MINUTES,
+                  end: THIRTY_SECONDS
+                }
+              },
+              {
+                label: '5 Minutes',
+                bounds: {
+                  start: -FIVE_MINUTES,
+                  end: THIRTY_SECONDS
+                }
+              },
+              {
+                label: '1 Minute',
+                bounds: {
+                  start: -ONE_MINUTE,
+                  end: THIRTY_SECONDS
+                }
+              }
+            ]
+          }
+        ]
+      })
+    );
+    openmct.install(openmct.plugins.SummaryWidget());
+    openmct.install(openmct.plugins.Notebook());
+    openmct.install(openmct.plugins.LADTable());
+    openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+    openmct.install(openmct.plugins.ObjectMigration());
+    openmct.install(
+      openmct.plugins.ClearData(
+        ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked', 'example.imagery'],
+        { indicator: true }
+      )
+    );
+    openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
+    openmct.install(openmct.plugins.Timer());
+    openmct.install(openmct.plugins.Timelist());
+    openmct.install(openmct.plugins.BarChart());
+    openmct.install(openmct.plugins.ScatterPlot());
+    document.addEventListener('DOMContentLoaded', function () {
+      openmct.start();
+    });
+  </script>
 </html>

src/plugins/displayLayout/components/display-layout.scss

@@ -55,6 +55,7 @@
 
   &__frame {
     position: absolute;
+    @include browseFrameBorder; // Gives us the DIY Highlighted Corners
   }
 }
 

src/plugins/displayLayout/components/telemetry-view.scss

@@ -18,6 +18,7 @@
   }
 
   &__value {
+    @include telemetryView();
     @include isLimit();
   }
 

src/plugins/gauge/gauge.scss

@@ -84,11 +84,12 @@ $meterNeedleBorderRadius: 5px;
     fill: $colorGaugeValue;
   }
   &__needle-value {
-    fill: $colorGaugeValue;
+    fill: $colorGaugeNeedle;
+
   }
   &__current-value-text {
     fill: $colorGaugeTextValue;
-    font-family: $heroFont;
+    font-family: $numericFont;
   }
 
   &__units-text,
@@ -125,7 +126,8 @@ $meterNeedleBorderRadius: 5px;
     // Filled area
     position: absolute;
     background: $colorGaugeValue;
-    z-index: 1;
+    box-shadow: rgba($colorGaugeValueShadow, .5) 0px 0px 12px 0px;
+    // z-index: 3;
   }
 
   &__value-needle {
@@ -135,6 +137,7 @@ $meterNeedleBorderRadius: 5px;
       content: '';
       display: block;
       background: $colorGaugeValue;
+
     }
   }
 
@@ -158,7 +161,7 @@ $meterNeedleBorderRadius: 5px;
 
   &__current-value-text {
     fill: $colorGaugeTextValue;
-    font-family: $heroFont;
+    font-family: $numericFont;
   }
 
   .c-gauge__curval {

src/plugins/plugins.js

@@ -72,6 +72,7 @@ import SummaryWidget from './summaryWidget/plugin.js';
 import Tabs from './tabs/plugin.js';
 import TelemetryMean from './telemetryMean/plugin.js';
 import TelemetryTablePlugin from './telemetryTable/plugin.js';
+import DarkMatter from './themes/darkMatter.js';
 import Espresso from './themes/espresso.js';
 import Snow from './themes/snow.js';
 import TimeConductorPlugin from './timeConductor/plugin.js';
@@ -125,7 +126,6 @@ plugins.Plot = PlotPlugin;
 plugins.BarChart = BarChartPlugin;
 plugins.ScatterPlot = ScatterPlotPlugin;
 plugins.TelemetryTable = TelemetryTablePlugin;
-
 plugins.SummaryWidget = SummaryWidget;
 plugins.TelemetryMean = TelemetryMean;
 plugins.URLIndicator = URLIndicatorPlugin;
@@ -145,6 +145,7 @@ plugins.OpenInNewTabAction = OpenInNewTabAction;
 plugins.ReloadAction = ReloadAction;
 plugins.ClearData = ClearData;
 plugins.WebPage = WebPagePlugin;
+plugins.Darkmatter = DarkMatter;
 plugins.Espresso = Espresso;
 plugins.Snow = Snow;
 plugins.Condition = ConditionPlugin;

src/plugins/themes/darkmatter-theme.scss

@@ -0,0 +1,22 @@
+@import '../../styles/vendor/normalize-min';
+@import '../../styles/constants';
+@import '../../styles/constants-mobile.scss';
+
+@import '../../styles/constants-darkmatter';
+
+@import '../../styles/mixins';
+@import '../../styles/animations';
+@import '../../styles/about';
+@import '../../styles/glyphs';
+@import '../../styles/global';
+@import '../../styles/status';
+@import '../../styles/limits';
+@import '../../styles/controls';
+@import '../../styles/forms';
+@import '../../styles/table';
+@import '../../styles/legacy';
+@import '../../styles/legacy-plots';
+@import '../../styles/plotly';
+@import '../../styles/legacy-messages';
+
+@import '../../styles/vue-styles.scss';

src/plugins/themes/darkmatter.js

@@ -0,0 +1,7 @@
+import { installTheme } from './installTheme.js';
+
+export default function plugin() {
+  return function install(openmct) {
+    installTheme(openmct, 'darkmatter');
+  };
+}

src/styles/_constants-darkmatter.scss

@@ -0,0 +1,600 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**************************************************DIY THEME CONSTANTS */
+
+// Fonts
+// $heroFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+// $headerFont: $heroFont;
+// $bodyFont: $heroFont;
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts. 
+@import url('https://fonts.googleapis.com/css2?family=Blinker&display=swap'); // Body Font, Blinker
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap');// Temporary numeric font, Chakra Petch (need to import local font instead).
+$heroFont: 'Teko', sans-serif;
+$headerFont: 'Cabin Condensed', sans-serif;
+$bodyFont: 'Blinker', sans-serif;
+$numericFont: 'Chakra Petch', sans-serif;
+
+@mixin heroFont($size: 1em) {
+  font-family: $heroFont;
+  font-size: $size;
+}
+
+@mixin headerFont($size: 1em) {
+  font-family: $headerFont;
+  font-size: $size;
+}
+
+@mixin bodyFont($size: 1em) {
+  font-family: $bodyFont;
+  font-size: $size;
+}
+
+@mixin numericFont($size: 1em){
+  font-family: $numericFont;
+  font-size: $size;
+}
+
+// Functions
+@function buttonBg($c: $colorBtnBg) {
+  // @return linear-gradient(lighten($c, 5%), $c);
+  @return radial-gradient(rgba($colorBodyBg, 1) , rgba($colorBodyBg, .6));
+}
+
+@function pullForward($val, $amt) {
+  @return lighten($val, $amt);
+}
+
+@function pushBack($val, $amt) {
+  @return darken($val, $amt);
+}
+
+// Constants
+$fontBaseSize: 12px;
+$smallCr: 2px;
+$controlCr: 3px;
+$basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
+
+// Base colors
+$colorBodyBg: rgba(57, 57, 57, 1);
+$colorBodyFg: #aaaaaa;
+$colorBodyFgSubtle: #9c9c9c;
+$colorBodyFgEm: #fff;
+$colorGenBg: #222;
+// $colorHeadBg: #262626;
+$colorHeadBg: rgba($colorBodyBg, 0);
+$colorHeadFg: $colorBodyFg;
+$colorKey: #1C67E3;
+$colorKeyFg: #fff;
+$colorKeyBg: #015fca; // Darker version of colorKey for use in major buttons
+$colorKeyHov: lighten($colorKey, 10%);
+$colorKeyFilter: invert(36%) sepia(16%) saturate(2512%) hue-rotate(170deg) brightness(100%) contrast(101%);
+$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
+  contrast(100%);
+$colorKeySelectedBg: $colorKey;
+$uiColor: #0093ff; // Resize bars, splitter bars, etc.
+$colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorA: #ccc;
+$colorAHov: #fff;
+$filterHov: brightness(1.3) contrast(1.5); // Tree, location items
+$colorSelectedBg: rgba($colorKey, 0.3);
+$colorSelectedFg: pullForward($colorBodyFg, 20%);
+
+// Background Image 
+$bodyBg: $colorBodyBg url('../ui/layout/assets/images/background.png');
+
+// Object labels
+$objectLabelTypeIconOpacity: 0.9;
+$objectLabelNameColorFg: $colorBodyFgEm;
+
+// Layout
+$shellMainPad: 4px 0;
+$shellPanePad: $interiorMargin, 7px;
+$drawerBg: lighten($colorBodyBg, 5%);
+$drawerFg: lighten($colorBodyFg, 5%);
+$sideBarBg: $drawerBg;
+$sideBarHeaderBg: rgba($colorBodyFg, 0.1);
+$sideBarHeaderFg: rgba($colorBodyFg, 0.7);
+
+// Status colors, mainly used for messaging and item ancillary symbols
+$colorStatusFg: #888;
+$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?
+$colorStatusPartialBg: #3f5e8b;
+$colorStatusCompleteBg: #457638;
+$colorAlert: #ff8a0d;
+$colorAlertFg: #fff;
+$colorError: #ff3c00;
+$colorErrorFg: #fff;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #ff9594;
+$colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
+$colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461a;
+$colorCommand: #3693bd;
+$colorCommandFg: #fff;
+$colorInfo: #2294a2;
+$colorInfoFg: #fff;
+$colorOk: #33cc33;
+$colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
+$colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
+
+// States
+$colorPausedBg: #ff9900;
+$colorPausedFg: #333;
+
+// Base variations
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
+$colorKeySubtle: pushBack($colorKey, 10%);
+
+// Time Colors
+$colorTimeCommonFg: #eee;
+$colorTimeFixed: #59554c;
+$colorTimeFixedBg: $colorTimeFixed;
+$colorTimeFixedFg: #eee;
+$colorTimeFixedFgSubtle: #b2aa98;
+$colorTimeFixedHov: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedSubtle: pushBack($colorTimeFixed, 20%);
+$colorTimeFixedBtnBg: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
+$colorTimeFixedBtnBgMajor: #a09375;
+$colorTimeFixedBtnFgMajor: #fff;
+
+$colorTimeRealtime: #445890;
+$colorTimeRealtimeBg: $colorTimeRealtime;
+$colorTimeRealtimeFg: #eee;
+$colorTimeRealtimeFgSubtle: #88b0ff;
+$colorTimeRealtimeHov: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
+$colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeBtnFg: $colorTimeRealtimeFgSubtle;
+$colorTimeRealtimeBtnBgMajor: #588ffa;
+$colorTimeRealtimeBtnFgMajor: #fff;
+
+$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
+$colorTOIHov: $colorTimeRealtime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;
+
+/************************************************** BROWSING */
+$browseFrameColor: pullForward($colorBodyBg, 10%);
+$browseFrameBorder: 1px solid rgb(89, 89, 89, .4); // Frames in Disp and Flex Layouts when frame is showing
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2) contrast(1.1);
+$filterItemMissing: brightness(0.6) grayscale(1);
+$opacityMissing: 0.5;
+$borderMissing: 1px dashed $colorAlert !important;
+$browseFrameCornerColor: #1C67E3 4px; //Color used for the corners of frames
+
+@mixin browseFrameBorder() { // Used on main object container to add highlighted corners to non-hidden frames.
+  border-image: radial-gradient(circle, #575757, #6c6c6c, #818181, #979797, #aeaeae);
+  border-style: solid;
+  padding: 10px;
+ 
+  // TODO: Make variables out of this. To add a glow, add another set of linear gradients with an opacity and larger pixel size.   
+  background:
+    linear-gradient(to right, $browseFrameCornerColor, transparent 4px) 0 0,
+    linear-gradient(to right, $browseFrameCornerColor, transparent 4px) 0 100%,
+    linear-gradient(to left, $browseFrameCornerColor, transparent 4px) 100% 0,
+    linear-gradient(to left, $browseFrameCornerColor, transparent 4px) 100% 100%,
+    linear-gradient(to bottom, $browseFrameCornerColor, transparent 4px) 0 0,
+    linear-gradient(to bottom, $browseFrameCornerColor, transparent 4px) 100% 0,
+    linear-gradient(to top, $browseFrameCornerColor, transparent 4px) 0 100%,
+    linear-gradient(to top, $browseFrameCornerColor, transparent 4px) 100% 100%;
+
+  background-repeat: no-repeat;
+  background-size: 35px 35px;
+  border-radius: $interiorMarginLg;
+  box-shadow: 0px 0px 20px 2px rgb(140 140 140 / 20%);
+}
+  
+
+/************************************************** EDITING */
+$editUIColor: $uiColor; // Base color
+$editUIColorBg: $editUIColor;
+$editUIColorFg: #fff;
+$editUIColorHov: pullForward(
+  saturate($uiColor, 10%),
+  10%
+); // Hover color when $editUIColor is applied as a base color
+$editUIBaseColor: #344b8d; // Base color, toolbar bg
+$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
+$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
+$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
+$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
+$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
+$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
+$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
+$editDimensionsColor: #6a5ea6;
+$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
+$editFrameBorder: 1px dotted $editFrameColor;
+$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
+$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
+$editFrameColorSelected: #ffefc2; // Border of selected frames while editing
+$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
+$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
+$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
+$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
+$editFrameMovebarColorFg: pullForward(
+  $editFrameMovebarColorBg,
+  20%
+); // Grippy lines, container size text
+$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
+$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
+$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
+$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
+$editFrameMovebarH: 10px; // Height of move bar in layout frame
+$editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: $editMarqueeBorder; // Selected frame element
+
+// Icons
+$colorIconAlias: #4af6f3;
+$colorIconAliasForKeyFilter: #aaa;
+
+// Holders
+$colorTabsHolderBg: rgba(black, 0.2);
+
+// Buttons and Controls
+$colorBtnBg: pullForward($colorBodyBg, 5%);
+$colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 100px;
+$colorBtnFg: pullForward($colorBodyFg, 10%);
+$colorBtnReverseFg: pullForward($colorBtnFg, 10%);
+$colorBtnReverseBg: pullForward($colorBtnBg, 10%);
+$colorBtnFgHov: $colorBtnFg;
+$colorBtnMajorBg: $colorKey;
+$colorBtnMajorBgHov: $colorKeyHov;
+$colorBtnMajorFg: $colorKeyFg;
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
+$colorBtnCautionBg: $colorStatusAlert;
+$colorBtnCautionBgHov: #f1504e;
+$colorBtnCautionFg: $colorBtnBg;
+$colorBtnActiveBg: $colorOk;
+$colorBtnActiveFg: $colorOkFg;
+$colorBtnSelectedBg: $colorSelectedBg;
+$colorBtnSelectedFg: $colorSelectedFg;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.3);
+$colorClickIconButtonFgHov: $colorKeyHov;
+$colorDropHint: $colorKey;
+$colorDropHintBg: pushBack($colorDropHint, 10%);
+$colorDropHintBgHov: $colorDropHint;
+$colorDropHintFg: pullForward($colorDropHint, 40%);
+$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
+$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
+$colorCursorGuide: rgba(white, 0.6);
+$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
+$colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
+$colorSelectFg: $colorBtnFg;
+$colorSelectArw: lighten($colorBtnBg, 20%);
+$shdwSelect: rgba(black, 0.5) 0 0.5px 3px;
+$controlDisabledOpacity: 0.2;
+
+// Menus
+$colorMenuBg: rgba($colorBodyBg, 0.6);
+$colorMenuFg: $colorBodyFg;
+$colorMenuIc: $colorKey;
+$filterMenu: brightness(1.4);
+$colorMenuHovBg: rgba($colorKey, 0.5);
+$colorMenuHovFg: $colorBodyFgEm;
+$colorMenuHovIc: $colorMenuHovFg;
+$colorMenuElementHilite: pullForward($colorMenuBg, 10%);
+$shdwMenu: rgba(black, 0.8) 0 2px 10px;
+$shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
+$shdwMenuText: none;
+$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+
+// Palettes and Swatches
+$paletteItemBorderOuterColorSelected: black;
+$paletteItemBorderInnerColorSelected: white;
+$paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
+$mixedSettingBg: (transparent rgba($editUIBaseColorHov, 0.7)); // Used in .c-click-icon--mixed
+$mixedSettingBgSize: 5px;
+
+// Forms
+$colorCheck: $colorKey;
+$colorFormRequired: $colorKey;
+$colorFormValid: $colorOk;
+$colorFormError: #990000;
+$colorFormInvalid: #ff2200;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
+$colorFormLines: rgba(#000, 0.2);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
+$colorInputBg: rgba(black, 0.2);
+$colorInputBgHov: rgba(black, 0.1);
+$colorInputFg: $colorBodyFg;
+$colorFormText: pushBack($colorBodyFg, 10%);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($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;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
+
+// Inspector
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorFg: $colorBodyFg;
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: rgba($colorBodyBg, .75);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+
+// Tabs
+$colorTabBg: $colorBodyBg;
+$colorTabFg: $colorBodyFgEm;
+$colorTabCurrentBg: rgba($colorKey, .71);
+$colorTabCurrentFg: $colorBodyFgEm;
+$colorTabsBaseline: $colorBodyBg;
+$colorTabCurrentGlow: rgba(white, 0.6);
+
+
+// Overlay
+$colorOvrBlocker: rgba(black, 0.7);
+$overlayCr: $interiorMargin;
+
+// Indicator colors
+$colorIndicatorAvailable: $colorKey;
+$colorIndicatorDisabled: #555555;
+$colorIndicatorOn: $colorOk;
+$colorIndicatorOff: #777777;
+$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
+$colorIndicatorMenuBg: $colorHeadBg;
+$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
+$colorIndicatorMenuFg: $colorHeadFg;
+$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
+
+// Staleness
+$colorTelemStale: cyan;
+$colorTelemStaleFg: #002a2a;
+$styleTelemStale: italic;
+
+// Limits
+$colorLimitYellowBg: #b18b05;
+$colorLimitYellowFg: #feeeb5;
+$colorLimitYellowIc: #fdc707;
+$colorLimitOrangeBg: #b36b00;
+$colorLimitOrangeFg: #ffe0b2;
+$colorLimitOrangeIc: #ff9900;
+$colorLimitRedBg: #940000;
+$colorLimitRedFg: #ffa489;
+$colorLimitRedIc: #ff4222;
+$colorLimitPurpleBg: #891bb3;
+$colorLimitPurpleFg: #edbeff;
+$colorLimitPurpleIc: #c327ff;
+$colorLimitCyanBg: #4ba6b3;
+$colorLimitCyanFg: #d3faff;
+$colorLimitCyanIc: #6bedff;
+
+// Events
+$colorEventPurpleFg: #aB8fff;
+$colorEventRedFg: #ff9999;
+$colorEventOrangeFg: #ff8800;
+$colorEventYellowFg: #ffdb63;
+$colorEventPurpleBg: #31204a;
+$colorEventRedBg: #3c1616;
+$colorEventOrangeBg: #3e2a13;
+$colorEventYellowBg: #3e3316;
+
+// Bubble colors
+$colorInfoBubbleBg: #dddddd;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+
+// Items
+$colorItemBg: buttonBg($colorBtnBg);
+$colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
+$colorListItemBg: transparent;
+$colorListItemBgHov: rgba($colorKey, 0.1);
+$colorItemFg: $colorBtnFg;
+$colorItemFgDetails: pushBack($colorItemFg, 20%);
+$shdwItemText: none;
+
+// Tabular (NOT TABS!)
+$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBodyBg: $colorBodyBg;
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: #575757;
+$colorTabHeaderFg: $colorBodyFg;
+$colorTabHeaderBorder: $colorBodyBg;
+$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
+$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
+$colorSummaryBg: #2c2c2c;
+$colorSummaryFg: rgba($colorBodyFg, 0.7);
+$colorSummaryFgEm: $colorBodyFg;
+
+// Plot
+$colorPlotBg: rgba(black, 0.1);
+$colorPlotFg: $colorBodyFg;
+$colorPlotHash: $colorPlotFg;
+$opacityPlotHash: 0.2;
+$stylePlotHash: dashed;
+$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);
+$legendTableHeadBg: $colorTabHeaderBg;
+$colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
+
+// Gauges
+$colorGaugeBase: $colorKeyBg;
+$colorGaugeBg: rgba($colorGaugeBase, .15); // Gauge radial area background, meter background
+$colorGaugeValue: $colorKeyBg; // Gauge value graphic (radial sweep, bar) color
+$colorGaugeValueShadow: rgba(255, 255, 255, .4);
+$colorGaugeTextValue: #fff; // Radial gauge text value
+$colorGaugeMeterTextValue: #fff; // Meter text value, overlaid on value bar
+$colorGaugeRange: $colorBodyFgEm; // Range text color
+$colorGaugeLimitHigh: rgba($colorLimitRedBg, .5);
+$colorGaugeLimitLow: $colorGaugeLimitHigh;
+$colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge.
+$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
+$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
+// Time Strip and Lists
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFg;
+$colorCurrentFgEm: $colorBodyFgEm;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: $colorPastBg;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
+$colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
+$colorGanttSelectedBorder: rgba(#fff, 0.3);
+
+// Tree
+$colorTreeBg: transparent;
+$colorItemTreeHoverBg: rgba(#fff, 0.1);
+$colorItemTreeHoverFg: #fff;
+$colorItemTreeIcon: $colorKey; // Used
+$colorItemTreeIconHover: $colorItemTreeIcon; // Used
+$colorItemTreeFg: #ccc;
+$colorItemTreeSelectedBg: $colorSelectedBg;
+$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
+$filterItemTreeSelected: $filterHov;
+$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
+$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
+$colorItemTreeEditingFg: $editUIColor;
+$colorItemTreeEditingIcon: $editUIColor;
+$colorItemTreeVC: $colorDisclosureCtrl;
+$colorItemTreeVCHover: $colorDisclosureCtrlHov;
+$colorItemTreeNewNode: rgba($colorBodyFg, 0.7);
+$shdwItemTreeIcon: none;
+
+// Layout frame controls
+$frameControlsColorFg: white;
+$frameControlsColorBg: $colorKey;
+$frameControlsShdw: $shdwMenu;
+
+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
+// Scrollbar
+$scrollbarTrackSize: 7px;
+$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
+$scrollbarTrackColorBg: rgba(#000, 0.2);
+$scrollbarThumbColor: pushBack($colorBodyBg, 50%);
+$scrollbarThumbColorHov: $colorKey;
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+
+// Splitter
+$splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
+$splitterHandleHitMargin: 4px;
+$colorSplitterBaseBg: $colorBodyBg;
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
+$colorSplitterFg: $colorBodyBg;
+$colorSplitterHover: $uiColor;
+$colorSplitterActive: $colorKey;
+$splitterBtnD: (16px, 35px); // height, width
+$splitterBtnColorBg: $colorBtnBg;
+$splitterBtnColorFg: #999;
+$splitterBtnLabelColorFg: #666;
+$splitterCollapsedBtnColorBg: #222;
+$splitterCollapsedBtnColorFg: #555;
+$splitterCollapsedBtnColorBgHov: $colorKey;
+$splitterCollapsedBtnColorFgHov: $colorKeyFg;
+
+// Mobile
+$colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
+$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
+$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
+$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
+
+// About Screen
+$colorAboutLink: #9bb5ff;
+
+// Loading
+$colorLoadingFg: #776ba2;
+$colorLoadingBg: rgba($colorLoadingFg, 0.1);
+
+// Transitions
+$transInTime: 50ms;
+$transOutTime: 250ms;
+$transIn: all $transInTime ease-in-out;
+$transOut: all $transOutTime ease-in-out;
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
+$transInBounce: all 200ms cubic-bezier(0.47, 0.01, 0.25, 1.5);
+$transInBounceBig: all 300ms cubic-bezier(0.2, 1.6, 0.6, 3);
+
+// Discrete items, like Notebook entries, Widget rules
+$createBtnTextTransform: uppercase;
+$colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
+$colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
+$colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
+$scrollContainer: $colorBodyBg;
+
+@mixin discreteItem() {
+  background: $colorDiscreteItemBg;
+  border: none;
+  border-radius: $controlCr;
+
+  .c-input-inline:hover {
+    background: $colorBodyBg;
+  }
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid rgba(#fff, 0.1);
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  // background: radial-gradient(pullForward($c, 5%), $c);
+  background: radial-gradient(rgba($c, 1) , rgba($c, .6));
+  box-shadow: rgba(black, 0.5) 0 0.5px 2px;
+}

src/styles/_constants-espresso.scss

@@ -25,6 +25,8 @@
 $heroFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headerFont: $heroFont;
 $bodyFont: $heroFont;
+$numericFont: $heroFont;
+
 
 @mixin heroFont($size: 1em) {
   font-family: $heroFont;
@@ -64,6 +66,11 @@ $bodyFont: $heroFont;
   box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
+@mixin numericFont($size: 1em){
+  font-family: $numericFont;
+  font-size: $size;
+}
+
 // Functions
 @function buttonBg($c: $colorBtnBg) {
   @return linear-gradient(lighten($c, 5%), $c);
@@ -113,6 +120,9 @@ $filterHovSubtle: brightness(1.2) contrast(1.2);
 $colorSelectedBg: rgba($colorKey, 0.3);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
+// Background Image 
+$bodyBg: $colorBodyBg;
+
 // Object labels
 $objectLabelTypeIconOpacity: 0.8; //JOHN
 $objectLabelNameColorFg: lighten($colorBodyFg, 10%);
@@ -201,8 +211,26 @@ $filterItemHoverFg: brightness(1.2) contrast(1.1);
 $filterItemMissing: brightness(0.6) grayscale(1);
 $opacityMissing: 0.5;
 $borderMissing: 1px dashed $colorAlert !important;
+$browseFrameCornerColor: 0px solid rgb(0,150,215);
 
-// Edit
+@mixin browseFrameBorder() {
+  border: $browseFrameBorder;
+  border-radius: $controlCr;
+
+  // &:after{
+  //   display: block;
+  //   content: "";
+  //   width: 20px;
+  //   height: 20px;
+  //   position: absolute;
+  //   top: -8px;
+  //   right: -8px;
+  //   border-top: 3px solid blue;
+  //   border-right: 3px solid blue;
+  // }
+  
+}
+/************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
@@ -339,6 +367,7 @@ $colorTabFg: pullForward($colorBodyFg, 0%);
 $colorTabCurrentBg: pullForward($colorTabBg, 10%);
 $colorTabCurrentFg: pullForward($colorTabFg, 20%);
 $colorTabsBaseline: $colorTabCurrentBg;
+$colorTabCurrentGlow: rgba(white, 0.0);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
@@ -430,11 +459,13 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 // Gauges
 $colorGaugeBg: pullForward($colorBodyBg, 5%); // Gauge radial area background, meter background
 $colorGaugeValue: rgba(#fff, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeValueShadow: rgba(#fff, 0);
 $colorGaugeTextValue: #fff; // Radial gauge text value
 $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
 $colorGaugeRange: $colorBodyFg; // Range text color
 $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
+$colorGaugeNeedle: rgba(0, 95, 136);
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
 
@@ -538,3 +569,31 @@ $colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
 $colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
 $colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
 $scrollContainer: $colorBodyBg;
+@mixin discreteItem() {
+  background: $colorDiscreteItemBg;
+  border: none;
+  border-radius: $controlCr;
+
+  .c-input-inline:hover {
+    background: $colorBodyBg;
+  }
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid rgba(#fff, 0.1);
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: linear-gradient(pullForward($c, 5%), $c);
+  box-shadow: rgba(black, 0.5) 0 0.5px 2px;
+}
+
+@mixin telemetryView(){
+  border: 1px solid $colorBodyFg;
+  border-radius: $controlCr;
+}

src/styles/_constants-maelstrom.scss

@@ -27,6 +27,7 @@
 $heroFont: 'Teko', sans-serif;
 $headerFont: 'Michroma', sans-serif;
 $bodyFont: 'Chakra Petch', sans-serif;
+$numericFont: $heroFont;
 
 @mixin heroFont($size: 1em) {
   font-family: $heroFont;
@@ -45,40 +46,9 @@ $bodyFont: 'Chakra Petch', sans-serif;
   font-size: $size;
 }
 
-@mixin discreteItem() {
-  background: rgba($colorBodyFg, 0.1);
-  border: none;
-  border-radius: $controlCr;
-
-  &--current-match {
-    background: $colorDiscreteItemCurrentBg;
-  }
-}
-
-@mixin discreteItemInnerElem() {
-  border: 1px solid rgba(#fff, 0.1);
-  border-radius: $controlCr;
-}
-
-@mixin themedButton($c: $colorBtnBg) {
-  background: linear-gradient(pullForward($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;
-    background: none !important;
-    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;
-  }
+@mixin numericFont($size: 1em){
+  font-family: $numericFont;
+  font-size: $size;
 }
 
 // Functions
@@ -130,6 +100,9 @@ $filterHovSubtle: brightness(1.2) contrast(1.2);
 $colorSelectedBg: rgba($colorKey, 0.3);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
+// Background Image 
+$bodyBg: $colorBodyBg;
+
 // Object labels
 $objectLabelTypeIconOpacity: 0.7;
 $objectLabelNameColorFg: lighten($colorBodyFg, 10%);
@@ -219,7 +192,22 @@ $filterItemMissing: contrast(0.2);
 $opacityMissing: 0.5;
 $borderMissing: 1px dashed $colorAlert !important;
 
-// Edit
+@mixin browseFrameBorder() {
+  border: $browseFrameBorder;
+  border-radius: $controlCr;
+  &:after{
+    display: block;
+    content: "";
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    border-top: 3px solid blue;
+    border-right: 3px solid blue;
+  }
+}
+/************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
@@ -447,6 +435,7 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 // Gauges
 $colorGaugeBg: pullForward($colorBodyBg, 5%); // Gauge radial area background, meter background
 $colorGaugeValue: rgba(#fff, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeValueShadow: rgba(#fff, 0);
 $colorGaugeTextValue: #fff; // Radial gauge text value
 $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
 $colorGaugeRange: $colorBodyFg; // Range text color
@@ -555,3 +544,44 @@ $colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
 $colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
 $colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
 $scrollContainer: $colorBodyBg;
+
+@mixin discreteItem() {
+  background: rgba($colorBodyFg, 0.1);
+  border: none;
+  border-radius: $controlCr;
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid rgba(#fff, 0.1);
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: linear-gradient(pullForward($c, 5%), $c);
+  box-shadow: rgba(black, 0.5) 0 0.5px 2px;
+}
+
+@mixin telemetryView(){
+  border: 1px solid $colorBodyFg;
+  border-radius: $controlCr;
+}
+
+/**************************************************** OVERRIDES */
+.c-frame {
+  &:not(.no-frame) {
+    $bc: #666;
+    $bLR: 3px solid transparent;
+    $br: 20px;
+    background: none !important;
+    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/_constants-snow.scss

@@ -25,6 +25,7 @@
 $heroFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headerFont: $heroFont;
 $bodyFont: $heroFont;
+$numericFont: $heroFont;
 
 @mixin heroFont($size: 1em) {
   font-family: $heroFont;
@@ -41,27 +42,9 @@ $bodyFont: $heroFont;
   font-size: $size;
 }
 
-@mixin discreteItem() {
-  background: $colorDiscreteItemBg;
-  border: 1px solid $colorInteriorBorder;
-  border-radius: $controlCr;
-
-  &--current-match {
-    background: $colorDiscreteItemCurrentBg;
-  }
-
-  .c-input-inline:hover {
-    background: $colorBodyBg;
-  }
-}
-
-@mixin discreteItemInnerElem() {
-  border: 1px solid $colorBodyBg;
-  border-radius: $controlCr;
-}
-
-@mixin themedButton($c: $colorBtnBg) {
-  background: $c;
+@mixin numericFont($size: 1em){
+  font-family: $numericFont;
+  font-size: $size;
 }
 
 // Functions
@@ -113,6 +96,9 @@ $filterHovSubtle: hue-rotate(-8deg) brightness(0.5) contrast(1.2);
 $colorSelectedBg: pushBack($colorKey, 40%);
 $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
+// Background Image 
+$bodyBg: $colorBodyBg; 
+
 // Object labels
 $objectLabelTypeIconOpacity: 0.5;
 $objectLabelNameColorFg: darken($colorBodyFg, 10%);
@@ -201,8 +187,24 @@ $filterItemHoverFg: brightness(0.9);
 $filterItemMissing: contrast(0.2);
 $opacityMissing: 0.4;
 $borderMissing: 1px dashed $colorAlert !important;
+$browseFrameCornerColor: 0px solid rgb(0,150,215);
 
-// Edit
+@mixin browseFrameBorder() {
+  border: $browseFrameBorder;
+  border-radius: $controlCr;
+  &:after{
+    display: block;
+    content: "";
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    border-top: 3px solid blue;
+    border-right: 3px solid blue;
+  }
+}
+/************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
@@ -339,6 +341,8 @@ $colorTabFg: pullForward($colorTabBg, 60%);
 $colorTabCurrentBg: $colorBodyFg; //pullForward($colorTabBg, 10%);
 $colorTabCurrentFg: $colorBodyBg; //pullForward($colorTabFg, 10%);
 $colorTabsBaseline: $colorTabCurrentBg;
+$colorTabCurrentGlow: rgba(white, 0.0);
+
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
@@ -430,11 +434,13 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.4);
 // Gauges
 $colorGaugeBg: pullForward($colorBodyBg, 20%); // Gauge radial area background, meter background
 $colorGaugeValue: rgba(#000, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeValueShadow: rgba(#fff, 0);
 $colorGaugeTextValue: pullForward($colorBodyFg, 20%); // Radial gauge text value
 $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
 $colorGaugeRange: $colorBodyFg; // Range text color
 $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
+$colorGaugeNeedle: rgba(0, 95, 136);
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
 
@@ -538,3 +544,31 @@ $colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
 $colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
 $colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
 $scrollContainer: rgba(102, 102, 102, 0.1);
+
+@mixin discreteItem() {
+  background: $colorDiscreteItemBg;
+  border: 1px solid $colorInteriorBorder;
+  border-radius: $controlCr;
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+
+  .c-input-inline:hover {
+    background: $colorBodyBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid $colorBodyBg;
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: $c;
+}
+
+@mixin telemetryView(){
+  border: 1px solid $colorBodyFg;
+  border-radius: $controlCr;
+}

src/styles/_controls.scss

@@ -30,6 +30,7 @@
     box-shadow: $shdwMenuInner, $shdwMenu;
   }
   background: $colorMenuBg;
+  backdrop-filter: blur($formRowCtrlsH);
   color: $colorMenuFg;
   text-shadow: $shdwMenuText;
   padding: $interiorMarginSm;

src/styles/_diy-mission-control.scss

@@ -0,0 +1,6 @@
+.l-shell__head {
+    * + * {
+        display: none;
+    }
+}
+

src/styles/_global.scss

@@ -173,7 +173,9 @@ body {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
   @include bodyFont($fontBaseSize);
-  background-color: $colorBodyBg;
+  // background-color: $colorBodyBg;
+  background: $bodyBg;
+  background-size: cover;
   color: $colorBodyFg;
 }
 

src/styles/_legacy-plots.scss

@@ -365,6 +365,7 @@ mct-plot {
     left: $m;
     z-index: 9;
 
+
     &__reset {
       transition: right 100ms;
       top: $m;

src/styles/_mixins.scss

@@ -925,3 +925,8 @@
   $c: $colorPausedBg;
   border: 1px solid $c;
 }
+
+@mixin telemetryView(){
+  border: 1px solid $colorBodyFg;
+  border-radius: $controlCr;
+}

src/ui/components/object-frame.scss

@@ -1,6 +1,10 @@
 .c-so-view {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  &__container{
+    display: contents;
+  }
 
   /*************************** HEADER */
   &__header {
@@ -29,13 +33,16 @@
 
   &:not(.c-so-view--no-frame) {
     border: $browseFrameBorder;
-    padding: 0 $interiorMarginSm;
+    // @include browseFrameBorder;
 
     .is-editing & {
       background: rgba($colorBodyBg, 0.8);
     }
   }
 
+
+
+
   /*************************** FRAME CONTROLS */
   &__frame-controls {
     display: flex;

src/ui/inspector/inspector.scss

@@ -49,7 +49,7 @@
         overflow: hidden;
 
         &:after {
-          background-image: linear-gradient(90deg, transparent 0%, rgba($colorTabBg, 1) 70%);
+          //background-image: linear-gradient(90deg, transparent 0%, rgba($colorTabBg, 1) 70%);
           content: '';
           display: block;
           position: absolute;

src/ui/layout/layout.scss

@@ -30,6 +30,7 @@
   flex-flow: column nowrap;
   overflow: hidden;
 
+
   &__drawer {
     background: $drawerBg;
     display: flex;
@@ -289,7 +290,6 @@
     flex: 1 1 auto !important;
     height: 100%; // Chrome 73 overflow bug fix
     overflow: auto;
-
     > * + * {
       margin-top: $interiorMargin;
     }

src/ui/layout/pane.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;
+  
 
   &--horizontal,
   > .l-pane {