[Darkmatter] Create new darkmatter theme (#7682)

* initial theme plugin setup, changes to layout frames

* update visual tests

* Changes to gauge, layout borders, and background

* Make background image a DIY theme variable. Fixes made to gauges. Deleted custom font.

* More changes to overall background colors. Added glass layer effect to menus

* changes to menu

* Fix to make theme easy to run

* Fix tab colors and add glass background to menus

* make highlightd corners longer

* Initial changes to font styles

* Add temporary numeric font style. Test numeric font in gauges.

* Initial changes to alphanumerics in layouts

* Updated variables

* update plugin.js file

* Fix highlighted corners on frames such that it uses outermost frame

* renaming theme plugin and rename branch

* fix button colors to be more readable

* change background image

* Fix bad merges from other theme files. Fix gauge and alphanumerics such that they dont have darkmatter borders

* more fixes

* Fix where mixin is used such that when an object's frame is hidden, highlgihts disappear

* remove blur from meter gauges

* Add comment about this theme being in beta mode

* Delete draft .scss file that is no longer needed

* Fix major accessibility issues

* Fix PR review comments

* ✨ fix: Correct import file name for DarkMatter theme.

* Fix other theme code that was failing e2e tests

* Revert index.html

* Fix linting error

* Fix for failing percy test regarding padding

* Fix for failing percy test regarding padding part 2

* Fix for failing percy test regarding padding part 3

* Remove mixin that may be causing percy issue

* Another fix to resolve percy issue

* Add back some code that was deleted during debugging, and create new variables for the object padding

* Fix gradient clipping in inspector

* Restructure all constants-.scss files

* Change bg image to be square and NASA official picture

* Final fixes to darkmatter variable layouts

* Address PR comments

* Change darkmatter to darkmatterTheme

---------

Co-authored-by: John Hill <[email protected]>
Co-authored-by: Jesse Mazzella <[email protected]>

.cspell.json

@@ -497,7 +497,8 @@
     "checksnapshots",
     "specced",
     "composables",
-    "countup"
+    "countup",
+    "darkmatter"
   ],
   "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US", "en-gb", "misc"],
   "ignorePaths": [

.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: 'darkmatter-theme', //Runs the same visual tests but with darkmatter-theme
+      use: {
+        browserName: 'chromium',
+        theme: 'darkmatter-theme'
+      }
     }
   ],
   reporter: [

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: $gaugeMeterValueShadow 0px 2px 10px 1px;
+    //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.DarkmatterTheme = DarkMatter;
 plugins.Espresso = Espresso;
 plugins.Snow = Snow;
 plugins.Condition = ConditionPlugin;

src/plugins/themes/darkmatter-theme.scss

@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 '../../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,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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.
+ *****************************************************************************/
+// Note: This darkmatter theme is in Beta and is not yet ready for prime time. It needs some more tweaking.
+
+import { installTheme } from './installTheme.js';
+
+export default function plugin() {
+  return function install(openmct) {
+    installTheme(openmct, 'darkmatter');
+  };
+}

src/plugins/themes/espresso-theme.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 '../../styles/vendor/normalize-min';
 @import '../../styles/constants';
 @import '../../styles/constants-mobile.scss';

src/plugins/themes/espresso.js

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 { installTheme } from './installTheme.js';
 
 export default function plugin() {

src/plugins/themes/snow-theme.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 '../../styles/vendor/normalize-min';
 @import '../../styles/constants';
 @import '../../styles/constants-mobile.scss';

src/plugins/themes/snow.js

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, 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 { installTheme } from './installTheme.js';
 
 export default function plugin() {