[Borealis] Enable Borealis theme and dark mode (#1323)

* [Borealis] Enable Borealis theme

* Adapt maplibre controls to EUI theme and mode

* Added class for fullscreen mode

(cherry picked from commit cf9c3d7)

.buildkite/scripts/build.sh

@@ -11,6 +11,14 @@ echo "--- :yarn:  Installing dependencies"
 yarn install
 
 echo "--- :gear: Building"
+
+export EUI_THEME="amsterdam"
+
+if [[ "${BUILDKITE_BRANCH}" == "v9.0" ]]; then
+  export EUI_THEME="borealis"
+  echo "Switching to 🌠 Borealis 🌠 theme"
+fi
+
 if [[ -n ${BUILDKITE+x} ]] ; then
   yarn build
 else

package.json

@@ -50,7 +50,8 @@
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "^98.0.0",
+    "@elastic/eui": "98.1.0-borealis.0",
+    "@elastic/eui-theme-borealis": "^0.0.4",
     "@emotion/css": "^11.10.6",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@turf/bbox": "7.1.0",

public/js/components/app.js

@@ -43,6 +43,12 @@ import { LayerDetails } from './layer_details';
 import { Map } from './map';
 import { TableOfContents } from './table_of_contents';
 
+import { eui } from './theme';
+
+const colorMode = window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ? 'dark' :  'light';
+
+document.body.setAttribute('data-eui-theme', eui.name);
+document.body.setAttribute('data-eui-mode', colorMode);
 
 // One or more icons are passed in as an object of iconKey (string): IconComponent
 appendIconComponentCache({
@@ -183,8 +189,9 @@ export class App extends Component {
       return;
     }
 
+    const baseLayerStyle = colorMode === 'light' ? 'road_map_desaturated' : 'dark_map';
     const baseLayer = this.props.layers.tms.find((service) => {
-      return service.getId() === 'road_map_desaturated';
+      return service.getId() === baseLayerStyle;
     });
     this._toc.selectItem(`tms/${baseLayer.getId()}`, baseLayer);
 
@@ -331,9 +338,9 @@ export class App extends Component {
     const logoLink =
       new URL(fileApUrl).hostname == window.location.hostname ? '../' : '/';
 
-
+      
     return (
-      <EuiProvider colorMode="light">
+      <EuiProvider theme={eui.theme} colorMode={colorMode}>
         <EuiHeader>
           <EuiHeaderSectionItem border="right">
             <EuiToolTip delay="long" 

public/js/components/theme.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiThemeAmsterdam } from '@elastic/eui';
+import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
+
+const DEFAULT_EUI_THEME = 'amsterdam';
+
+const themes = {
+  amsterdam: EuiThemeAmsterdam,
+  borealis: EuiThemeBorealis,
+};
+
+// eslint-disable-next-line no-undef
+const EUI_THEME = process.env?.EUI_THEME || DEFAULT_EUI_THEME;
+
+export const eui = {
+  name: EUI_THEME,
+  theme: themes[EUI_THEME],
+};

public/main.css

@@ -72,4 +72,18 @@ dl.popup_feature_list dd {
 
 dl.popup_feature_list dd:not(:last-child){
     margin-bottom: 5px;
-}
+}
+
+/* dark mode tweaks */
+body[data-eui-mode="dark"] .maplibregl-ctrl-fullscreen,
+body[data-eui-mode="dark"] .maplibregl-ctrl-attrib,
+body[data-eui-mode="dark"] .maplibregl-ctrl-shrink
+{
+    background-color: #63635c;
+}
+
+body[data-eui-mode="dark"][data-eui-theme="borealis"] .maplibregl-ctrl-fullscreen,
+body[data-eui-mode="dark"][data-eui-theme="borealis"] .maplibregl-ctrl-attrib,
+body[data-eui-mode="dark"][data-eui-theme="borealis"] .maplibregl-ctrl-shrink {
+    background-color: #2a57a0;
+}

webpack.common.js

@@ -41,7 +41,7 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        exclude: /node_modules/,
+        exclude: /node_modules|theme\.js/,
         use: {
           loader: 'babel-loader'
         }
@@ -97,6 +97,9 @@ module.exports = {
       template: 'public/index.hbs',
       hash: true,
     }),
+    new webpack.EnvironmentPlugin({
+      EUI_THEME: 'amsterdam',
+    }),
   ],
   stats: {
     colors: true

yarn.lock

@@ -1536,11 +1536,25 @@
     semver "^7.6.2"
     topojson-client "^3.1.0"
 
-"@elastic/eui@^98.0.0":
-  version "98.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-98.1.0.tgz#1538dc8c23590805fadf6b986a14ecafc3a1108e"
-  integrity sha512-zBfZpiDMN4kdVvo1icD0qzJ7FehDoLJcgt/2ulMqNTVXLnhD6sFWGiuDwHDEW2VqEUslUXVwfQfsWuLowqNWWg==
+"@elastic/eui-theme-borealis@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-0.0.4.tgz#5a1e8d5cd02f25634928106c9845389f6b8568bb"
+  integrity sha512-6RV49J0saf2zjcf1uXYpoU9AgRlWs+ot+GszZz6iCBavPl7MdMlR13x5WdT7ewtx7cju9taEWhS1YDVfGVCFSA==
+
+"@elastic/eui-theme-common@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-0.0.4.tgz#83db50a46251c75e6a3c07df0dee3eedb5d49e17"
+  integrity sha512-IDQ15ytDwlB5OO2UlPKccUR37QnRp1xZE8zPy8LoCPQAX8hgDYjikk8gjA2eixCuTm9+t6Suz+Xuha69VcMMZg==
+  dependencies:
+    "@types/lodash" "^4.14.202"
+    lodash "^4.17.21"
+
+"@elastic/eui@98.1.0-borealis.0":
+  version "98.1.0-borealis.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-98.1.0-borealis.0.tgz#b0db1416d81863816939ae4dc067cc089a9f9789"
+  integrity sha512-DMu+H0j5WrByhJr3Xc3strmsIiwKHLYCOKsTWOqv9CS8tcRFaYa2zHhwhgVhRuBE7XdX++uCsV4vVGrd8qJMVw==
   dependencies:
+    "@elastic/eui-theme-common" "0.0.4"
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"
     "@types/numeral" "^2.0.5"