@opengeoweb/theme 2.1.3 → 2.2.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@material-ui/core'), require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@material-ui/core', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.core, global.React));
-})(this, (function (exports, core, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.material, global.React));
+})(this, (function (exports, material, React) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -79,6 +79,91 @@
         return ar;
     }
 
+    /* *
+     * 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, _a) {
+        var _b;
+
+        var variant = _a.props.variant,
+            style = _a.style;
+        return __assign(__assign({}, variants), (_b = {}, _b["&." + variant] = style, _b));
+      }, {});
+    };
+    var buttonVariants = function buttonVariants(buttons) {
+      return gwButtonVariants.map(function (variant) {
+        return {
+          props: {
+            variant: variant
+          },
+          style: buttonStyle(buttons[variant])
+        };
+      });
+    };
+
     var hex2rgba = function hex2rgba(hex, alpha) {
       if (alpha === void 0) {
         alpha = 1;
@@ -134,9 +219,9 @@
     };
     var BORDER_RADIUS = 3;
     var createTheme = function createTheme(paletteType, geowebColors, shadows) {
-      return core.createMuiTheme({
+      return material.createTheme({
         palette: {
-          type: paletteType,
+          mode: paletteType,
           secondary: {
             main: geowebColors.typographyAndIcons.iconLinkActive
           },
@@ -157,243 +242,311 @@
           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 " + 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 " + geowebColors.typographyAndIcons.iconLinkActive
+                }
               }
             }
           },
           MuiRadio: {
-            root: {
-              color: geowebColors.typographyAndIcons.iconLinkActive
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.Mui-disabled': {
+                  color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
+                },
+                '&.Mui-checked': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                }
+              }
+            }
+          },
+          MuiCheckbox: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.Mui-disabled': {
+                  color: 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: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
+            styleOverrides: {
+              head: {
+                borderBottom: 'none',
+                fontSize: '0.875rem',
+                fontWeight: 400
               },
-              '&:last-child': {
-                borderRightColor: geowebColors.cards.cardContainerBorder,
-                borderRadius: "0px " + BORDER_RADIUS + "px " + 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: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
+                },
+                '&:last-child': {
+                  borderRightColor: geowebColors.cards.cardContainerBorder,
+                  borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
+                }
               }
             }
           },
           MuiTabs: {
-            root: {
-              position: 'relative',
-              '&:after': {
-                content: '""',
-                position: 'absolute',
-                bottom: 0,
-                height: 1,
-                width: '100%',
-                zIndex: 0,
-                backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+            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
-              },
-              '&.Mui-disabled': {
-                backgroundColor: geowebColors.textInputField.disabled.rgba
-              }
-            },
-            underline: {
-              '&:after': {
-                borderBottom: 'transparent'
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.textInputField["default"].rgba,
+                '&.Mui-focused': {
+                  backgroundColor: geowebColors.textInputField.active.rgba
+                },
+                '&.Mui-disabled': {
+                  backgroundColor: geowebColors.textInputField.disabled.rgba
+                }
               },
-              '&.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
+                }
               }
             }
           }
@@ -429,25 +582,161 @@
       },
       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'
+          }
         },
-        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'
+          }
         },
-        primaryActive: {
-          fill: '#186DFF'
+        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'
+          }
         },
-        flatMouseover: {
-          fill: '#E3E4E7'
+        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'
+          }
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
+        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'
+          }
         },
-        disabled: {
-          fill: '#E8E5E5'
+        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'
+          }
         },
-        surfaceIconDefault: {
-          fill: '#F5F5F5'
+        focusDefault: {
+          outline: 'solid 2px #419cfe'
         }
       },
       typographyAndIcons: {
@@ -653,7 +942,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#767676',
+          color: '#707070',
           opacity: 1
         }
       }
@@ -675,7 +964,7 @@
 
     var geowebColors = __assign({}, colors$1);
 
-    var GWTheme = core.createMuiTheme({
+    var GWTheme = material.createTheme({
       palette: {
         secondary: {
           main: '#0075a9'
@@ -744,140 +1033,218 @@
           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))
+          }
         }
       }
     });
@@ -910,25 +1277,161 @@
       },
       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'
+          }
         },
-        primaryActive: {
-          fill: '#186DFF'
+        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'
+          }
         },
-        flatMouseover: {
-          fill: '#242424'
+        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'
+          }
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
+        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'
+          }
         },
-        disabled: {
-          fill: '#303030'
+        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'
+          }
         },
-        surfaceIconDefault: {
-          fill: '#2B2B2B'
+        focusDefault: {
+          outline: 'solid 2px #419cfe'
         }
       },
       typographyAndIcons: {
@@ -1134,7 +1637,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#909090',
+          color: '#B0B0B0',
           opacity: 1
         }
       }
@@ -1182,9 +1685,9 @@
           toggleTheme: toggleTheme,
           isDark: isDark
         }
-      }, /*#__PURE__*/React__namespace.createElement(core.ThemeProvider, {
+      }, /*#__PURE__*/React__namespace.createElement(material.ThemeProvider, {
         theme: currentTheme
-      }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(core.CssBaseline, null), children));
+      }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(material.CssBaseline, null), children));
     };
     var useThemeContext = function useThemeContext() {
       return React__namespace.useContext(ThemeContext);
@@ -1196,10 +1699,12 @@
           theme = _b === void 0 ? lightTheme : _b,
           _c = _a.disableCssBaseline,
           disableCssBaseline = _c === void 0 ? false : _c;
-      return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
+      return /*#__PURE__*/React__namespace.createElement(material.StyledEngineProvider, {
+        injectFirst: true
+      }, /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
         theme: theme,
         disableCssBaseline: disableCssBaseline
-      }, children);
+      }, children));
     }; // Wrapper for storybook stories with GWTheme. Will be deprecated
 
     var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
@@ -1218,6 +1723,7 @@
     exports.ThemeWrapper = ThemeWrapper;
     exports.ThemeWrapperOldTheme = ThemeWrapperOldTheme;
     exports.darkTheme = darkTheme;
+    exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.useThemeContext = useThemeContext;