@opengeoweb/theme 2.1.3 → 2.2.1

package/{theme.esm.js → index.esm.js}

@@ -1,4 +1,4 @@
-import { createMuiTheme, ThemeProvider as ThemeProvider$1, CssBaseline } from '@material-ui/core';
+import { createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, StyledEngineProvider } from '@mui/material';
 import * as React from 'react';
 
 function _defineProperty(obj, key, value) {
@@ -72,6 +72,89 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
+
+var buttonStyle = function buttonStyle(button) {
+  return {
+    // default styling
+    color: button["default"].color,
+    backgroundColor: button["default"].fill,
+    textTransform: 'capitalize',
+    padding: '12px 8px',
+    height: '40px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: button["default"].borderColor,
+    borderRadius: '5px',
+    // hover styling
+    '&:hover': {
+      backgroundColor: button.mouseOver.fill,
+      borderColor: button.mouseOver.borderColor
+    },
+    // active styling
+    '&.Mui-selected': {
+      backgroundColor: button.active.fill,
+      color: button.active.color,
+      borderColor: button.active.borderColor,
+      '&:hover': {
+        backgroundColor: button.activeMouseOver.fill
+      }
+    },
+    // disabled styling
+    '&.Mui-disabled': {
+      backgroundColor: button.disabled.fill,
+      color: button.disabled.color,
+      borderColor: button.disabled.borderColor
+    },
+    // size styling
+    '&[class*="sizeSmall"]': {
+      fontSize: '12px',
+      height: '32px',
+      lineHeight: '12px'
+    },
+    // icon styling
+    '& .MuiButton-startIcon': {
+      marginRight: '2px',
+      '& .MuiSvgIcon-root': {
+        fontSize: '26px'
+      }
+    }
+  };
+};
+var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+  return buttonVariants.reduce(function (variants, _ref) {
+    var variant = _ref.props.variant,
+        style = _ref.style;
+    return Object.assign(Object.assign({}, variants), _defineProperty({}, "&.".concat(variant), style));
+  }, {});
+};
+var buttonVariants = function buttonVariants(buttons) {
+  return gwButtonVariants.map(function (variant) {
+    return {
+      props: {
+        variant: variant
+      },
+      style: buttonStyle(buttons[variant])
+    };
+  });
+};
+
 var hex2rgba = function hex2rgba(hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 
@@ -122,9 +205,9 @@ var createShadows = function createShadows(elevations) {
 };
 var BORDER_RADIUS = 3;
 var createTheme = function createTheme(paletteType, geowebColors, shadows) {
-  return createMuiTheme({
+  return createTheme$1({
     palette: {
-      type: paletteType,
+      mode: paletteType,
       secondary: {
         main: geowebColors.typographyAndIcons.iconLinkActive
       },
@@ -145,243 +228,311 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
     },
     shadows: shadows,
-    overrides: {
-      MuiCssBaseline: {
-        '@global': {
-          body: {
-            fontSmoothing: 'auto'
-          }
+    components: {
+      MuiButton: {
+        variants: buttonVariants(geowebColors.buttons)
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
         }
       },
+      MuiCssBaseline: {
+        styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
+      },
       MuiMenuItem: {
-        root: {
-          fontSize: '0.875rem',
-          letterSpacing: '0.25px',
-          ':not(:last-child)&:after': {
-            content: '""',
-            position: 'absolute',
-            width: '100%',
-            height: 1,
-            background: geowebColors.greys.accessible,
-            bottom: 0,
-            left: 0,
-            opacity: 0.5
-          },
-          '&.Mui-selected': {
-            background: 'none',
-            boxShadow: "inset 4px 0px 0px 0px ".concat(geowebColors.typographyAndIcons.iconLinkActive)
+        styleOverrides: {
+          root: {
+            fontSize: '0.875rem',
+            letterSpacing: '0.25px',
+            ':not(:last-child)&:after': {
+              content: '""',
+              position: 'absolute',
+              width: '100%',
+              height: 1,
+              background: geowebColors.greys.accessible,
+              bottom: 0,
+              left: 0,
+              opacity: 0.5
+            },
+            '&.Mui-selected': {
+              background: 'none',
+              boxShadow: "inset 4px 0px 0px 0px ".concat(geowebColors.typographyAndIcons.iconLinkActive)
+            }
           }
         }
       },
       MuiRadio: {
-        root: {
-          color: geowebColors.typographyAndIcons.iconLinkActive
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.iconLinkActive,
+            '&.Mui-disabled': {
+              color: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled, "!important")
+            },
+            '&.Mui-checked': {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.iconLinkActive,
+            '&.Mui-disabled': {
+              color: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled, "!important")
+            },
+            '&.Mui-checked': {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            }
+          }
         }
       },
       MuiPaper: {
-        outlined: {
-          borderColor: geowebColors.cards.cardContainerBorder
+        styleOverrides: {
+          root: {
+            backgroundImage: 'unset'
+          },
+          outlined: {
+            borderColor: geowebColors.cards.cardContainerBorder
+          }
         }
       },
       MuiCard: {
-        root: {
-          backgroundColor: geowebColors.cards.cardContainer
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.cards.cardContainer
+          }
         }
       },
       MuiSlider: {
-        root: {
-          color: geowebColors.typographyAndIcons.iconLinkActive
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.iconLinkActive
+          }
         }
       },
       MuiTable: {
-        root: {
-          borderSpacing: '0 0.25rem',
-          borderCollapse: 'separate'
+        styleOverrides: {
+          root: {
+            borderSpacing: '0 0.25rem',
+            borderCollapse: 'separate'
+          }
         }
       },
       MuiTableRow: {
-        head: {
-          '&:hover': {
-            boxShadow: shadows[0]
-          }
-        },
-        root: {
-          transition: 'box-shadow 100ms ease-out',
-          boxShadow: shadows[0],
-          borderRadius: BORDER_RADIUS,
-          '&:hover': {
-            boxShadow: shadows[1]
+        styleOverrides: {
+          head: {
+            '&:hover': {
+              boxShadow: shadows[0]
+            }
           },
-          position: 'relative'
+          root: {
+            transition: 'box-shadow 100ms ease-out',
+            boxShadow: shadows[0],
+            borderRadius: BORDER_RADIUS,
+            '&:hover': {
+              boxShadow: shadows[1]
+            },
+            position: 'relative'
+          }
         }
       },
       MuiTableCell: {
-        head: {
-          borderBottom: 'none',
-          fontSize: '0.875rem',
-          fontWeight: 400
-        },
-        body: {
-          padding: 12,
-          fontWeight: 500,
-          backgroundColor: geowebColors.background.surface,
-          borderStyle: 'solid',
-          borderColor: 'transparent',
-          borderWidth: 1,
-          borderTopColor: geowebColors.cards.cardContainerBorder,
-          borderBottomColor: geowebColors.cards.cardContainerBorder,
-          '&:first-child': {
-            borderLeftColor: geowebColors.cards.cardContainerBorder,
-            borderRadius: "".concat(BORDER_RADIUS, "px 0px 0px ").concat(BORDER_RADIUS, "px")
+        styleOverrides: {
+          head: {
+            borderBottom: 'none',
+            fontSize: '0.875rem',
+            fontWeight: 400
           },
-          '&:last-child': {
-            borderRightColor: geowebColors.cards.cardContainerBorder,
-            borderRadius: "0px ".concat(BORDER_RADIUS, "px ").concat(BORDER_RADIUS, "px 0px")
+          body: {
+            padding: 12,
+            fontWeight: 500,
+            backgroundColor: geowebColors.background.surface,
+            borderStyle: 'solid',
+            borderColor: 'transparent',
+            borderWidth: 1,
+            borderTopColor: geowebColors.cards.cardContainerBorder,
+            borderBottomColor: geowebColors.cards.cardContainerBorder,
+            '&:first-child': {
+              borderLeftColor: geowebColors.cards.cardContainerBorder,
+              borderRadius: "".concat(BORDER_RADIUS, "px 0px 0px ").concat(BORDER_RADIUS, "px")
+            },
+            '&:last-child': {
+              borderRightColor: geowebColors.cards.cardContainerBorder,
+              borderRadius: "0px ".concat(BORDER_RADIUS, "px ").concat(BORDER_RADIUS, "px 0px")
+            }
           }
         }
       },
       MuiTabs: {
-        root: {
-          position: 'relative',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: 0,
-            height: 1,
-            width: '100%',
-            zIndex: 0,
-            backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+        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
           }
-        },
-        indicator: {
-          zIndex: 1,
-          backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
         }
       },
       MuiTab: {
-        root: {
-          textTransform: 'initial',
-          '&.Mui-selected': {
-            color: geowebColors.typographyAndIcons.iconLinkActive
-          },
-          '&:hover': {
-            opacity: 1,
-            color: geowebColors.typographyAndIcons.iconLinkActive,
-            backgroundColor: geowebColors.tab.mouseOver.rgba
+        styleOverrides: {
+          root: {
+            textTransform: 'initial',
+            '&.Mui-selected': {
+              color: geowebColors.typographyAndIcons.iconLinkActive
+            },
+            '&:hover': {
+              opacity: 1,
+              color: geowebColors.typographyAndIcons.iconLinkActive,
+              backgroundColor: geowebColors.tab.mouseOver.rgba
+            }
           }
         }
       },
       MuiListItem: {
-        root: {
-          color: geowebColors.typographyAndIcons.text
-        },
-        divider: {
-          borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.text,
+            fontSize: '14px'
+          },
+          divider: {
+            borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+          }
         }
       },
       MuiBackdrop: {
-        root: {
-          backgroundColor: geowebColors.backdrops.black.rgba
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.backdrops.black.rgba
+          }
         }
       },
       MuiTooltip: {
-        tooltip: {
-          backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
-          color: geowebColors.tooltips.tooltipText.color,
-          padding: '8px 12px',
-          fontSize: 16,
-          fontWeight: 400,
-          fontStretch: 'normal',
-          fontStyle: 'normal',
-          letterSpacing: 0.44,
-          lineHeight: 1.56
+        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: {
-        root: {
-          color: geowebColors.typographyAndIcons.textLinkActive
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.textLinkActive,
+            textDecoration: 'none',
+            '&:hover': {
+              textDecoration: 'underline',
+              textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
+            }
+          }
         }
       },
       // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
       MuiAlert: {
-        standardError: {
-          border: '1px solid #c00000',
-          borderRadius: '0px',
-          backgroundColor: '#fff0ea'
-        },
-        standardWarning: {
-          border: '1px solid #ffa800',
-          borderRadius: '0px',
-          backgroundColor: '#fff8eb'
-        },
-        standardInfo: {
-          border: '1px solid #0062e6',
-          borderRadius: '0px',
-          backgroundColor: '#eaf3ff'
-        },
-        standardSuccess: {
-          border: '1px solid #72bb23',
-          borderRadius: '0px',
-          backgroundColor: '#fcffeb'
-        },
-        action: {
-          color: '#0075a9'
-        },
-        message: {
-          fontSize: '14px',
-          lineHeight: 1.43,
-          letterSpacing: '0.25px',
-          color: '#051039'
+        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'
+          }
         }
       },
       MuiFilledInput: {
-        root: {
-          backgroundColor: geowebColors.textInputField["default"].rgba,
-          '&.Mui-focused': {
-            backgroundColor: geowebColors.textInputField.active.rgba
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.textInputField["default"].rgba,
+            '&.Mui-focused': {
+              backgroundColor: geowebColors.textInputField.active.rgba
+            },
+            '&.Mui-disabled': {
+              backgroundColor: geowebColors.textInputField.disabled.rgba
+            }
           },
-          '&.Mui-disabled': {
-            backgroundColor: geowebColors.textInputField.disabled.rgba
-          }
-        },
-        underline: {
-          '&:after': {
-            borderBottom: 'transparent'
-          },
-          '&.Mui-disabled:before': {
-            borderBottomStyle: 'solid'
+          underline: {
+            '&:after': {
+              borderBottom: 'transparent'
+            },
+            '&.Mui-disabled:before': {
+              borderBottomStyle: 'solid'
+            }
           }
         }
       },
       MuiFormLabel: {
-        root: {
-          color: geowebColors.captions.captionStatus.color,
-          opacity: geowebColors.captions.captionStatus.opacity,
-          '&.Mui-focused': {
-            color: geowebColors.captions.captionInformation.color,
-            opacity: geowebColors.captions.captionInformation.opacity
-          },
-          '&.Mui-error': {
-            color: geowebColors.captions.captionError.color,
-            opacity: geowebColors.captions.captionError.opacity
-          },
-          '&.Mui-disabled': {
-            color: geowebColors.captions.captionDisabled.color,
-            opacity: geowebColors.captions.captionDisabled.opacity
+        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: {
-        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
+        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
+            }
           }
         }
       }
@@ -417,25 +568,161 @@ var colors$1 = {
   },
   buttons: {
     primary: {
-      fill: '#186DFF'
+      "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'
+      }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
+    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'
+      }
     },
-    primaryActive: {
-      fill: '#186DFF'
+    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'
+      }
     },
-    flatMouseover: {
-      fill: '#E3E4E7'
+    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'
+      }
     },
     focusDefault: {
       outline: 'solid 2px #419cfe'
-    },
-    disabled: {
-      fill: '#E8E5E5'
-    },
-    surfaceIconDefault: {
-      fill: '#F5F5F5'
     }
   },
   typographyAndIcons: {
@@ -641,7 +928,7 @@ var colors$1 = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#767676',
+      color: '#707070',
       opacity: 1
     }
   }
@@ -679,7 +966,7 @@ var lightTheme = createTheme('light', parseColors(colors$1), createShadows(eleva
  * */
 
 var geowebColors = Object.assign({}, colors$1);
-var GWTheme = createMuiTheme({
+var GWTheme = createTheme$1({
   palette: {
     secondary: {
       main: '#0075a9'
@@ -748,140 +1035,218 @@ var GWTheme = createMuiTheme({
       color: '0075a9'
     }
   },
-  overrides: {
+  components: {
     MuiTooltip: {
-      tooltip: {
-        borderRadius: '2px',
-        fontSize: '16px',
-        fontWeight: 'normal',
-        padding: '10px',
-        backgroundColor: '#232323'
+      styleOverrides: {
+        tooltip: {
+          borderRadius: '2px',
+          fontSize: '16px',
+          fontWeight: 'normal',
+          padding: '10px',
+          backgroundColor: '#232323'
+        }
       }
     },
     MuiIconButton: {
-      root: {
-        color: '#0075a9'
+      styleOverrides: {
+        root: {
+          color: '#0075a9'
+        }
       }
     },
     MuiCheckbox: {
-      root: {
-        color: '#0075a9'
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: '#CCCCCC!important'
+          },
+          '&.Mui-checked': {
+            color: '#0075a9'
+          }
+        }
       }
     },
     MuiSelect: {
-      icon: {
-        color: '#0075a9'
-      },
-      select: {
-        '&:focus': {
-          backgroundColor: 'rgba(0, 117, 169, 0.05)'
+      styleOverrides: {
+        icon: {
+          color: '#0075a9'
+        },
+        select: {
+          '&:focus': {
+            backgroundColor: 'rgba(0, 117, 169, 0.05)'
+          }
         }
       }
     },
     MuiAlert: {
-      standardError: {
-        border: '1px solid #c00000',
-        borderRadius: '0px',
-        backgroundColor: '#fff0ea'
-      },
-      standardWarning: {
-        border: '1px solid #ffa800',
-        borderRadius: '0px',
-        backgroundColor: '#fff8eb'
-      },
-      standardInfo: {
-        border: '1px solid #0062e6',
-        borderRadius: '0px',
-        backgroundColor: '#eaf3ff'
-      },
-      standardSuccess: {
-        border: '1px solid #72bb23',
-        borderRadius: '0px',
-        backgroundColor: '#fcffeb'
-      },
-      action: {
-        color: '#0075a9'
-      },
-      message: {
-        fontSize: '14px',
-        lineHeight: 1.43,
-        letterSpacing: '0.25px',
-        color: '#051039'
+      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: {
-      root: {
-        backgroundColor: '#ffffff',
-        minHeight: '30px'
-      },
-      scrollButtons: {
-        width: '20px'
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ffffff',
+          minHeight: '30px'
+        },
+        scrollButtons: {
+          width: '20px'
+        }
       }
     },
     MuiTab: {
-      root: {
-        minHeight: '30px',
-        textTransform: 'none',
-        minWidth: '76px',
-        '@media (min-width: 600px)': {
-          minWidth: '76px'
+      styleOverrides: {
+        root: {
+          minHeight: '30px',
+          textTransform: 'none',
+          minWidth: '76px',
+          '@media (min-width: 600px)': {
+            minWidth: '76px'
+          }
+        },
+        labelIcon: {
+          minHeight: '30px'
         }
-      },
-      labelIcon: {
-        minHeight: '30px'
       }
     },
     MuiListItem: {
-      root: {
-        '&$selected': {
-          backgroundColor: 'rgba(0, 117, 169, 0.15)',
-          borderLeft: '4px solid #0075a9',
+      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.10)'
+            backgroundColor: 'rgba(0, 117, 169, 0.15)'
           }
         }
-      },
-      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)'
+            }
+          },
+          '&:hover': {
+            backgroundColor: 'rgba(0, 117, 169, 0.15)'
+          }
         }
       }
     },
     MuiFormLabel: {
-      root: {
-        color: 'rgba(5, 16, 57, 0.7)',
-        '&$focused': {
-          color: '#0075a9'
+      styleOverrides: {
+        root: {
+          color: 'rgba(5, 16, 57, 0.7)',
+          '&.Mui-focused': {
+            color: '#0075a9'
+          },
+          '&.Mui-error': {
+            color: '#d32f2f!important'
+          }
         }
       }
     },
     MuiOutlinedInput: {
-      root: {
-        '&$focused $notchedOutline': {
-          borderColor: '#0075a9'
+      styleOverrides: {
+        root: {
+          '&$focused $notchedOutline': {
+            borderColor: '#0075a9'
+          }
         }
       }
     },
     MuiFilledInput: {
-      root: {
-        backgroundColor: 'rgba(0, 117, 169, 0.05)',
-        color: '#051039',
-        '&$disabled': {
-          backgroundColor: 'transparent'
+      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'
+          }
         }
-      },
-      underline: {
-        '&$disabled:before': {
-          borderBottomStyle: 'none'
+      }
+    },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: '#CCCCCC!important'
+          },
+          '&.Mui-checked': {
+            color: '#0075a9'
+          }
         }
       }
     },
     MuiCardContent: {
-      root: {
-        '&:last-child': {
-          paddingBottom: 0
+      styleOverrides: {
+        root: {
+          '&:last-child': {
+            paddingBottom: 0
+          }
         }
       }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paperWidthLg: {
+          maxWidth: '1280px'
+        }
+      }
+    },
+    MuiButton: {
+      variants: buttonVariants(geowebColors.buttons)
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+      }
     }
   }
 });
@@ -941,25 +1306,161 @@ var colors = {
   },
   buttons: {
     primary: {
-      fill: '#186DFF'
+      "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: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
+    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: '#E5E5E5',
+        borderColor: '#E5E5E5'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: '#E5E5E5'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#488BFD',
+        borderColor: '#48A8FA'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#488BFD',
+        borderColor: '#488BFD'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
+    },
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#488BFD',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#488BFD',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
-    primaryActive: {
-      fill: '#186DFF'
+    tool: {
+      "default": {
+        fill: '#393939',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
-    flatMouseover: {
-      fill: '#242424'
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#E5E5E5',
+        borderColor: '#e5e5e5'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: '#e5e5e5'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
     focusDefault: {
       outline: 'solid 2px #419cfe'
-    },
-    disabled: {
-      fill: '#303030'
-    },
-    surfaceIconDefault: {
-      fill: '#2B2B2B'
     }
   },
   typographyAndIcons: {
@@ -1165,7 +1666,7 @@ var colors = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#909090',
+      color: '#B0B0B0',
       opacity: 1
     }
   }
@@ -1228,10 +1729,12 @@ var ThemeWrapper = function ThemeWrapper(_ref2) {
       theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
       _ref2$disableCssBasel = _ref2.disableCssBaseline,
       disableCssBaseline = _ref2$disableCssBasel === void 0 ? false : _ref2$disableCssBasel;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/React.createElement(StyledEngineProvider, {
+    injectFirst: true
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme,
     disableCssBaseline: disableCssBaseline
-  }, children);
+  }, children));
 }; // Wrapper for storybook stories with GWTheme. Will be deprecated
 
 var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
@@ -1244,4 +1747,4 @@ var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
   }, props), children);
 };
 
-export { GWTheme, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, darkTheme, lightTheme, useThemeContext };
+export { GWTheme, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, darkTheme, gwButtonVariants, lightTheme, useThemeContext };