@opengeoweb/theme 4.17.0 → 4.19.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.React, global.material));
-})(this, (function (exports, React, material) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/x-date-pickers')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/x-date-pickers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.React, global.material, global.xDatePickers));
+})(this, (function (exports, React, material, xDatePickers) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -848,31 +848,6 @@
         Both: Both
     });
 
-    /* *
-     * 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)
-     * */
-    exports.ThemeTypes = void 0;
-
-    (function (ThemeTypes) {
-      ThemeTypes["DARK_THEME"] = "darkTheme";
-      ThemeTypes["LIGHT_THEME"] = "lightTheme";
-    })(exports.ThemeTypes || (exports.ThemeTypes = {}));
-
-    var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
-
     var BORDER_RADIUS = 3;
     var defaultButtonStyle = function defaultButtonStyle(button) {
       return {
@@ -903,10 +878,12 @@
           borderColor: button.disabled.borderColor
         },
         // focus styling
-        '&.Mui-focusVisible:not(.Mui-selected)': {
+        '&.Mui-focusVisible': {
           outline: button.focus.outline,
-          borderColor: 'transparent',
-          backgroundColor: button.mouseOver.fill
+          '&:not(.Mui-selected)': {
+            borderColor: 'transparent',
+            backgroundColor: button.mouseOver.fill
+          }
         }
       };
     };
@@ -934,6 +911,40 @@
         }
       });
     };
+    var iconButtonStyle = function iconButtonStyle(button) {
+      return __assign(__assign({}, defaultButtonStyle(button)), {
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: button["default"].borderColor,
+        // size styling
+        '&[class*="sizeSmall"]': {
+          width: 24,
+          height: 24
+        },
+        '&[class*="sizeMedium"]': {
+          width: 32,
+          height: 32
+        },
+        '&[class*="sizeLarge"]': {
+          width: 40,
+          height: 40
+        }
+      });
+    };
+    var buttonVariants = function buttonVariants(buttons, stylingFn) {
+      if (stylingFn === void 0) {
+        stylingFn = buttonStyle;
+      }
+
+      return Object.keys(buttons).map(function (variant) {
+        return {
+          props: {
+            variant: variant
+          },
+          style: stylingFn(buttons[variant])
+        };
+      });
+    };
     var variantsToClassName = function variantsToClassName(buttonVariants) {
       return buttonVariants.reduce(function (variants, _a) {
         var _b;
@@ -943,17 +954,23 @@
         return __assign(__assign({}, variants), (_b = {}, _b["&." + variant] = style, _b));
       }, {});
     };
-    var buttonVariants = function buttonVariants(buttons) {
-      return gwButtonVariants.map(function (variant) {
-        return {
-          props: {
-            variant: variant
-          },
-          style: buttonStyle(buttons[variant])
-        };
-      });
-    };
 
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
     var hex2rgba = function hex2rgba(hex, alpha) {
       if (alpha === void 0) {
         alpha = 1;
@@ -1007,580 +1024,190 @@
         return value;
       });
     };
-    var breakpoints = {
-      mobile: 0,
-      tablet: 768,
-      desktop: 1024,
-      dekstopHD: 1440,
-      dekstopHDWide: 1920
-    };
-    var createTheme = function createTheme(paletteType, geowebColors, shadows) {
-      return material.createTheme({
-        breakpoints: {
-          values: {
-            xs: breakpoints.mobile,
-            sm: breakpoints.tablet,
-            md: breakpoints.desktop,
-            lg: breakpoints.dekstopHD,
-            xl: breakpoints.dekstopHDWide
-          }
-        },
-        palette: {
-          mode: paletteType,
-          secondary: {
-            main: geowebColors.typographyAndIcons.iconLinkActive
+
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var focusButtonStyle$1 = {
+      outline: 'solid 2px #419cfe'
+    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
+
+    var colors$1 = {
+      background: {
+        surface: '#FFFFFF',
+        surfaceApp: '#F5F5F5',
+        surfaceBrowser: '#CFCFCF'
+      },
+      brand: {
+        brand: '#FFFFFF'
+      },
+      buttons: {
+        primary: {
+          "default": {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          background: {
-            paper: geowebColors.background.surfaceApp,
-            "default": geowebColors.background.surfaceBrowser
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: '#71A6FF'
           },
-          text: {
-            primary: geowebColors.typographyAndIcons.text
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          // geoweb color palette
-          geowebColors: geowebColors
-        },
-        shape: {
-          borderRadius: BORDER_RADIUS
-        },
-        typography: {
-          fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle$1
         },
-        shadows: shadows,
-        components: {
-          MuiButton: {
-            variants: buttonVariants(geowebColors.buttons),
-            defaultProps: {
-              focusRipple: false
-            }
+        secondary: {
+          "default": {
+            fill: '#374061',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          MuiToggleButton: {
-            defaultProps: {
-              focusRipple: false
-            },
-            styleOverrides: {
-              root: variantsToClassName(buttonVariants(geowebColors.buttons))
-            }
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          MuiIconButton: {
-            // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
-            defaultProps: {
-              focusRipple: false
-            },
-            styleOverrides: {
-              root: defaultButtonStyle(geowebColors.buttons.flat)
-            }
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          MuiCssBaseline: {
-            styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
           },
-          MuiMenuItem: {
-            styleOverrides: {
-              root: {
-                minHeight: '48px!important',
-                fontSize: '0.875rem',
-                letterSpacing: '0.25px',
-                divider: {
-                  borderBottomColor: geowebColors.greys.accessibleLight
-                },
-                li: {
-                  '&:hover': {
-                    backgroundColor: geowebColors.tab.mouseOver.rgba
-                  }
-                },
-                '&.Mui-selected': {
-                  background: 'none',
-                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
-                }
-              }
-            }
+          focus: focusButtonStyle$1
+        },
+        tertiary: {
+          "default": {
+            fill: 'transparent',
+            color: '#374061',
+            borderColor: '#374061'
           },
-          MuiRadio: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.iconLinkActive,
-                '&.MuiRadio-root.Mui-disabled': {
-                  color: "" + geowebColors.typographyAndIcons.iconLinkDisabled
-                },
-                '&.Mui-checked': {
-                  color: geowebColors.typographyAndIcons.iconLinkActive
-                }
-              }
-            }
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: '#374061'
           },
-          MuiCheckbox: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.iconLinkActive,
-                '&.MuiCheckbox-root.Mui-disabled': {
-                  color: geowebColors.typographyAndIcons.iconLinkDisabled
-                },
-                '&.Mui-checked': {
-                  color: geowebColors.typographyAndIcons.iconLinkActive
-                }
-              }
-            }
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: '#186DFF'
           },
-          MuiPaper: {
-            styleOverrides: {
-              root: {
-                backgroundImage: 'unset'
-              },
-              outlined: {
-                borderColor: geowebColors.cards.cardContainerBorder
-              }
-            }
+          activeMouseOver: {
+            fill: '#E0E8F5',
+            color: '#186DFF',
+            borderColor: '#186DFF'
           },
-          MuiCard: {
-            styleOverrides: {
-              root: {
-                backgroundColor: geowebColors.cards.cardContainer
-              }
-            }
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
           },
-          MuiSlider: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.iconLinkActive
-              }
-            }
+          focus: focusButtonStyle$1
+        },
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#374061',
+            borderColor: 'transparent'
           },
-          MuiTable: {
-            styleOverrides: {
-              root: {
-                borderSpacing: '0 0.25rem',
-                borderCollapse: 'separate'
-              }
-            }
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: 'transparent'
           },
-          MuiTableRow: {
-            styleOverrides: {
-              head: {
-                '&:hover': {
-                  boxShadow: shadows[0]
-                }
-              },
-              root: {
-                transition: 'box-shadow 100ms ease-out',
-                boxShadow: shadows[0],
-                borderRadius: BORDER_RADIUS,
-                '&:hover': {
-                  boxShadow: shadows[1]
-                },
-                position: 'relative'
-              }
-            }
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: 'transparent'
           },
-          MuiTableCell: {
-            styleOverrides: {
-              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"
-                }
-              }
-            }
+          activeMouseOver: {
+            fill: '#E0E8F5',
+            color: '#186DFF',
+            borderColor: 'transparent'
           },
-          MuiTabs: {
-            styleOverrides: {
-              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
-              }
-            }
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
           },
-          MuiTab: {
-            styleOverrides: {
-              root: {
-                textTransform: 'initial',
-                '&.Mui-selected': {
-                  color: geowebColors.typographyAndIcons.iconLinkActive
-                },
-                '&:hover': {
-                  opacity: 1,
-                  color: geowebColors.typographyAndIcons.iconLinkActive,
-                  backgroundColor: geowebColors.tab.mouseOver.rgba
-                }
-              }
-            }
+          focus: focusButtonStyle$1
+        },
+        tool: {
+          "default": {
+            fill: '#ECEDEE',
+            color: '#374061',
+            borderColor: 'transparent'
           },
-          MuiListItem: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.text,
-                fontSize: '14px',
-                minHeight: '36px'
-              },
-              divider: {
-                borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
-              }
-            }
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: 'transparent'
           },
-          MuiListItemIcon: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.icon,
-                width: '24px',
-                height: '24px'
-              }
-            }
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          MuiListItemButton: {
-            styleOverrides: {
-              root: {
-                '&:hover': {
-                  backgroundColor: geowebColors.cards.cardContainerMouseOver
-                },
-                '&.Mui-selected': {
-                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
-                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive,
-                  '&:hover': {
-                    backgroundColor: geowebColors.cards.cardContainerMouseOver
-                  }
-                },
-                '&.Mui-focusVisible': {
-                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
-                  outline: geowebColors.buttons.focusDefault.outline
-                },
-                ' .MuiListItemIcon-root': {
-                  minWidth: 40
-                }
-              }
-            }
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
           },
-          MuiBackdrop: {
-            styleOverrides: {
-              root: {
-                backgroundColor: geowebColors.backdrops.black.rgba
-              }
-            }
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
           },
-          MuiTooltip: {
-            styleOverrides: {
-              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
-              }
-            }
+          focus: focusButtonStyle$1
+        },
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#374061',
+            borderColor: '#374061'
           },
-          MuiLink: {
-            styleOverrides: {
-              root: {
-                color: geowebColors.typographyAndIcons.textLinkActive,
-                textDecoration: 'none',
-                '&:hover': {
-                  textDecoration: 'underline',
-                  textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
-                }
-              }
-            }
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: '#374061'
           },
-          MuiAlert: {
-            styleOverrides: {
-              standardError: {
-                border: geowebColors.functional.errorOutline.border,
-                borderRadius: '0px',
-                backgroundColor: geowebColors.functional.errorOutline.fill,
-                '& .MuiAlert-icon': {
-                  color: geowebColors.functional.error,
-                  opacity: 1
-                }
-              },
-              standardWarning: {
-                border: geowebColors.functional.warningOutline.border,
-                borderRadius: '0px',
-                backgroundColor: geowebColors.functional.warningOutline.fill,
-                '& .MuiAlert-icon': {
-                  color: geowebColors.functional.warning,
-                  opacity: 1
-                }
-              },
-              standardInfo: {
-                border: geowebColors.functional.notificationOutline.border,
-                borderRadius: '0px',
-                backgroundColor: geowebColors.functional.notificationOutline.fill,
-                '& .MuiAlert-icon': {
-                  color: geowebColors.functional.notification,
-                  opacity: 1
-                }
-              },
-              standardSuccess: {
-                border: geowebColors.functional.successOutline.border,
-                borderRadius: '0px',
-                backgroundColor: geowebColors.functional.successOutline.fill,
-                '& .MuiAlert-icon': {
-                  color: geowebColors.functional.success,
-                  opacity: 1
-                }
-              },
-              action: {
-                color: geowebColors.buttons.tertiary["default"].color
-              },
-              message: {
-                fontSize: '14px',
-                lineHeight: 1.43,
-                letterSpacing: '0.25px',
-                color: geowebColors.typographyAndIcons.text
-              }
-            }
-          },
-          MuiTextField: {
-            defaultProps: {
-              variant: 'filled'
-            }
-          },
-          MuiFilledInput: {
-            styleOverrides: {
-              root: {
-                backgroundColor: geowebColors.textInputField["default"].rgba,
-                '&.Mui-focused': {
-                  backgroundColor: geowebColors.textInputField.active.rgba,
-                  '&:after': {
-                    borderColor: 'transparent'
-                  }
-                },
-                '&.Mui-disabled': {
-                  backgroundColor: geowebColors.textInputField.disabled.rgba
-                },
-                '&.Mui-error': {
-                  '&:after': {
-                    borderColor: geowebColors.captions.captionError.color
-                  }
-                },
-                // can be improved in MUI6 or after this PR is merged https://github.com/mui/material-ui/pull/32822#issuecomment-1275927288
-                '&.MuiInputBase-readOnly': {
-                  background: 'transparent',
-                  color: geowebColors.typographyAndIcons.text,
-                  ' .MuiInputBase-readOnly': {
-                    WebkitTextFillColor: 'inherit'
-                  },
-                  '&:before': {
-                    border: 'transparent'
-                  }
-                }
-              },
-              underline: {
-                '&:after': {
-                  borderWidth: '1px'
-                },
-                '&.Mui-disabled:before': {
-                  borderBottomStyle: 'solid'
-                }
-              }
-            }
-          },
-          MuiFormLabel: {
-            styleOverrides: {
-              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: {
-            styleOverrides: {
-              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
-                }
-              }
-            }
-          },
-          MuiSwitch: {
-            styleOverrides: {
-              switchBase: {
-                color: geowebColors.customSwitch.thumb,
-                '&.Mui-checked': {
-                  color: geowebColors.customSwitch.thumb
-                },
-                '&.Mui-disabled': {
-                  color: geowebColors.customSwitch.thumbDisabled
-                },
-                '&.Mui-checked.Mui-disabled': {
-                  color: geowebColors.customSwitch.thumbDisabled
-                },
-                '&.Mui-checked+.MuiSwitch-track': {
-                  backgroundColor: geowebColors.customSwitch.trackActive
-                },
-                '&.Mui-disabled+.MuiSwitch-track': {
-                  backgroundColor: geowebColors.customSwitch.track
-                },
-                '&.Mui-checked.Mui-disabled+.MuiSwitch-track': {
-                  backgroundColor: geowebColors.customSwitch.trackActive
-                }
-              },
-              track: {
-                backgroundColor: geowebColors.customSwitch.track,
-                opacity: '1 !important'
-              }
-            }
-          },
-          MuiSnackbarContent: {
-            styleOverrides: {
-              root: {
-                backgroundColor: geowebColors.snackbar.background,
-                color: geowebColors.snackbar.text,
-                fontSize: '16px',
-                letterSpacing: '0.44px',
-                borderRadius: '2px',
-                boxShadow: shadows[8]
-              }
-            }
-          },
-          MuiAvatar: {
-            styleOverrides: {
-              root: __assign(__assign({}, defaultButtonStyle(geowebColors.buttons.primary)), {
-                fontWeight: 500,
-                '&:hover': {
-                  backgroundColor: 'geowebColors.buttons.primary.default.fill'
-                },
-                height: 32,
-                width: 32,
-                fontSize: 16,
-                borderRadius: '50%'
-              })
-            }
-          },
-          MuiAccordion: {
-            styleOverrides: {
-              root: {
-                backgroundColor: geowebColors.cards.cardContainer,
-                borderRadius: '3px',
-                border: 'solid 1px',
-                borderColor: geowebColors.cards.cardContainerBorder,
-                color: geowebColors.buttons.flat["default"].color,
-                padding: '0px',
-                margin: '0px 12px 4px 12px',
-                fontSize: '12px',
-                '&:before': {
-                  display: 'none'
-                },
-                '& .MuiAccordionSummary-root.Mui-expanded': {
-                  borderBottom: 'solid 1px',
-                  borderColor: geowebColors.cards.cardContainerBorder
-                },
-                '& .MuiAccordionSummary-content': {
-                  margin: '2px',
-                  padding: '4px 4px 4px 10px'
-                }
-              }
-            }
-          },
-          MuiAccordionSummary: {
-            styleOverrides: {
-              root: {
-                minHeight: '32px',
-                padding: '0px',
-                paddingRight: '5px'
-              }
-            }
-          }
-        }
-      });
-    };
-
-    /* *
-     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2023 - Finnish Meteorological Institute (FMI)
-     * */
-    var focusButtonStyle$1 = {
-      outline: 'solid 2px #419cfe'
-    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
-
-    var colors$1 = {
-      background: {
-        surface: '#FFFFFF',
-        surfaceApp: '#F5F5F5',
-        surfaceBrowser: '#CFCFCF'
-      },
-      brand: {
-        brand: '#FFFFFF'
-      },
-      buttons: {
-        primary: {
-          "default": {
+          active: {
             fill: '#186DFF',
             color: '#FFFFFF',
             borderColor: 'transparent'
           },
-          mouseOver: {
+          activeMouseOver: {
             fill: '#1047B0',
             color: '#FFFFFF',
-            borderColor: '#71A6FF'
-          },
-          active: {
-            fill: '#186DFF',
-            color: '#FFFFFF',
             borderColor: 'transparent'
           },
-          activeMouseOver: {},
           disabled: {
             fill: 'transparent',
             color: '#626262',
@@ -1588,50 +1215,26 @@
           },
           focus: focusButtonStyle$1
         },
-        secondary: {
+        icon: {
           "default": {
-            fill: '#374061',
-            color: '#FFFFFF',
+            fill: 'transparent',
+            color: '#374061',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#1047B0',
-            color: '#FFFFFF',
+            fill: '#E0E8F5',
+            color: '#374061',
             borderColor: 'transparent'
           },
-          active: {
-            fill: '#186DFF',
-            color: '#FFFFFF',
-            borderColor: 'transparent'
-          },
-          activeMouseOver: {},
-          disabled: {
-            fill: 'transparent',
-            color: '#626262',
-            borderColor: 'transparent'
-          },
-          focus: focusButtonStyle$1
-        },
-        tertiary: {
-          "default": {
-            fill: 'transparent',
-            color: '#374061',
-            borderColor: '#374061'
-          },
-          mouseOver: {
-            fill: '#E0E8F5',
-            color: '#374061',
-            borderColor: '#374061'
-          },
           active: {
             fill: 'transparent',
             color: '#186DFF',
-            borderColor: '#186DFF'
+            borderColor: 'transparent'
           },
           activeMouseOver: {
             fill: '#E0E8F5',
             color: '#186DFF',
-            borderColor: '#186DFF'
+            borderColor: 'transparent'
           },
           disabled: {
             fill: 'transparent',
@@ -1639,7 +1242,9 @@
             borderColor: 'transparent'
           },
           focus: focusButtonStyle$1
-        },
+        }
+      },
+      iconButtons: {
         flat: {
           "default": {
             fill: 'transparent',
@@ -1723,36 +1328,7 @@
             borderColor: 'transparent'
           },
           focus: focusButtonStyle$1
-        },
-        icon: {
-          "default": {
-            fill: 'transparent',
-            color: '#374061',
-            borderColor: 'transparent'
-          },
-          mouseOver: {
-            fill: '#E0E8F5',
-            color: '#374061',
-            borderColor: 'transparent'
-          },
-          active: {
-            fill: 'transparent',
-            color: '#186DFF',
-            borderColor: 'transparent'
-          },
-          activeMouseOver: {
-            fill: '#E0E8F5',
-            color: '#186DFF',
-            borderColor: 'transparent'
-          },
-          disabled: {
-            fill: 'transparent',
-            color: '#626262',
-            borderColor: 'transparent'
-          },
-          focus: focusButtonStyle$1
-        },
-        focusDefault: focusButtonStyle$1
+        }
       },
       typographyAndIcons: {
         text: '#051039',
@@ -1789,7 +1365,7 @@
         }
       },
       greys: {
-        accessible: '#767676',
+        accessible: '#626262',
         accessibleLight: '#C5C5C5'
       },
       cards: {
@@ -1894,7 +1470,7 @@
         },
         legendNoDataBackground: {
           fill: '#575F7A',
-          opacity: '0.95'
+          opacity: 0.95
         }
       },
       customSlider: {
@@ -2036,303 +1612,550 @@
       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 = material.createTheme({
-      breakpoints: {
-        values: {
-          xs: breakpoints.mobile,
-          sm: breakpoints.tablet,
-          md: breakpoints.desktop,
-          lg: breakpoints.dekstopHD,
-          xl: breakpoints.dekstopHDWide
-        }
-      },
-      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'
+    var breakpoints = {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+      dekstopHD: 1440,
+      dekstopHDWide: 1920
+    };
+    var createTheme = function createTheme(_a) {
+      var _b = _a.paletteType,
+          paletteType = _b === void 0 ? 'light' : _b,
+          _c = _a.geowebColors,
+          defaultGeowebColors = _c === void 0 ? colors$1 : _c,
+          _d = _a.elevations,
+          defaultShadows = _d === void 0 ? elevations$1 : _d;
+      var geowebColors = parseColors(defaultGeowebColors);
+      var shadows = createShadows(defaultShadows);
+      return material.createTheme({
+        breakpoints: {
+          values: {
+            xs: breakpoints.mobile,
+            sm: breakpoints.tablet,
+            md: breakpoints.desktop,
+            lg: breakpoints.dekstopHD,
+            xl: breakpoints.dekstopHDWide
+          }
         },
-        overline: {
-          textTransform: 'none',
-          fontSize: '12px',
-          lineHeight: 1.43,
-          letterSpacing: '0.25px',
-          color: '#051039',
-          opacity: 0.7
+        palette: {
+          mode: 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
         },
-        caption: {
-          fontSize: '12px',
-          lineHeight: 1.33,
-          letterSpacing: '0.4px',
-          color: '#051039',
-          opacity: 0.7
+        shape: {
+          borderRadius: BORDER_RADIUS
         },
-        button: {
-          fontWeight: 500,
-          fontSize: '14px',
-          color: '0075a9'
-        }
-      },
-      components: {
-        MuiTooltip: {
-          styleOverrides: {
-            tooltip: {
-              borderRadius: '2px',
-              fontSize: '16px',
-              fontWeight: 'normal',
-              padding: '10px',
-              backgroundColor: '#232323'
-            }
-          }
+        typography: {
+          fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
         },
-        MuiIconButton: {
-          styleOverrides: {
-            root: {
-              color: '#0075a9'
+        shadows: shadows,
+        components: {
+          MuiButton: {
+            variants: buttonVariants(geowebColors.buttons),
+            defaultProps: {
+              focusRipple: false
             }
-          }
-        },
-        MuiCheckbox: {
-          styleOverrides: {
-            root: {
-              '&.Mui-disabled': {
-                color: '#CCCCCC!important'
-              },
-              '&.Mui-checked': {
-                color: '#0075a9'
-              }
+          },
+          MuiToggleButton: {
+            defaultProps: {
+              focusRipple: false
+            },
+            styleOverrides: {
+              root: variantsToClassName(buttonVariants(geowebColors.buttons))
             }
-          }
-        },
-        MuiSelect: {
-          styleOverrides: {
-            icon: {
-              color: '#0075a9'
+          },
+          MuiIconButton: {
+            // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
+            defaultProps: {
+              focusRipple: false
             },
-            select: {
-              '&:focus': {
-                backgroundColor: 'rgba(0, 117, 169, 0.05)'
+            styleOverrides: {
+              root: __assign(__assign({}, defaultButtonStyle(geowebColors.iconButtons.flat)), variantsToClassName(buttonVariants(geowebColors.iconButtons, iconButtonStyle)))
+            }
+          },
+          MuiCssBaseline: {
+            styleOverrides: "\n              html {\n                -webkit-font-smoothing: auto;\n              }\n            "
+          },
+          MuiMenuItem: {
+            styleOverrides: {
+              root: {
+                minHeight: '48px!important',
+                fontSize: '0.875rem',
+                letterSpacing: '0.25px',
+                divider: {
+                  borderBottomColor: geowebColors.greys.accessibleLight
+                },
+                li: {
+                  '&:hover': {
+                    backgroundColor: geowebColors.tab.mouseOver.rgba
+                  }
+                },
+                '&.Mui-selected': {
+                  background: 'none',
+                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
+                }
               }
             }
-          }
-        },
-        MuiAlert: {
-          styleOverrides: {
-            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'
+          },
+          MuiRadio: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.MuiRadio-root.Mui-disabled': {
+                  color: "" + geowebColors.typographyAndIcons.iconLinkDisabled
+                },
+                '&.Mui-checked': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                }
+              }
+            }
+          },
+          MuiCheckbox: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.MuiCheckbox-root.Mui-disabled': {
+                  color: geowebColors.typographyAndIcons.iconLinkDisabled
+                },
+                '&.Mui-checked': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                }
+              }
+            }
+          },
+          MuiPaper: {
+            styleOverrides: {
+              root: {
+                backgroundImage: 'unset'
+              },
+              outlined: {
+                borderColor: geowebColors.cards.cardContainerBorder
+              }
+            }
+          },
+          MuiCard: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.cards.cardContainer
+              }
+            }
+          },
+          MuiSlider: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive
+              }
+            }
+          },
+          MuiTable: {
+            styleOverrides: {
+              root: {
+                borderSpacing: '0 0.25rem',
+                borderCollapse: 'separate'
+              }
+            }
+          },
+          MuiTableRow: {
+            styleOverrides: {
+              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: {
+            styleOverrides: {
+              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: {
+            styleOverrides: {
+              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: {
+            styleOverrides: {
+              root: {
+                textTransform: 'initial',
+                '&.Mui-selected': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                },
+                '&:hover': {
+                  opacity: 1,
+                  color: geowebColors.typographyAndIcons.iconLinkActive,
+                  backgroundColor: geowebColors.tab.mouseOver.rgba
+                }
+              }
+            }
+          },
+          MuiListItem: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.text,
+                fontSize: '14px',
+                minHeight: '36px'
+              },
+              divider: {
+                borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+              }
+            }
+          },
+          MuiListItemIcon: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.icon,
+                width: '24px',
+                height: '24px'
+              }
+            }
+          },
+          MuiListItemButton: {
+            styleOverrides: {
+              root: {
+                '&:hover': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver
+                },
+                '&.Mui-selected': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
+                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive,
+                  '&:hover': {
+                    backgroundColor: geowebColors.cards.cardContainerMouseOver
+                  }
+                },
+                '&.Mui-focusVisible': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
+                  outline: geowebColors.buttons.primary.focus.outline
+                },
+                ' .MuiListItemIcon-root': {
+                  minWidth: 40
+                }
+              }
+            }
+          },
+          MuiBackdrop: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.backdrops.black.rgba
+              }
+            }
+          },
+          MuiTooltip: {
+            styleOverrides: {
+              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: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.textLinkActive,
+                textDecoration: 'none',
+                '&:hover': {
+                  textDecoration: 'underline',
+                  textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
+                }
+              }
+            }
+          },
+          MuiAlert: {
+            styleOverrides: {
+              standardError: {
+                border: geowebColors.functional.errorOutline.border,
+                borderRadius: '0px',
+                backgroundColor: geowebColors.functional.errorOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.error,
+                  opacity: 1
+                }
+              },
+              standardWarning: {
+                border: geowebColors.functional.warningOutline.border,
+                borderRadius: '0px',
+                backgroundColor: geowebColors.functional.warningOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.warning,
+                  opacity: 1
+                }
+              },
+              standardInfo: {
+                border: geowebColors.functional.notificationOutline.border,
+                borderRadius: '0px',
+                backgroundColor: geowebColors.functional.notificationOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.notification,
+                  opacity: 1
+                }
+              },
+              standardSuccess: {
+                border: geowebColors.functional.successOutline.border,
+                borderRadius: '0px',
+                backgroundColor: geowebColors.functional.successOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.success,
+                  opacity: 1
+                }
+              },
+              action: {
+                color: geowebColors.buttons.tertiary["default"].color
+              },
+              message: {
+                fontSize: '14px',
+                lineHeight: 1.43,
+                letterSpacing: '0.25px',
+                color: geowebColors.typographyAndIcons.text
+              }
             }
-          }
-        },
-        MuiTabs: {
-          styleOverrides: {
-            root: {
-              backgroundColor: '#ffffff',
-              minHeight: '30px'
-            },
-            scrollButtons: {
-              width: '20px'
+          },
+          MuiTextField: {
+            defaultProps: {
+              variant: 'filled'
             }
-          }
-        },
-        MuiTab: {
-          styleOverrides: {
-            root: {
-              minHeight: '30px',
-              textTransform: 'none',
-              minWidth: '76px',
-              '@media (min-width: 600px)': {
-                minWidth: '76px'
+          },
+          MuiFilledInput: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.textInputField["default"].rgba,
+                '&.Mui-focused': {
+                  backgroundColor: geowebColors.textInputField.active.rgba,
+                  '&:after': {
+                    borderColor: 'transparent'
+                  }
+                },
+                '&.Mui-disabled': {
+                  backgroundColor: geowebColors.textInputField.disabled.rgba
+                },
+                '&.Mui-error': {
+                  '&:before': {
+                    borderColor: geowebColors.captions.captionError.color
+                  }
+                },
+                // can be improved in MUI6 or after this PR is merged https://github.com/mui/material-ui/pull/32822#issuecomment-1275927288
+                '&.MuiInputBase-readOnly': {
+                  background: 'transparent',
+                  color: geowebColors.typographyAndIcons.text,
+                  ' .MuiInputBase-readOnly': {
+                    WebkitTextFillColor: 'inherit'
+                  },
+                  '&:before': {
+                    border: 'transparent'
+                  }
+                }
+              },
+              underline: {
+                '&:after': {
+                  borderWidth: '1px'
+                },
+                '&.Mui-disabled:before': {
+                  borderBottomStyle: 'solid'
+                }
               }
-            },
-            labelIcon: {
-              minHeight: '30px'
             }
-          }
-        },
-        MuiListItem: {
-          styleOverrides: {
-            root: {
-              '&$selected': {
-                backgroundColor: 'rgba(0, 117, 169, 0.15)',
-                borderLeft: '4px solid #0075a9',
-                '&:hover': {
-                  backgroundColor: 'rgba(0, 117, 169, 0.10)'
+          },
+          MuiFormLabel: {
+            styleOverrides: {
+              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
                 }
               }
-            },
-            button: {
-              '&:hover': {
-                backgroundColor: 'rgba(0, 117, 169, 0.15)'
-              }
             }
-          }
-        },
-        MuiMenuItem: {
-          styleOverrides: {
-            root: {
-              '&.Mui-selected': {
-                backgroundColor: 'rgba(0, 117, 169, 0.15)',
-                borderLeft: '4px solid #0075a9',
-                '&:hover': {
-                  backgroundColor: 'rgba(0, 117, 169, 0.10)'
+          },
+          MuiFormHelperText: {
+            styleOverrides: {
+              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
                 }
-              },
-              '&:hover': {
-                backgroundColor: 'rgba(0, 117, 169, 0.15)'
               }
             }
-          }
-        },
-        MuiFormLabel: {
-          styleOverrides: {
-            root: {
-              color: 'rgba(5, 16, 57, 0.7)',
-              '&.Mui-focused': {
-                color: '#0075a9'
+          },
+          MuiSwitch: {
+            styleOverrides: {
+              switchBase: {
+                color: geowebColors.customSwitch.thumb,
+                '&.Mui-checked': {
+                  color: geowebColors.customSwitch.thumb
+                },
+                '&.Mui-disabled': {
+                  color: geowebColors.customSwitch.thumbDisabled
+                },
+                '&.Mui-checked.Mui-disabled': {
+                  color: geowebColors.customSwitch.thumbDisabled
+                },
+                '&.Mui-checked+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.trackActive
+                },
+                '&.Mui-disabled+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.track
+                },
+                '&.Mui-checked.Mui-disabled+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.trackActive
+                }
               },
-              '&.Mui-error': {
-                color: '#d32f2f!important'
+              track: {
+                backgroundColor: geowebColors.customSwitch.track,
+                opacity: '1 !important'
               }
             }
-          }
-        },
-        MuiOutlinedInput: {
-          styleOverrides: {
-            root: {
-              '&$focused $notchedOutline': {
-                borderColor: '#0075a9'
+          },
+          MuiSnackbarContent: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.snackbar.background,
+                color: geowebColors.snackbar.text,
+                fontSize: '16px',
+                letterSpacing: '0.44px',
+                borderRadius: '2px',
+                boxShadow: shadows[8]
               }
             }
-          }
-        },
-        MuiFilledInput: {
-          styleOverrides: {
-            root: {
-              backgroundColor: 'rgba(0, 117, 169, 0.05)',
-              color: '#051039',
-              '&.Mui-disabled': {
-                backgroundColor: 'white'
-              },
-              '&.Mui-focused': {
-                backgroundColor: 'rgba(0,0,0,0.09)'
-              }
-            },
-            underline: {
-              '&.Mui-disabled:before': {
-                borderBottomStyle: 'none'
+          },
+          MuiAvatar: {
+            styleOverrides: {
+              root: __assign(__assign({}, defaultButtonStyle(geowebColors.buttons.primary)), {
+                fontWeight: 500,
+                '&:hover': {
+                  backgroundColor: 'geowebColors.buttons.primary.default.fill'
+                },
+                height: 32,
+                width: 32,
+                fontSize: 16,
+                borderRadius: '50%'
+              })
+            }
+          },
+          MuiAccordion: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.cards.cardContainer,
+                borderRadius: '3px',
+                border: 'solid 1px',
+                borderColor: geowebColors.cards.cardContainerBorder,
+                color: geowebColors.buttons.flat["default"].color,
+                padding: '0px',
+                margin: '0px 12px 4px 12px',
+                fontSize: '12px',
+                '&:before': {
+                  display: 'none'
+                },
+                '& .MuiAccordionSummary-root.Mui-expanded': {
+                  borderBottom: 'solid 1px',
+                  borderColor: geowebColors.cards.cardContainerBorder
+                },
+                '& .MuiAccordionSummary-content': {
+                  margin: '2px',
+                  padding: '4px 4px 4px 10px'
+                }
               }
             }
-          }
-        },
-        MuiRadio: {
-          styleOverrides: {
-            root: {
-              '&.Mui-disabled': {
-                color: '#CCCCCC!important'
-              },
-              '&.Mui-checked': {
-                color: '#0075a9'
+          },
+          MuiAccordionSummary: {
+            styleOverrides: {
+              root: {
+                minHeight: '32px',
+                padding: '0px',
+                paddingRight: '5px'
               }
             }
-          }
-        },
-        MuiCardContent: {
-          styleOverrides: {
-            root: {
-              '&:last-child': {
-                paddingBottom: 0
+          },
+          MuiDesktopDateTimePicker: {
+            defaultProps: {
+              viewRenderers: {
+                hours: xDatePickers.renderTimeViewClock,
+                minutes: xDatePickers.renderTimeViewClock,
+                seconds: xDatePickers.renderTimeViewClock
               }
             }
           }
-        },
-        MuiDialog: {
-          styleOverrides: {
-            paperWidthLg: {
-              maxWidth: '1280px'
-            }
-          }
-        },
-        MuiButton: {
-          variants: buttonVariants(geowebColors.buttons)
-        },
-        MuiToggleButton: {
-          styleOverrides: {
-            root: variantsToClassName(buttonVariants(geowebColors.buttons))
-          }
         }
-      }
-    });
+      });
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2551,8 +2374,93 @@
             borderColor: 'transparent'
           },
           focus: focusButtonStyle
+        }
+      },
+      iconButtons: {
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#7BACFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#414751',
+            color: '#7BACFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
+        },
+        tool: {
+          "default": {
+            fill: '#393939',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
         },
-        focusDefault: focusButtonStyle
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
+        }
       },
       typographyAndIcons: {
         text: '#FFFFFF',
@@ -2589,7 +2497,7 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2',
+        accessible: '#B4B4B4',
         accessibleLight: '#6F6F6F'
       },
       cards: {
@@ -2610,7 +2518,7 @@
       screenManager: {
         activeWindow: '#242424',
         inactiveWindow: '#303030',
-        tabButtonHover: '#414751;'
+        tabButtonHover: '#414751'
       },
       timeSlider: {
         // player
@@ -2647,197 +2555,542 @@
           color: '#FFFFFF',
           fontFamily: 'Roboto'
         },
-        timelineTimeScale: {
-          fill: '#FFFFFF'
+        timelineTimeScale: {
+          fill: '#FFFFFF'
+        },
+        timelineNightTime: {
+          fill: '#051038',
+          opacity: 0.67
+        },
+        timelineTimelineSurface: {
+          fill: '#303030'
+        },
+        timelineMonthChangeDash: {
+          fill: '#A2A2A2',
+          opacity: 0.5
+        },
+        timelineSelectionBackground: {
+          fill: '#FFFFFF',
+          opacity: 0.15
+        },
+        timelineSelectionOutline: {
+          fill: '#F0FF00',
+          opacity: 0.4
+        },
+        // time scale
+        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))'
+        },
+        // legend
+        ledgendObservedBackground: {
+          fill: '#00649F'
+        },
+        legendForecastBackground: {
+          fill: '#9900B1'
+        },
+        legendNoDataBackground: {
+          fill: '#575F7A',
+          opacity: 0.95
+        }
+      },
+      customSlider: {
+        rail: '#488BFD',
+        railDisabled: '#5E5E5E',
+        track: '#186DFF',
+        trackDisabled: '#5E5E5E',
+        thumb: '#F8F9F9',
+        thumbDisabled: '#5E5E5E',
+        mark: '#FFFFFF',
+        markDisabled: '#303030'
+      },
+      customSwitch: {
+        thumb: '#F8F9F9',
+        thumbDisabled: '#F5F5F5',
+        track: '#BDBDBD',
+        trackActive: '#488BFD'
+      },
+      syncGroups: {
+        drawerOpen: {
+          fill: '#232323'
+        }
+      },
+      layerManager: {
+        tableRowDefaultText: {
+          color: '#FFFFFF',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDefaultCardContainer: {
+          fill: '#303030',
+          border: '1px solid #404040',
+          borderColor: '#404040'
+        },
+        tableRowDisabledText: {
+          color: '#909090',
+          opacity: 0.87,
+          fontSize: 12
+        },
+        tableRowDisabledCardContainer: {
+          fill: '#2B2B2B',
+          border: '1px solid #404040',
+          borderColor: '#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
+        },
+        captionErrorBackground: {
+          color: '#C00000',
+          opacity: 0.25
+        },
+        captionDisabled: {
+          color: '#B0B0B0',
+          opacity: 1
+        }
+      },
+      functional: {
+        success: '#72BB23',
+        successOutline: {
+          fill: 'rgba(114, 187, 35, 0.25)',
+          border: '1px solid #72BB23',
+          borderColor: '#72BB23'
+        },
+        error: '#C00000',
+        errorOutline: {
+          fill: 'rgba(192, 0, 0, 0.25)',
+          border: '1px solid #C00000',
+          borderColor: '#C00000'
+        },
+        warning: '#FFA800',
+        warningOutline: {
+          fill: 'rgba(255, 168, 0, 0.25)',
+          border: '1px solid #FFA800',
+          borderColor: '#FFA800'
+        },
+        warningHighlight: {
+          fill: '#FFA800',
+          opacity: 0.2
         },
-        timelineNightTime: {
-          fill: '#051038',
-          opacity: 0.67
+        notification: '#186DFF',
+        notificationOutline: {
+          fill: 'rgba(24, 109, 255, 0.25)',
+          border: '1px solid #186DFF',
+          borderColor: '#186DFF'
         },
-        timelineTimelineSurface: {
-          fill: '#303030'
+        summary: '#9595FF',
+        summaryOutline: {
+          fill: 'rgba(131, 131, 242, 0.25)',
+          border: '1px solid #8383F2',
+          borderColor: '#8383F2'
         },
-        timelineMonthChangeDash: {
-          fill: '#A2A2A2',
-          opacity: 0.5
+        disabled: '#9B9FB0',
+        disabledOutline: {
+          fill: 'rgba(155, 159, 176, 0.25)',
+          border: '1px solid #9B9FB0',
+          borderColor: '#9B9FB0'
+        }
+      },
+      snackbar: {
+        background: '#051039',
+        text: '#FFFFFF',
+        action: '#98e1f1',
+        actionHover: {
+          fill: '#7BACFF',
+          opacity: 0.2
+        }
+      }
+    }; // 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 geowebColors = __assign({}, colors$1);
+
+    var GWTheme = material.createTheme({
+      breakpoints: {
+        values: {
+          xs: breakpoints.mobile,
+          sm: breakpoints.tablet,
+          md: breakpoints.desktop,
+          lg: breakpoints.dekstopHD,
+          xl: breakpoints.dekstopHDWide
+        }
+      },
+      palette: {
+        secondary: {
+          main: '#0075a9'
         },
-        timelineSelectionBackground: {
-          fill: '#FFFFFF',
-          opacity: 0.15
+        action: {
+          active: '#ffa800'
         },
-        timelineSelectionOutline: {
-          fill: '#F0FF00',
-          opacity: 0.4
+        text: {
+          disabled: '#051039'
         },
-        // time scale
-        timeScalePointer: {
-          fill: '#F8F9F9'
+        geowebColors: parseColors(geowebColors)
+      },
+      shape: {
+        borderRadius: 3
+      },
+      typography: {
+        h6: {
+          fontSize: '16px'
         },
-        timeScaleHorizontalScale: {
-          fill: '#000000',
-          opacity: 0.8
+        subtitle1: {
+          fontSize: '16px',
+          fontWeight: 500,
+          lineHeight: 1.5,
+          letterSpacing: '0.15px',
+          opacity: 0.87,
+          color: '#051039'
         },
-        timeScaleTimeIndicators: {
-          fill: '#A2A2A2'
+        subtitle2: {
+          fontSize: '14px',
+          fontWeight: 500,
+          lineHeight: 1.71,
+          letterSpacing: '0.1px',
+          opacity: 0.87,
+          color: '#051039'
         },
-        timeScaleTimeIndicatorsActive: {
-          fill: '#FFFFFF'
+        body1: {
+          fontSize: '16px',
+          lineHeight: 1.56,
+          letterSpacing: '0.44px',
+          color: '#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))'
+        body2: {
+          fontSize: '14px',
+          lineHeight: 1.43,
+          letterSpacing: '0.25px',
+          color: '#051039'
         },
-        // legend
-        ledgendObservedBackground: {
-          fill: '#00649F'
+        overline: {
+          textTransform: 'none',
+          fontSize: '12px',
+          lineHeight: 1.43,
+          letterSpacing: '0.25px',
+          color: '#051039',
+          opacity: 0.7
         },
-        legendForecastBackground: {
-          fill: '#9900B1'
+        caption: {
+          fontSize: '12px',
+          lineHeight: 1.33,
+          letterSpacing: '0.4px',
+          color: '#051039',
+          opacity: 0.7
         },
-        legendNoDataBackground: {
-          fill: '#575F7A',
-          opacity: '0.95'
-        }
-      },
-      customSlider: {
-        rail: '#488BFD',
-        railDisabled: '#5E5E5E',
-        track: '#186DFF',
-        trackDisabled: '#5E5E5E',
-        thumb: '#F8F9F9',
-        thumbDisabled: '#5E5E5E',
-        mark: '#FFFFFF',
-        markDisabled: '#303030'
-      },
-      customSwitch: {
-        thumb: '#F8F9F9',
-        thumbDisabled: '#F5F5F5',
-        track: '#BDBDBD',
-        trackActive: '#488BFD'
-      },
-      syncGroups: {
-        drawerOpen: {
-          fill: '#232323'
+        button: {
+          fontWeight: 500,
+          fontSize: '14px',
+          color: '0075a9'
         }
       },
-      layerManager: {
-        tableRowDefaultText: {
-          color: '#FFFFFF',
-          opacity: 0.87,
-          fontSize: 12
+      components: {
+        MuiTooltip: {
+          styleOverrides: {
+            tooltip: {
+              borderRadius: '2px',
+              fontSize: '16px',
+              fontWeight: 'normal',
+              padding: '10px',
+              backgroundColor: '#232323'
+            }
+          }
         },
-        tableRowDefaultCardContainer: {
-          fill: '#303030',
-          border: '1px solid #404040',
-          borderColor: '#404040'
+        MuiIconButton: {
+          styleOverrides: {
+            root: {
+              color: '#0075a9'
+            }
+          }
         },
-        tableRowDisabledText: {
-          color: '#909090',
-          opacity: 0.87,
-          fontSize: 12
+        MuiCheckbox: {
+          styleOverrides: {
+            root: {
+              '&.Mui-disabled': {
+                color: '#CCCCCC!important'
+              },
+              '&.Mui-checked': {
+                color: '#0075a9'
+              }
+            }
+          }
+        },
+        MuiSelect: {
+          styleOverrides: {
+            icon: {
+              color: '#0075a9'
+            },
+            select: {
+              '&:focus': {
+                backgroundColor: 'rgba(0, 117, 169, 0.05)'
+              }
+            }
+          }
+        },
+        MuiAlert: {
+          styleOverrides: {
+            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'
+            }
+          }
         },
-        tableRowDisabledCardContainer: {
-          fill: '#2B2B2B',
-          border: '1px solid #404040',
-          borderColor: '#404040'
-        }
-      },
-      tooltips: {
-        tooltipContainer: {
-          fill: '#232323',
-          opacity: 1
+        MuiTabs: {
+          styleOverrides: {
+            root: {
+              backgroundColor: '#ffffff',
+              minHeight: '30px'
+            },
+            scrollButtons: {
+              width: '20px'
+            }
+          }
         },
-        tooltipText: {
-          color: '#FFFFFF'
-        }
-      },
-      captions: {
-        captionStatus: {
-          color: '#FFFFFF',
-          opacity: 0.7
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              minHeight: '30px',
+              textTransform: 'none',
+              minWidth: '76px',
+              '@media (min-width: 600px)': {
+                minWidth: '76px'
+              }
+            },
+            labelIcon: {
+              minHeight: '30px'
+            }
+          }
         },
-        captionInformation: {
-          color: '#9EC2FF',
-          opacity: 1
+        MuiListItem: {
+          styleOverrides: {
+            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)'
+              }
+            }
+          }
         },
-        captionError: {
-          color: '#FF8F8F',
-          opacity: 1
+        MuiMenuItem: {
+          styleOverrides: {
+            root: {
+              '&.Mui-selected': {
+                backgroundColor: 'rgba(0, 117, 169, 0.15)',
+                borderLeft: '4px solid #0075a9',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 117, 169, 0.10)'
+                }
+              },
+              '&:hover': {
+                backgroundColor: 'rgba(0, 117, 169, 0.15)'
+              }
+            }
+          }
         },
-        captionErrorBackground: {
-          color: '#C00000',
-          opacity: 0.25
+        MuiFormLabel: {
+          styleOverrides: {
+            root: {
+              color: 'rgba(5, 16, 57, 0.7)',
+              '&.Mui-focused': {
+                color: '#0075a9'
+              },
+              '&.Mui-error': {
+                color: '#d32f2f!important'
+              }
+            }
+          }
         },
-        captionDisabled: {
-          color: '#B0B0B0',
-          opacity: 1
-        }
-      },
-      functional: {
-        success: '#72BB23',
-        successOutline: {
-          fill: 'rgba(114, 187, 35, 0.25)',
-          border: '1px solid #72BB23',
-          borderColor: '#72BB23'
+        MuiOutlinedInput: {
+          styleOverrides: {
+            root: {
+              '&$focused $notchedOutline': {
+                borderColor: '#0075a9'
+              }
+            }
+          }
         },
-        error: '#C00000',
-        errorOutline: {
-          fill: 'rgba(192, 0, 0, 0.25)',
-          border: '1px solid #C00000',
-          borderColor: '#C00000'
+        MuiFilledInput: {
+          styleOverrides: {
+            root: {
+              backgroundColor: 'rgba(0, 117, 169, 0.05)',
+              color: '#051039',
+              '&.Mui-disabled': {
+                backgroundColor: 'white'
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'rgba(0,0,0,0.09)'
+              }
+            },
+            underline: {
+              '&.Mui-disabled:before': {
+                borderBottomStyle: 'none'
+              }
+            }
+          }
         },
-        warning: '#FFA800',
-        warningOutline: {
-          fill: 'rgba(255, 168, 0, 0.25)',
-          border: '1px solid #FFA800',
-          borderColor: '#FFA800'
+        MuiRadio: {
+          styleOverrides: {
+            root: {
+              '&.Mui-disabled': {
+                color: '#CCCCCC!important'
+              },
+              '&.Mui-checked': {
+                color: '#0075a9'
+              }
+            }
+          }
         },
-        warningHighlight: {
-          fill: '#FFA800',
-          opacity: 0.2
+        MuiCardContent: {
+          styleOverrides: {
+            root: {
+              '&:last-child': {
+                paddingBottom: 0
+              }
+            }
+          }
         },
-        notification: '#186DFF',
-        notificationOutline: {
-          fill: 'rgba(24, 109, 255, 0.25)',
-          border: '1px solid #186DFF',
-          borderColor: '#186DFF'
+        MuiDialog: {
+          styleOverrides: {
+            paperWidthLg: {
+              maxWidth: '1280px'
+            }
+          }
         },
-        summary: '#9595FF',
-        summaryOutline: {
-          fill: 'rgba(131, 131, 242, 0.25)',
-          border: '1px solid #8383F2',
-          borderColor: '#8383F2'
+        MuiButton: {
+          variants: buttonVariants(geowebColors.buttons)
         },
-        disabled: '#9B9FB0',
-        disabledOutline: {
-          fill: 'rgba(155, 159, 176, 0.25)',
-          border: '1px solid #9B9FB0',
-          borderColor: '#9B9FB0'
-        }
-      },
-      snackbar: {
-        background: '#051039',
-        text: '#FFFFFF',
-        action: '#98e1f1',
-        actionHover: {
-          fill: '#7BACFF',
-          opacity: 0.2
+        MuiToggleButton: {
+          styleOverrides: {
+            root: variantsToClassName(buttonVariants(geowebColors.buttons))
+          }
         }
       }
-    }; // 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));
+    /* *
+     * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var lightTheme = createTheme({
+      paletteType: 'light',
+      geowebColors: colors$1,
+      elevations: elevations$1
+    });
+    var darkTheme = createTheme({
+      paletteType: 'dark',
+      geowebColors: colors,
+      elevations: elevations
+    });
+
+    /* *
+     * 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)
+     * */
+    exports.ThemeTypes = void 0;
+
+    (function (ThemeTypes) {
+      ThemeTypes["DARK_THEME"] = "darkTheme";
+      ThemeTypes["LIGHT_THEME"] = "lightTheme";
+    })(exports.ThemeTypes || (exports.ThemeTypes = {}));
 
     var ThemeContext = /*#__PURE__*/React__namespace.createContext({
       toggleTheme: undefined,
@@ -2992,10 +3245,14 @@
     exports.Visibility = Visibility;
     exports.VisibilityOff = VisibilityOff;
     exports.WebAssetOff = WebAssetOff;
+    exports.colorsLight = colors$1;
+    exports.createShadows = createShadows;
+    exports.createTheme = createTheme;
     exports.darkTheme = darkTheme;
     exports.dragHandlePath = dragHandlePath;
-    exports.gwButtonVariants = gwButtonVariants;
+    exports.elevationsLight = elevations$1;
     exports.lightTheme = lightTheme;
+    exports.parseColors = parseColors;
     exports.useThemeContext = useThemeContext;
 
     Object.defineProperty(exports, '__esModule', { value: true });