@opengeoweb/theme 2.1.0 → 2.1.4

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) {
@@ -122,9 +122,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,193 +145,304 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
     },
     shadows: shadows,
-    overrides: {
+    components: {
       MuiCssBaseline: {
-        '@global': {
-          body: {
-            fontSmoothing: 'auto'
-          }
-        }
+        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: {
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.textInputField["default"].rgba,
+            '&.Mui-focused': {
+              backgroundColor: geowebColors.textInputField.active.rgba
+            },
+            '&.Mui-disabled': {
+              backgroundColor: geowebColors.textInputField.disabled.rgba
+            }
+          },
+          underline: {
+            '&:after': {
+              borderBottom: 'transparent'
+            },
+            '&.Mui-disabled:before': {
+              borderBottomStyle: 'solid'
+            }
+          }
+        }
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: {
+            color: geowebColors.captions.captionStatus.color,
+            opacity: geowebColors.captions.captionStatus.opacity,
+            '&.Mui-focused': {
+              color: geowebColors.captions.captionInformation.color,
+              opacity: geowebColors.captions.captionInformation.opacity
+            },
+            '&.Mui-error': {
+              color: geowebColors.captions.captionError.color,
+              opacity: geowebColors.captions.captionError.opacity
+            },
+            '&.Mui-disabled': {
+              color: geowebColors.captions.captionDisabled.color,
+              opacity: geowebColors.captions.captionDisabled.opacity
+            }
+          }
+        }
+      },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            color: geowebColors.captions.captionStatus.color,
+            opacity: geowebColors.captions.captionStatus.opacity,
+            '&.Mui-error': {
+              color: geowebColors.captions.captionError.color,
+              opacity: geowebColors.captions.captionError.opacity
+            },
+            '&.Mui-disabled': {
+              color: geowebColors.captions.captionDisabled.color,
+              opacity: geowebColors.captions.captionDisabled.opacity
+            }
+          }
         }
       }
     }
@@ -628,7 +739,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'
@@ -697,138 +808,208 @@ 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'
         }
       }
     }
@@ -899,7 +1080,7 @@ var colors = {
       fill: '#186DFF'
     },
     flatMouseover: {
-      fill: '#242424'
+      fill: '#494949'
     },
     focusDefault: {
       outline: 'solid 2px #419cfe'
@@ -1177,10 +1358,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) {