@opengeoweb/theme 2.0.1 → 2.1.0

package/theme.umd.js

@@ -0,0 +1,1175 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@material-ui/core'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@material-ui/core', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.core, global.React));
+})(this, (function (exports, core, React) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    var hex2rgba = function hex2rgba(hex, alpha) {
+      if (alpha === void 0) {
+        alpha = 1;
+      }
+
+      var _a = __read(hex.match(/\w\w/g).map(function (x) {
+        return parseInt(x, 16);
+      }), 3),
+          r = _a[0],
+          g = _a[1],
+          b = _a[2];
+
+      return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
+    };
+    var parseColors = function parseColors(colors) {
+      return Object.keys(colors).reduce(function (segmentList, key) {
+        var _a;
+
+        var segment = colors[key];
+        var parsedSegment = Object.keys(segment).reduce(function (list, name) {
+          var _a, _b;
+
+          var value = segment[name];
+          var color = value.fill || value.color; // converts hex to rgba value if color and opacity property has been set
+
+          if (value && color && (value.opacity || value.opacity === 0)) {
+            return __assign(__assign({}, list), (_a = {}, _a[name] = __assign(__assign({}, value), {
+              rgba: hex2rgba(color, value.opacity)
+            }), _a));
+          }
+
+          return __assign(__assign({}, list), (_b = {}, _b[name] = value, _b));
+        }, {});
+        return __assign(__assign({}, segmentList), (_a = {}, _a[key] = parsedSegment, _a));
+      }, {});
+    };
+    var createShadows = function createShadows(elevations) {
+      var SHADOW_LIST_SIZE = 25;
+      var elevationList = Object.keys(elevations).map(function (elevationName) {
+        return elevations[elevationName];
+      });
+      return Array(SHADOW_LIST_SIZE).fill('none').map(function (value, index) {
+        if (index > 0) {
+          var elevationIndex = index - 1;
+
+          if (elevationList[elevationIndex]) {
+            return elevationList[elevationIndex];
+          }
+        }
+
+        return value;
+      });
+    };
+    var BORDER_RADIUS = 3;
+    var createTheme = function createTheme(paletteType, geowebColors, shadows) {
+      return core.createMuiTheme({
+        palette: {
+          type: paletteType,
+          secondary: {
+            main: geowebColors.typographyAndIcons.iconLinkActive
+          },
+          background: {
+            paper: geowebColors.background.surfaceApp,
+            "default": geowebColors.background.surfaceBrowser
+          },
+          text: {
+            primary: geowebColors.typographyAndIcons.text
+          },
+          // geoweb color palette
+          geowebColors: geowebColors
+        },
+        shape: {
+          borderRadius: BORDER_RADIUS
+        },
+        typography: {
+          fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
+        },
+        shadows: shadows,
+        overrides: {
+          MuiCssBaseline: {
+            '@global': {
+              body: {
+                fontSmoothing: 'auto'
+              }
+            }
+          },
+          MuiMenuItem: {
+            root: {
+              fontSize: '0.875rem',
+              letterSpacing: '0.25px',
+              ':not(:last-child)&:after': {
+                content: '""',
+                position: 'absolute',
+                width: '100%',
+                height: 1,
+                background: geowebColors.greys.accessible,
+                bottom: 0,
+                left: 0,
+                opacity: 0.5
+              },
+              '&.Mui-selected': {
+                background: 'none',
+                boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
+              }
+            }
+          },
+          MuiRadio: {
+            root: {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          },
+          MuiPaper: {
+            outlined: {
+              borderColor: geowebColors.cards.cardContainerBorder
+            }
+          },
+          MuiCard: {
+            root: {
+              backgroundColor: geowebColors.cards.cardContainer
+            }
+          },
+          MuiSlider: {
+            root: {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          },
+          MuiTable: {
+            root: {
+              borderSpacing: '0 0.25rem',
+              borderCollapse: 'separate'
+            }
+          },
+          MuiTableRow: {
+            head: {
+              '&:hover': {
+                boxShadow: shadows[0]
+              }
+            },
+            root: {
+              transition: 'box-shadow 100ms ease-out',
+              boxShadow: shadows[0],
+              borderRadius: BORDER_RADIUS,
+              '&:hover': {
+                boxShadow: shadows[1]
+              },
+              position: 'relative'
+            }
+          },
+          MuiTableCell: {
+            head: {
+              borderBottom: 'none',
+              fontSize: '0.875rem',
+              fontWeight: 400
+            },
+            body: {
+              padding: 12,
+              fontWeight: 500,
+              backgroundColor: geowebColors.background.surface,
+              borderStyle: 'solid',
+              borderColor: 'transparent',
+              borderWidth: 1,
+              borderTopColor: geowebColors.cards.cardContainerBorder,
+              borderBottomColor: geowebColors.cards.cardContainerBorder,
+              '&:first-child': {
+                borderLeftColor: geowebColors.cards.cardContainerBorder,
+                borderRadius: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
+              },
+              '&:last-child': {
+                borderRightColor: geowebColors.cards.cardContainerBorder,
+                borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
+              }
+            }
+          },
+          MuiTabs: {
+            root: {
+              position: 'relative',
+              '&:after': {
+                content: '""',
+                position: 'absolute',
+                bottom: 0,
+                height: 1,
+                width: '100%',
+                zIndex: 0,
+                backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+              }
+            },
+            indicator: {
+              zIndex: 1,
+              backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          },
+          MuiTab: {
+            root: {
+              textTransform: 'initial',
+              '&.Mui-selected': {
+                color: geowebColors.typographyAndIcons.iconLinkActive
+              },
+              '&:hover': {
+                opacity: 1,
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                backgroundColor: geowebColors.tab.mouseOver.rgba
+              }
+            }
+          },
+          MuiListItem: {
+            root: {
+              color: geowebColors.typographyAndIcons.text
+            },
+            divider: {
+              borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+            }
+          },
+          MuiBackdrop: {
+            root: {
+              backgroundColor: geowebColors.backdrops.black.rgba
+            }
+          },
+          MuiTooltip: {
+            tooltip: {
+              backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
+              color: geowebColors.tooltips.tooltipText.color,
+              padding: '8px 12px',
+              fontSize: 16,
+              fontWeight: 400,
+              fontStretch: 'normal',
+              fontStyle: 'normal',
+              letterSpacing: 0.44,
+              lineHeight: 1.56
+            }
+          },
+          MuiLink: {
+            root: {
+              color: geowebColors.typographyAndIcons.textLinkActive
+            }
+          },
+          // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
+          MuiAlert: {
+            standardError: {
+              border: '1px solid #c00000',
+              borderRadius: '0px',
+              backgroundColor: '#fff0ea'
+            },
+            standardWarning: {
+              border: '1px solid #ffa800',
+              borderRadius: '0px',
+              backgroundColor: '#fff8eb'
+            },
+            standardInfo: {
+              border: '1px solid #0062e6',
+              borderRadius: '0px',
+              backgroundColor: '#eaf3ff'
+            },
+            standardSuccess: {
+              border: '1px solid #72bb23',
+              borderRadius: '0px',
+              backgroundColor: '#fcffeb'
+            },
+            action: {
+              color: '#0075a9'
+            },
+            message: {
+              fontSize: '14px',
+              lineHeight: 1.43,
+              letterSpacing: '0.25px',
+              color: '#051039'
+            }
+          }
+        }
+      });
+    };
+
+    /* *
+     * 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.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var colors$1 = {
+      background: {
+        surface: '#FFFFFF',
+        surfaceApp: '#F5F5F5',
+        surfaceBrowser: '#CFCFCF'
+      },
+      brand: {
+        brand: '#00547d'
+      },
+      buttons: {
+        primary: {
+          fill: '#186DFF'
+        },
+        primaryMouseover: {
+          fill: '#1047B0'
+        },
+        primaryActive: {
+          fill: '#186DFF'
+        },
+        flatMouseover: {
+          fill: '#E3E4E7'
+        },
+        focusDefault: {
+          outline: 'solid 2px #419cfe'
+        },
+        disabled: {
+          fill: '#E8E5E5'
+        },
+        surfaceIconDefault: {
+          fill: '#F5F5F5'
+        }
+      },
+      typographyAndIcons: {
+        text: '#051039',
+        icon: '#051039',
+        buttonIcon: '#FFFFFF',
+        iconLinkActive: '#186DFF',
+        iconLinkDisabled: '#CCCCCC',
+        textLinkActive: '#186DFF',
+        buttonIconTertiaryFlat: '#575F7A'
+      },
+      textInputField: {
+        "default": {
+          fill: '#051039',
+          opacity: 0.07
+        },
+        active: {
+          fill: '#051039',
+          opacity: 0.02
+        },
+        disabled: {
+          fill: '#000000',
+          opacity: 0
+        }
+      },
+      tab: {
+        mouseOver: {
+          fill: '#051039',
+          opacity: 0.07
+        }
+      },
+      greys: {
+        accessible: '#767676'
+      },
+      cards: {
+        cardContainer: '#FFFFFF',
+        cardContainerBorder: '#EEEEEE'
+      },
+      backdrops: {
+        black: {
+          fill: '#000000',
+          opacity: 0.5
+        },
+        white: {
+          fill: '#FFFFFF',
+          opacity: 0.24
+        }
+      },
+      timeSlider: {
+        // player
+        playerNeedleTimeTop: {
+          fill: '#E3004F',
+          opacity: 100
+        },
+        playerNeedleTime: {
+          fill: '#FFD523',
+          opacity: 0.75
+        },
+        playerNeedlePlayerTop: {
+          fill: '#051039',
+          opacity: 100
+        },
+        playerNeedlePlayer: {
+          fill: '#67F0FF',
+          opacity: 0.75
+        },
+        playerRailObservation: {
+          fill: '#0876B6',
+          opacity: 100
+        },
+        playerRailSelection: {
+          fill: '#C6D111',
+          opacity: 0.5
+        },
+        playerRailForecastData: {
+          fill: '#FD64FF',
+          opacity: 0.6
+        },
+        playerRailForecastNoData: {
+          fill: '#051039',
+          opacity: 0.67
+        },
+        playerTimeMarkers: {
+          fill: '#2C2C2C'
+        },
+        playerTimeText: {
+          color: '#FFFFFF',
+          fontFamily: 'Roboto',
+          fontSize: 14
+        },
+        // timeline
+        timelineIndicator: {
+          fill: '#767676'
+        },
+        timelineText: {
+          fontSize: 14,
+          color: '#051039',
+          fontFamily: 'Roboto'
+        },
+        timelineTimeScale: {
+          fill: '#979797'
+        },
+        timelineNightTime: {
+          fill: '#070808',
+          opacity: 0.1
+        },
+        timelineTimelineSurface: {
+          fill: '#FFFFFF'
+        },
+        timelineMonthChangeDash: {
+          fill: '#767676',
+          opacity: 0.5
+        },
+        // time scale
+        timeScaleText: {
+          fontSize: 12
+        },
+        timeScalePointer: {
+          fill: '#F8F9F9'
+        },
+        timeScaleHorizontalScale: {
+          fill: '#070808',
+          opacity: 0.2
+        },
+        timeScaleTimeIndicators: {
+          fill: '#767676'
+        },
+        timeScaleTimeIndicatorsActive: {
+          fill: '#051039'
+        },
+        timeScaleShadowButtonScale: {
+          filter: 'drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.24)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.40))'
+        }
+      },
+      customSlider: {
+        rail: '#488BFD',
+        railDisabled: '#CCCCCC',
+        track: '#186DFF',
+        trackDisabled: '#CCCCCC',
+        thumb: '#F8F9F9',
+        thumbDisabled: '#CCCCCC',
+        mark: '#FFFFFF',
+        markDisabled: '#FFFFFF',
+        switchTrack: '#72BB23',
+        switchTrackDisabled: '#767676'
+      },
+      syncGroups: {
+        drawerOpen: {
+          fill: '#E8E5E5'
+        }
+      },
+      layerManager: {
+        tableRowDefaultIcon: {
+          fill: '#051039',
+          opacity: 0.67
+        },
+        tableRowDefaultText: {
+          color: '#051039',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDefaultCardContainer: {
+          fill: '#FFFFFF',
+          border: '1px solid #EEEEEE'
+        },
+        tableRowMouseover: {
+          fill: '#051039',
+          opacity: 0.07
+        },
+        tableRowDisabledIcon: {
+          fill: '#767676'
+        },
+        tableRowDisabledText: {
+          color: '#767676',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDisabledCardContainer: {
+          fill: '#F5F5F5',
+          border: '1px solid #EEEEEE'
+        }
+      },
+      tooltips: {
+        tooltipContainer: {
+          fill: '#232323',
+          opacity: 1
+        },
+        tooltipText: {
+          color: '#FFFFFF'
+        }
+      },
+      captions: {
+        captionStatus: {
+          color: '#051039',
+          opacity: 0.67
+        },
+        captionInformation: {
+          color: '#1100FF',
+          opacity: 1
+        },
+        captionError: {
+          color: '#C00000',
+          opacity: 1
+        },
+        captionDisabled: {
+          color: '#767676',
+          opacity: 1
+        }
+      }
+    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
+
+    var elevations$1 = {
+      elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
+      elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+      elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
+      elevation_04: '0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+      elevation_06: '0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 6px 10px 0 rgba(0, 0, 0, 0.14)',
+      elevation_08: '0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.14)',
+      elevation_09: '0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 9px 12px 1px rgba(0, 0, 0, 0.14)',
+      elevation_12: '0 7px 8px 0 rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14)',
+      elevation_16: '0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)',
+      elevation_24: '0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14)'
+    };
+    var lightTheme = createTheme('light', parseColors(colors$1), createShadows(elevations$1));
+
+    var geowebColors = __assign({}, colors$1);
+
+    var GWTheme = core.createMuiTheme({
+      palette: {
+        secondary: {
+          main: '#0075a9'
+        },
+        action: {
+          active: '#ffa800'
+        },
+        text: {
+          disabled: '#051039'
+        },
+        geowebColors: parseColors(geowebColors)
+      },
+      shape: {
+        borderRadius: 3
+      },
+      typography: {
+        h6: {
+          fontSize: '16px'
+        },
+        subtitle1: {
+          fontSize: '16px',
+          fontWeight: 500,
+          lineHeight: 1.5,
+          letterSpacing: '0.15px',
+          opacity: 0.87,
+          color: '#051039'
+        },
+        subtitle2: {
+          fontSize: '14px',
+          fontWeight: 500,
+          lineHeight: 1.71,
+          letterSpacing: '0.1px',
+          opacity: 0.87,
+          color: '#051039'
+        },
+        body1: {
+          fontSize: '16px',
+          lineHeight: 1.56,
+          letterSpacing: '0.44px',
+          color: '#051039'
+        },
+        body2: {
+          fontSize: '14px',
+          lineHeight: 1.43,
+          letterSpacing: '0.25px',
+          color: '#051039'
+        },
+        overline: {
+          textTransform: 'none',
+          fontSize: '12px',
+          lineHeight: 1.43,
+          letterSpacing: '0.25px',
+          color: '#051039',
+          opacity: 0.7
+        },
+        caption: {
+          fontSize: '12px',
+          lineHeight: 1.33,
+          letterSpacing: '0.4px',
+          color: '#051039',
+          opacity: 0.7
+        },
+        button: {
+          fontWeight: 500,
+          fontSize: '14px',
+          color: '0075a9'
+        }
+      },
+      overrides: {
+        MuiTooltip: {
+          tooltip: {
+            borderRadius: '2px',
+            fontSize: '16px',
+            fontWeight: 'normal',
+            padding: '10px',
+            backgroundColor: '#232323'
+          }
+        },
+        MuiIconButton: {
+          root: {
+            color: '#0075a9'
+          }
+        },
+        MuiCheckbox: {
+          root: {
+            color: '#0075a9'
+          }
+        },
+        MuiSelect: {
+          icon: {
+            color: '#0075a9'
+          },
+          select: {
+            '&:focus': {
+              backgroundColor: 'rgba(0, 117, 169, 0.05)'
+            }
+          }
+        },
+        MuiAlert: {
+          standardError: {
+            border: '1px solid #c00000',
+            borderRadius: '0px',
+            backgroundColor: '#fff0ea'
+          },
+          standardWarning: {
+            border: '1px solid #ffa800',
+            borderRadius: '0px',
+            backgroundColor: '#fff8eb'
+          },
+          standardInfo: {
+            border: '1px solid #0062e6',
+            borderRadius: '0px',
+            backgroundColor: '#eaf3ff'
+          },
+          standardSuccess: {
+            border: '1px solid #72bb23',
+            borderRadius: '0px',
+            backgroundColor: '#fcffeb'
+          },
+          action: {
+            color: '#0075a9'
+          },
+          message: {
+            fontSize: '14px',
+            lineHeight: 1.43,
+            letterSpacing: '0.25px',
+            color: '#051039'
+          }
+        },
+        MuiTabs: {
+          root: {
+            backgroundColor: '#ffffff',
+            minHeight: '30px'
+          },
+          scrollButtons: {
+            width: '20px'
+          }
+        },
+        MuiTab: {
+          root: {
+            minHeight: '30px',
+            textTransform: 'none',
+            minWidth: '76px',
+            '@media (min-width: 600px)': {
+              minWidth: '76px'
+            }
+          },
+          labelIcon: {
+            minHeight: '30px'
+          }
+        },
+        MuiListItem: {
+          root: {
+            '&$selected': {
+              backgroundColor: 'rgba(0, 117, 169, 0.15)',
+              borderLeft: '4px solid #0075a9',
+              '&:hover': {
+                backgroundColor: 'rgba(0, 117, 169, 0.10)'
+              }
+            }
+          },
+          button: {
+            '&:hover': {
+              backgroundColor: 'rgba(0, 117, 169, 0.15)'
+            }
+          }
+        },
+        MuiFormLabel: {
+          root: {
+            color: 'rgba(5, 16, 57, 0.7)',
+            '&$focused': {
+              color: '#0075a9'
+            }
+          }
+        },
+        MuiOutlinedInput: {
+          root: {
+            '&$focused $notchedOutline': {
+              borderColor: '#0075a9'
+            }
+          }
+        },
+        MuiFilledInput: {
+          root: {
+            backgroundColor: 'rgba(0, 117, 169, 0.05)',
+            color: '#051039',
+            '&$disabled': {
+              backgroundColor: 'transparent'
+            }
+          },
+          underline: {
+            '&$disabled:before': {
+              borderBottomStyle: 'none'
+            }
+          }
+        },
+        MuiCardContent: {
+          root: {
+            '&:last-child': {
+              paddingBottom: 0
+            }
+          }
+        }
+      }
+    });
+
+    /* *
+     * 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.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var colors = {
+      background: {
+        surface: '#303030',
+        surfaceApp: '#2B2B2B',
+        surfaceBrowser: '#181818'
+      },
+      brand: {
+        brand: '#404040'
+      },
+      buttons: {
+        primary: {
+          fill: '#186DFF'
+        },
+        primaryMouseover: {
+          fill: '#1047B0'
+        },
+        primaryActive: {
+          fill: '#186DFF'
+        },
+        flatMouseover: {
+          fill: '#242424'
+        },
+        focusDefault: {
+          outline: 'solid 2px #419cfe'
+        },
+        disabled: {
+          fill: '#303030'
+        },
+        surfaceIconDefault: {
+          fill: '#2B2B2B'
+        }
+      },
+      typographyAndIcons: {
+        text: '#FFFFFF',
+        icon: '#FFFFFF',
+        buttonIcon: '#FFFFFF',
+        iconLinkActive: '#488BFD',
+        iconLinkDisabled: '#5E5E5E',
+        textLinkActive: '#488BFD',
+        buttonIconTertiaryFlat: '#C5C5C5'
+      },
+      textInputField: {
+        "default": {
+          fill: '#000000',
+          opacity: 0.15
+        },
+        active: {
+          fill: '#909090',
+          opacity: 0.2
+        },
+        disabled: {
+          color: '#000000',
+          opacity: 0
+        }
+      },
+      tab: {
+        mouseOver: {
+          fill: '#000000',
+          opacity: 0.17
+        }
+      },
+      greys: {
+        accessible: '#A2A2A2'
+      },
+      cards: {
+        cardContainer: '#303030',
+        cardContainerBorder: '#404040'
+      },
+      backdrops: {
+        black: {
+          fill: '#000000',
+          opacity: 0.5
+        },
+        white: {
+          fill: '#FFFFFF',
+          opacity: 0.24
+        }
+      },
+      timeSlider: {
+        // player
+        playerNeedleTimeTop: {
+          fill: '#E3004F',
+          opacity: 100
+        },
+        playerNeedleTime: {
+          fill: '#FFD523',
+          opacity: 0.75
+        },
+        playerNeedlePlayerTop: {
+          fill: '#051039',
+          opacity: 100
+        },
+        playerNeedlePlayer: {
+          fill: '#67F0FF',
+          opacity: 0.75
+        },
+        playerRailObservation: {
+          fill: '#0876B6',
+          opacity: 100
+        },
+        playerRailSelection: {
+          fill: '#C6D111',
+          opacity: 0.5
+        },
+        playerRailForecastData: {
+          fill: '#FD64FF',
+          opacity: 0.6
+        },
+        playerRailForecastNoData: {
+          fill: '#051039',
+          opacity: 0.67
+        },
+        playerTimeMarkers: {
+          fill: '#2C2C2C'
+        },
+        playerTimeText: {
+          color: '#FFFFFF',
+          fontFamily: 'Roboto',
+          fontSize: 14
+        },
+        // timeline
+        timelineIndicator: {
+          fill: '#A2A2A2'
+        },
+        timelineText: {
+          fontSize: 14,
+          color: '#FFFFFF',
+          fontFamily: 'Roboto'
+        },
+        timelineTimeScale: {
+          fill: '#979797'
+        },
+        timelineNightTime: {
+          fill: '#070808',
+          opacity: 0.3
+        },
+        timelineTimelineSurface: {
+          fill: '#303030'
+        },
+        timelineMonthChangeDash: {
+          fill: '#A2A2A2',
+          opacity: 0.5
+        },
+        // time scale
+        timeScaleText: {
+          fontSize: 12
+        },
+        timeScalePointer: {
+          fill: '#F8F9F9'
+        },
+        timeScaleHorizontalScale: {
+          fill: '#000000',
+          opacity: 0.8
+        },
+        timeScaleTimeIndicators: {
+          fill: '#A2A2A2'
+        },
+        timeScaleTimeIndicatorsActive: {
+          fill: '#FFFFFF'
+        },
+        timeScaleShadowButtonScale: {
+          filter: 'drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.24)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.40))'
+        }
+      },
+      customSlider: {
+        rail: '#488BFD',
+        railDisabled: '#5E5E5E',
+        track: '#186DFF',
+        trackDisabled: '#5E5E5E',
+        thumb: '#F8F9F9',
+        thumbDisabled: '#5E5E5E',
+        mark: '#FFFFFF',
+        markDisabled: '#303030',
+        switchTrack: '#72BB23',
+        switchTrackDisabled: '#E8E5E5'
+      },
+      syncGroups: {
+        drawerOpen: {
+          fill: '#232323'
+        }
+      },
+      layerManager: {
+        tableRowDefaultIcon: {
+          fill: '#C5C5C5',
+          opacity: 1
+        },
+        tableRowDefaultText: {
+          color: '#FFFFFF',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDefaultCardContainer: {
+          fill: '#303030',
+          border: '1px solid #404040'
+        },
+        tableRowMouseover: {
+          fill: '#000000',
+          opacity: 0.15
+        },
+        tableRowDisabledIcon: {
+          fill: '#A2A2A2'
+        },
+        tableRowDisabledText: {
+          color: '#909090',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDisabledCardContainer: {
+          fill: '#2B2B2B',
+          border: '1px solid #404040'
+        }
+      },
+      tooltips: {
+        tooltipContainer: {
+          fill: '#232323',
+          opacity: 1
+        },
+        tooltipText: {
+          color: '#FFFFFF'
+        }
+      },
+      captions: {
+        captionStatus: {
+          color: '#FFFFFF',
+          opacity: 0.7
+        },
+        captionInformation: {
+          color: '#9EC2FF',
+          opacity: 1
+        },
+        captionError: {
+          color: '#FF8F8F',
+          opacity: 1
+        },
+        captionDisabled: {
+          color: '#909090',
+          opacity: 1
+        }
+      }
+    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
+
+    var elevations = {
+      elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
+      elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+      elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
+      elevation_04: '0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+      elevation_06: '0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 6px 10px 0 rgba(0, 0, 0, 0.14)',
+      elevation_08: '0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.14)',
+      elevation_09: '0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 9px 12px 1px rgba(0, 0, 0, 0.14)',
+      elevation_12: '0 7px 8px 0 rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14)',
+      elevation_16: '0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)',
+      elevation_24: '0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14)'
+    };
+    var darkTheme = createTheme('dark', parseColors(colors), createShadows(elevations));
+
+    var ThemeContext = /*#__PURE__*/React__namespace.createContext({
+      toggleTheme: null,
+      isDark: null
+    });
+    var ThemeProvider = function ThemeProvider(_a) {
+      var children = _a.children,
+          _b = _a.theme,
+          defaultTheme = _b === void 0 ? lightTheme : _b,
+          _c = _a.disableCssBaseline,
+          disableCssBaseline = _c === void 0 ? false : _c;
+
+      var _d = __read(React__namespace.useState(false), 2),
+          isDark = _d[0],
+          setDark = _d[1];
+
+      var currentTheme = React__namespace.useMemo(function () {
+        return isDark ? darkTheme : defaultTheme;
+      }, [isDark, defaultTheme]);
+
+      var toggleTheme = function toggleTheme() {
+        return setDark(!isDark);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, {
+        value: {
+          toggleTheme: toggleTheme,
+          isDark: isDark
+        }
+      }, /*#__PURE__*/React__namespace.createElement(core.ThemeProvider, {
+        theme: currentTheme
+      }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(core.CssBaseline, null), children));
+    };
+    var useThemeContext = function useThemeContext() {
+      return React__namespace.useContext(ThemeContext);
+    }; // Wrapper for storybook stories. Will include later an additional wrapper after upgrade to MUI5
+
+    var ThemeWrapper = function ThemeWrapper(_a) {
+      var children = _a.children,
+          _b = _a.theme,
+          theme = _b === void 0 ? lightTheme : _b,
+          _c = _a.disableCssBaseline,
+          disableCssBaseline = _c === void 0 ? false : _c;
+      return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
+        theme: theme,
+        disableCssBaseline: disableCssBaseline
+      }, children);
+    }; // Wrapper for storybook stories with GWTheme. Will be deprecated
+
+    var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
+      var children = _a.children,
+          props = __rest(_a, ["children"]);
+
+      return /*#__PURE__*/React__namespace.createElement(ThemeWrapper, __assign({
+        theme: GWTheme,
+        disableCssBaseline: true
+      }, props), children);
+    };
+
+    exports.GWTheme = GWTheme;
+    exports.ThemeContext = ThemeContext;
+    exports.ThemeProvider = ThemeProvider;
+    exports.ThemeWrapper = ThemeWrapper;
+    exports.ThemeWrapperOldTheme = ThemeWrapperOldTheme;
+    exports.darkTheme = darkTheme;
+    exports.lightTheme = lightTheme;
+    exports.useThemeContext = useThemeContext;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));