@opengeoweb/theme 2.0.0 → 2.1.2

package/theme.esm.js

@@ -0,0 +1,1247 @@
+import { createMuiTheme, ThemeProvider as ThemeProvider$1, CssBaseline } from '@material-ui/core';
+import * as React from 'react';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var hex2rgba = function hex2rgba(hex) {
+  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+  var _hex$match$map = hex.match(/\w\w/g).map(function (x) {
+    return parseInt(x, 16);
+  }),
+      _hex$match$map2 = _slicedToArray(_hex$match$map, 3),
+      r = _hex$match$map2[0],
+      g = _hex$match$map2[1],
+      b = _hex$match$map2[2];
+
+  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(alpha, ")");
+};
+var parseColors = function parseColors(colors) {
+  return Object.keys(colors).reduce(function (segmentList, key) {
+    var segment = colors[key];
+    var parsedSegment = Object.keys(segment).reduce(function (list, name) {
+      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 Object.assign(Object.assign({}, list), _defineProperty({}, name, Object.assign(Object.assign({}, value), {
+          rgba: hex2rgba(color, value.opacity)
+        })));
+      }
+
+      return Object.assign(Object.assign({}, list), _defineProperty({}, name, value));
+    }, {});
+    return Object.assign(Object.assign({}, segmentList), _defineProperty({}, key, parsedSegment));
+  }, {});
+};
+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 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 ".concat(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: "".concat(BORDER_RADIUS, "px 0px 0px ").concat(BORDER_RADIUS, "px")
+          },
+          '&:last-child': {
+            borderRightColor: geowebColors.cards.cardContainerBorder,
+            borderRadius: "0px ".concat(BORDER_RADIUS, "px ").concat(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'
+        }
+      },
+      MuiFilledInput: {
+        root: {
+          backgroundColor: geowebColors.textInputField["default"].rgba,
+          '&.Mui-focused': {
+            backgroundColor: geowebColors.textInputField.active.rgba
+          },
+          '&.Mui-disabled': {
+            backgroundColor: geowebColors.textInputField.disabled.rgba
+          }
+        },
+        underline: {
+          '&:after': {
+            borderBottom: 'transparent'
+          },
+          '&.Mui-disabled:before': {
+            borderBottomStyle: 'solid'
+          }
+        }
+      },
+      MuiFormLabel: {
+        root: {
+          color: geowebColors.captions.captionStatus.color,
+          opacity: geowebColors.captions.captionStatus.opacity,
+          '&.Mui-focused': {
+            color: geowebColors.captions.captionInformation.color,
+            opacity: geowebColors.captions.captionInformation.opacity
+          },
+          '&.Mui-error': {
+            color: geowebColors.captions.captionError.color,
+            opacity: geowebColors.captions.captionError.opacity
+          },
+          '&.Mui-disabled': {
+            color: geowebColors.captions.captionDisabled.color,
+            opacity: geowebColors.captions.captionDisabled.opacity
+          }
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          color: geowebColors.captions.captionStatus.color,
+          opacity: geowebColors.captions.captionStatus.opacity,
+          '&.Mui-error': {
+            color: geowebColors.captions.captionError.color,
+            opacity: geowebColors.captions.captionError.opacity
+          },
+          '&.Mui-disabled': {
+            color: geowebColors.captions.captionDisabled.color,
+            opacity: geowebColors.captions.captionDisabled.opacity
+          }
+        }
+      }
+    }
+  });
+};
+
+/* *
+ * 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));
+
+/* *
+ * 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 geowebColors = Object.assign({}, colors$1);
+var GWTheme = 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
+        }
+      }
+    }
+  }
+});
+
+/*! *****************************************************************************
+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.
+***************************************************************************** */
+
+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;
+}
+
+/* *
+ * 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.createContext({
+  toggleTheme: null,
+  isDark: null
+});
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+      _ref$theme = _ref.theme,
+      defaultTheme = _ref$theme === void 0 ? lightTheme : _ref$theme,
+      _ref$disableCssBaseli = _ref.disableCssBaseline,
+      disableCssBaseline = _ref$disableCssBaseli === void 0 ? false : _ref$disableCssBaseli;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDark = _React$useState2[0],
+      setDark = _React$useState2[1];
+
+  var currentTheme = React.useMemo(function () {
+    return isDark ? darkTheme : defaultTheme;
+  }, [isDark, defaultTheme]);
+
+  var toggleTheme = function toggleTheme() {
+    return setDark(!isDark);
+  };
+
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      toggleTheme: toggleTheme,
+      isDark: isDark
+    }
+  }, /*#__PURE__*/React.createElement(ThemeProvider$1, {
+    theme: currentTheme
+  }, !disableCssBaseline && /*#__PURE__*/React.createElement(CssBaseline, null), children));
+};
+var useThemeContext = function useThemeContext() {
+  return React.useContext(ThemeContext);
+}; // Wrapper for storybook stories. Will include later an additional wrapper after upgrade to MUI5
+
+var ThemeWrapper = function ThemeWrapper(_ref2) {
+  var children = _ref2.children,
+      _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
+      _ref2$disableCssBasel = _ref2.disableCssBaseline,
+      disableCssBaseline = _ref2$disableCssBasel === void 0 ? false : _ref2$disableCssBasel;
+  return /*#__PURE__*/React.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.createElement(ThemeWrapper, Object.assign({
+    theme: GWTheme,
+    disableCssBaseline: true
+  }, props), children);
+};
+
+export { GWTheme, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, darkTheme, lightTheme, useThemeContext };