@opengeoweb/theme 4.16.0 → 4.18.0

package/index.esm.js

@@ -904,7 +904,8 @@ var defaultButtonStyle = function defaultButtonStyle(button) {
     // hover styling
     '&:hover': {
       backgroundColor: button.mouseOver.fill,
-      borderColor: button.mouseOver.borderColor
+      borderColor: button.mouseOver.borderColor,
+      color: button.mouseOver.color
     },
     // active styling
     '&.Mui-selected': {
@@ -920,6 +921,14 @@ var defaultButtonStyle = function defaultButtonStyle(button) {
       backgroundColor: button.disabled.fill,
       color: button.disabled.color,
       borderColor: button.disabled.borderColor
+    },
+    // focus styling
+    '&.Mui-focusVisible': {
+      outline: button.focus.outline,
+      '&:not(.Mui-selected)': {
+        borderColor: 'transparent',
+        backgroundColor: button.mouseOver.fill
+      }
     }
   };
 };
@@ -965,6 +974,22 @@ var buttonVariants = function buttonVariants(buttons) {
   });
 };
 
+/* *
+ * 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) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 
@@ -1013,681 +1038,196 @@ var createShadows = function createShadows(elevations) {
     return value;
   });
 };
-var breakpoints = {
-  mobile: 0,
-  tablet: 768,
-  desktop: 1024,
-  dekstopHD: 1440,
-  dekstopHDWide: 1920
-};
-var createTheme = function createTheme(paletteType, geowebColors, shadows) {
-  return createTheme$1({
-    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)
+    secondary: {
+      "default": {
+        fill: '#374061',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
       },
-      MuiToggleButton: {
-        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
-        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 ".concat(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: "".concat(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: "".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")
-            }
-          }
-        }
+      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'
       },
-      MuiBackdrop: {
-        styleOverrides: {
-          root: {
-            backgroundColor: geowebColors.backdrops.black.rgba
-          }
-        }
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        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
-          }
-        }
+      disabled: {
+        fill: 'transparent',
+        color: '#626262',
+        borderColor: 'transparent'
       },
-      MuiLink: {
-        styleOverrides: {
-          root: {
-            color: geowebColors.typographyAndIcons.textLinkActive,
-            textDecoration: 'none',
-            '&:hover': {
-              textDecoration: 'underline',
-              textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
-            }
-          }
-        }
+      focus: focusButtonStyle$1
+    },
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        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
-          }
-        }
+      mouseOver: {
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: '#374061'
       },
-      MuiTextField: {
-        defaultProps: {
-          variant: 'filled'
-        }
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
       },
-      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'
-            }
-          }
-        }
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
       },
-      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
-            }
-          }
-        }
+      disabled: {
+        fill: 'transparent',
+        color: '#626262',
+        borderColor: 'transparent'
       },
-      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: Object.assign(Object.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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-
-var colors$1 = {
-  background: {
-    surface: '#FFFFFF',
-    surfaceApp: '#F5F5F5',
-    surfaceBrowser: '#CFCFCF'
-  },
-  brand: {
-    brand: '#FFFFFF'
-  },
-  buttons: {
-    primary: {
-      "default": {
-        fill: '#186DFF',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      mouseOver: {
-        fill: '#1047B0',
-        color: '#FFFFFF',
-        borderColor: '#71A6FF'
-      },
-      active: {
-        fill: '#186DFF',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      activeMouseOver: {},
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
-    },
-    secondary: {
-      "default": {
-        fill: '#0876b6',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      mouseOver: {
-        fill: '#064c84',
-        color: '#FFFFFF',
-        borderColor: '#3DA6FF'
-      },
-      active: {
-        fill: '#0876b6',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      activeMouseOver: {},
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
-    },
-    tertiary: {
-      "default": {
-        fill: 'transparent',
-        color: '#575F7A',
-        borderColor: '#575F7A'
-      },
-      mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: '#575F7A'
-      },
-      active: {
-        fill: 'transparent',
-        color: '#186DFF',
-        borderColor: '#186DFF'
-      },
-      activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#186DFF',
-        borderColor: '#186DFF'
-      },
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
-    },
-    flat: {
-      "default": {
-        fill: 'transparent',
-        color: '#575F7A',
-        borderColor: 'transparent'
-      },
-      mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: 'transparent'
-      },
-      active: {
-        fill: 'transparent',
-        color: '#186DFF',
-        borderColor: 'transparent'
-      },
-      activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#186DFF',
-        borderColor: 'transparent'
-      },
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
-    },
-    tool: {
-      "default": {
-        fill: '#ECEDEE',
-        color: '#575F7A',
-        borderColor: 'transparent'
-      },
-      mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: 'transparent'
-      },
-      active: {
-        fill: '#186DFF',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      activeMouseOver: {
-        fill: '#1047B0',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
-    },
-    boxed: {
-      "default": {
-        fill: 'transparent',
-        color: '#575F7A',
-        borderColor: '#575f7a'
-      },
-      mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: '#575f7a'
-      },
-      active: {
-        fill: '#186DFF',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      activeMouseOver: {
-        fill: '#1047B0',
-        color: '#FFFFFF',
-        borderColor: 'transparent'
-      },
-      disabled: {
-        fill: 'transparent',
-        color: '#707070',
-        borderColor: 'transparent'
-      }
+      focus: focusButtonStyle$1
     },
     icon: {
       "default": {
@@ -1696,7 +1236,7 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#E3E4E7',
+        fill: '#E0E8F5',
         color: '#374061',
         borderColor: 'transparent'
       },
@@ -1706,19 +1246,18 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#E0E8F5',
         color: '#186DFF',
         borderColor: 'transparent'
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
-    focusDefault: {
-      outline: 'solid 2px #419cfe'
-    }
+    focusDefault: focusButtonStyle$1
   },
   typographyAndIcons: {
     text: '#051039',
@@ -1728,7 +1267,7 @@ var colors$1 = {
     iconLinkDisabled: '#CCCCCC',
     textLinkActive: '#186DFF',
     buttonIconTertiaryFlat: '#575F7A',
-    inactiveText: '#707070'
+    inactiveText: '#626262'
   },
   textInputField: {
     "default": {
@@ -1760,7 +1299,8 @@ var colors$1 = {
   },
   cards: {
     cardContainer: '#FFFFFF',
-    cardContainerBorder: '#EEEEEE'
+    cardContainerBorder: '#EEEEEE',
+    cardContainerMouseOver: '#E0E8F5'
   },
   backdrops: {
     black: {
@@ -1859,7 +1399,7 @@ var colors$1 = {
     },
     legendNoDataBackground: {
       fill: '#575F7A',
-      opacity: '0.95'
+      opacity: 0.95
     }
   },
   customSlider: {
@@ -2001,7 +1541,6 @@ var elevations$1 = {
   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");
@@ -2016,304 +1555,543 @@ var lightTheme = createTheme('light', parseColors(colors$1), createShadows(eleva
  * 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)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-
-var geowebColors = Object.assign({}, colors$1);
-var GWTheme = createTheme$1({
-  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(_ref) {
+  var _ref$paletteType = _ref.paletteType,
+      paletteType = _ref$paletteType === void 0 ? 'light' : _ref$paletteType,
+      _ref$geowebColors = _ref.geowebColors,
+      defaultGeowebColors = _ref$geowebColors === void 0 ? colors$1 : _ref$geowebColors,
+      _ref$elevations = _ref.elevations,
+      defaultShadows = _ref$elevations === void 0 ? elevations$1 : _ref$elevations;
+  var geowebColors = parseColors(defaultGeowebColors);
+  var shadows = createShadows(defaultShadows);
+  return createTheme$1({
+    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: defaultButtonStyle(geowebColors.buttons.flat)
+        }
+      },
+      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 ".concat(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: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled)
+            },
+            '&.Mui-checked': {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          }
         }
-      }
-    },
-    MuiTabs: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#ffffff',
-          minHeight: '30px'
-        },
-        scrollButtons: {
-          width: '20px'
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.iconLinkActive,
+            '&.MuiCheckbox-root.Mui-disabled': {
+              color: geowebColors.typographyAndIcons.iconLinkDisabled
+            },
+            '&.Mui-checked': {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          }
         }
-      }
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          minHeight: '30px',
-          textTransform: 'none',
-          minWidth: '76px',
-          '@media (min-width: 600px)': {
-            minWidth: '76px'
+      },
+      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: "".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: {
+        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 ".concat(geowebColors.typographyAndIcons.iconLinkActive),
+              '&:hover': {
+                backgroundColor: geowebColors.cards.cardContainerMouseOver
+              }
+            },
+            '&.Mui-focusVisible': {
+              backgroundColor: geowebColors.cards.cardContainerMouseOver,
+              outline: geowebColors.buttons.focusDefault.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
+          }
+        }
+      },
+      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'
+            }
           }
-        },
-        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: Object.assign(Object.assign({}, defaultButtonStyle(geowebColors.buttons.primary)), {
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: 'geowebColors.buttons.primary.default.fill'
+            },
+            height: 32,
+            width: 32,
+            fontSize: 16,
+            borderRadius: '50%'
+          })
         }
-      }
-    },
-    MuiRadio: {
-      styleOverrides: {
-        root: {
-          '&.Mui-disabled': {
-            color: '#CCCCCC!important'
-          },
-          '&.Mui-checked': {
-            color: '#0075a9'
+      },
+      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'
+            }
           }
         }
-      }
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: {
-          '&:last-child': {
-            paddingBottom: 0
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            minHeight: '32px',
+            padding: '0px',
+            paddingRight: '5px'
           }
         }
       }
-    },
-    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");
@@ -2328,9 +2106,12 @@ var GWTheme = createTheme$1({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
+var focusButtonStyle = {
+  outline: 'solid 2px #419cfe'
+}; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
 
 var colors = {
   background: {
@@ -2361,96 +2142,100 @@ var colors = {
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     secondary: {
       "default": {
-        fill: '#0876b6',
-        color: '#FFFFFF',
+        fill: '#F8F9F9',
+        color: '#374061',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#064C84',
+        fill: '#1047B0',
         color: '#FFFFFF',
-        borderColor: '#3DA6FF'
+        borderColor: '#transparent'
       },
       active: {
-        fill: '#0876B6',
+        fill: '#186DFF',
         color: '#FFFFFF',
         borderColor: 'transparent'
       },
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     tertiary: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
-        borderColor: '#E5E5E5'
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
-        borderColor: '#E5E5E5'
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       active: {
         fill: 'transparent',
-        color: '#488BFD',
-        borderColor: '#48A8FA'
+        color: '#7BACFF',
+        borderColor: '#7BACFF'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#488BFD',
-        borderColor: '#488BFD'
+        fill: '#414751',
+        color: '#7BACFF',
+        borderColor: '#7BACFF'
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     flat: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
+        fill: '#414751',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       active: {
         fill: 'transparent',
-        color: '#488BFD',
+        color: '#7BACFF',
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#488BFD',
+        fill: '#414751',
+        color: '#7BACFF',
         borderColor: 'transparent'
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     tool: {
       "default": {
         fill: '#393939',
-        color: '#E5E5E5',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
+        fill: '#414751',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       active: {
@@ -2465,20 +2250,21 @@ var colors = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     boxed: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
-        borderColor: '#e5e5e5'
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
-        borderColor: '#e5e5e5'
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       active: {
         fill: '#186DFF',
@@ -2492,9 +2278,10 @@ var colors = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     icon: {
       "default": {
@@ -2503,7 +2290,7 @@ var colors = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
+        fill: '#414751',
         color: '#F8F9F9',
         borderColor: 'transparent'
       },
@@ -2513,7 +2300,7 @@ var colors = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#414751',
         color: '#488BFD',
         borderColor: 'transparent'
       },
@@ -2521,11 +2308,10 @@ var colors = {
         fill: 'transparent',
         color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
-    focusDefault: {
-      outline: 'solid 2px #419cfe'
-    }
+    focusDefault: focusButtonStyle
   },
   typographyAndIcons: {
     text: '#FFFFFF',
@@ -2535,7 +2321,7 @@ var colors = {
     iconLinkDisabled: '#5E5E5E',
     textLinkActive: '#488BFD',
     buttonIconTertiaryFlat: '#C5C5C5',
-    inactiveText: '#B0B0B0'
+    inactiveText: '#b4b4b4'
   },
   textInputField: {
     "default": {
@@ -2567,7 +2353,8 @@ var colors = {
   },
   cards: {
     cardContainer: '#303030',
-    cardContainerBorder: '#404040'
+    cardContainerBorder: '#404040',
+    cardContainerMouseOver: '#414751'
   },
   backdrops: {
     black: {
@@ -2582,7 +2369,7 @@ var colors = {
   screenManager: {
     activeWindow: '#242424',
     inactiveWindow: '#303030',
-    tabButtonHover: 'rgba(123, 172, 255, 0.12);'
+    tabButtonHover: '#414751'
   },
   timeSlider: {
     // player
@@ -2667,7 +2454,7 @@ var colors = {
     },
     legendNoDataBackground: {
       fill: '#575F7A',
-      opacity: '0.95'
+      opacity: 0.95
     }
   },
   customSlider: {
@@ -2707,109 +2494,447 @@ var colors = {
       opacity: 0.87,
       fontSize: 12
     },
-    tableRowDisabledCardContainer: {
-      fill: '#2B2B2B',
-      border: '1px solid #404040',
-      borderColor: '#404040'
-    }
-  },
-  tooltips: {
-    tooltipContainer: {
-      fill: '#232323',
-      opacity: 1
+    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
+    },
+    notification: '#186DFF',
+    notificationOutline: {
+      fill: 'rgba(24, 109, 255, 0.25)',
+      border: '1px solid #186DFF',
+      borderColor: '#186DFF'
+    },
+    summary: '#9595FF',
+    summaryOutline: {
+      fill: 'rgba(131, 131, 242, 0.25)',
+      border: '1px solid #8383F2',
+      borderColor: '#8383F2'
+    },
+    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)'
+};
+
+/* *
+ * 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 geowebColors = Object.assign({}, colors$1);
+var GWTheme = createTheme$1({
+  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'
+    },
+    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'
+    }
+  },
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          borderRadius: '2px',
+          fontSize: '16px',
+          fontWeight: 'normal',
+          padding: '10px',
+          backgroundColor: '#232323'
+        }
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: '#0075a9'
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    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
+});
 
 var ThemeContext = /*#__PURE__*/React.createContext({
   toggleTheme: undefined,
@@ -2875,4 +3000,4 @@ var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
   }, props), children);
 };
 
-export { Add, Animation, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Menu, Minus, None, Notifications, Now, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, darkTheme, dragHandlePath, gwButtonVariants, lightTheme, useThemeContext };
+export { Add, Animation, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Menu, Minus, None, Notifications, Now, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, gwButtonVariants, lightTheme, parseColors, useThemeContext };