@opengeoweb/theme 2.1.4 → 2.3.0

package/index.esm.js

@@ -72,6 +72,93 @@ 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 defaultButtonStyle = function defaultButtonStyle(button) {
+  return {
+    // default styling
+    color: button["default"].color,
+    backgroundColor: button["default"].fill,
+    textTransform: 'capitalize',
+    // 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
+    }
+  };
+};
+var buttonStyle = function buttonStyle(button) {
+  return Object.assign(Object.assign({}, defaultButtonStyle(button)), {
+    padding: '12px 8px',
+    height: '40px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: button["default"].borderColor,
+    borderRadius: '5px',
+    // size styling
+    '&[class*="sizeSmall"]': {
+      fontSize: '12px',
+      height: '32px',
+      lineHeight: '12px'
+    },
+    // icon styling
+    '& .MuiButton-startIcon': {
+      marginRight: '2px',
+      '& .MuiSvgIcon-root': {
+        fontSize: '26px'
+      }
+    }
+  });
+};
+var variantsToClassName = function variantsToClassName(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;
 
@@ -146,23 +233,36 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
     },
     shadows: shadows,
     components: {
+      MuiButton: {
+        variants: buttonVariants(geowebColors.buttons)
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: variantsToClassName(buttonVariants(geowebColors.buttons))
+        }
+      },
+      MuiIconButton: {
+        // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
+        styleOverrides: {
+          root: defaultButtonStyle(geowebColors.buttons.flat)
+        }
+      },
       MuiCssBaseline: {
         styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
       },
       MuiMenuItem: {
         styleOverrides: {
           root: {
+            minHeight: '48px!important',
             fontSize: '0.875rem',
             letterSpacing: '0.25px',
-            ':not(:last-child)&:after': {
-              content: '""',
-              position: 'absolute',
-              width: '100%',
-              height: 1,
-              background: geowebColors.greys.accessible,
-              bottom: 0,
-              left: 0,
-              opacity: 0.5
+            divider: {
+              borderBottomColor: geowebColors.greys.accessibleLight
+            },
+            li: {
+              '&:hover': {
+                backgroundColor: geowebColors.tab.mouseOver.rgba
+              }
             },
             '&.Mui-selected': {
               background: 'none',
@@ -313,13 +413,23 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
         styleOverrides: {
           root: {
             color: geowebColors.typographyAndIcons.text,
-            fontSize: '14px'
+            fontSize: '14px',
+            minHeight: '36px'
           },
           divider: {
             borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
           }
         }
       },
+      MuiListItemIcon: {
+        styleOverrides: {
+          root: {
+            color: geowebColors.typographyAndIcons.icon,
+            width: '24px',
+            height: '24px'
+          }
+        }
+      },
       MuiBackdrop: {
         styleOverrides: {
           root: {
@@ -388,20 +498,33 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
           }
         }
       },
+      MuiTextField: {
+        defaultProps: {
+          variant: 'filled'
+        }
+      },
       MuiFilledInput: {
         styleOverrides: {
           root: {
             backgroundColor: geowebColors.textInputField["default"].rgba,
             '&.Mui-focused': {
-              backgroundColor: geowebColors.textInputField.active.rgba
+              backgroundColor: geowebColors.textInputField.active.rgba,
+              '&:after': {
+                borderColor: 'transparent'
+              }
             },
             '&.Mui-disabled': {
               backgroundColor: geowebColors.textInputField.disabled.rgba
+            },
+            '&.Mui-error': {
+              '&:after': {
+                borderColor: geowebColors.captions.captionError.color
+              }
             }
           },
           underline: {
             '&:after': {
-              borderBottom: 'transparent'
+              borderWidth: '1px'
             },
             '&.Mui-disabled:before': {
               borderBottomStyle: 'solid'
@@ -477,25 +600,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'
+      }
     },
-    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: {
@@ -528,7 +787,8 @@ var colors$1 = {
     }
   },
   greys: {
-    accessible: '#767676'
+    accessible: '#767676',
+    accessibleLight: '#C5C5C5'
   },
   cards: {
     cardContainer: '#FFFFFF',
@@ -648,10 +908,6 @@ var colors$1 = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     tableRowDefaultText: {
       color: '#051039',
       opacity: 0.87,
@@ -665,9 +921,6 @@ var colors$1 = {
       fill: '#051039',
       opacity: 0.07
     },
-    tableRowDisabledIcon: {
-      fill: '#767676'
-    },
     tableRowDisabledText: {
       color: '#767676',
       opacity: 0.87,
@@ -701,7 +954,7 @@ var colors$1 = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#767676',
+      color: '#707070',
       opacity: 1
     }
   }
@@ -1012,6 +1265,14 @@ var GWTheme = createTheme$1({
           maxWidth: '1280px'
         }
       }
+    },
+    MuiButton: {
+      variants: buttonVariants(geowebColors.buttons)
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: variantsToClassName(buttonVariants(geowebColors.buttons))
+      }
     }
   }
 });
@@ -1071,25 +1332,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'
+      }
+    },
+    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'
+      }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
+    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'
+      }
     },
-    primaryActive: {
-      fill: '#186DFF'
+    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'
+      }
     },
-    flatMouseover: {
-      fill: '#494949'
+    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'
+      }
+    },
+    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: {
@@ -1122,7 +1519,8 @@ var colors = {
     }
   },
   greys: {
-    accessible: '#A2A2A2'
+    accessible: '#A2A2A2',
+    accessibleLight: '#6F6F6F'
   },
   cards: {
     cardContainer: '#303030',
@@ -1242,10 +1640,6 @@ var colors = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#C5C5C5',
-      opacity: 1
-    },
     tableRowDefaultText: {
       color: '#FFFFFF',
       opacity: 0.87,
@@ -1259,9 +1653,6 @@ var colors = {
       fill: '#000000',
       opacity: 0.15
     },
-    tableRowDisabledIcon: {
-      fill: '#A2A2A2'
-    },
     tableRowDisabledText: {
       color: '#909090',
       opacity: 0.87,
@@ -1295,7 +1686,7 @@ var colors = {
       opacity: 1
     },
     captionDisabled: {
-      color: '#909090',
+      color: '#B0B0B0',
       opacity: 1
     }
   }
@@ -1376,4 +1767,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 };