@opengeoweb/theme 2.2.0 → 2.4.0

package/index.esm.js

@@ -72,18 +72,30 @@ 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.");
 }
 
-var buttonStyle = function buttonStyle(button) {
+/* *
+ * 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',
-    padding: '12px 8px',
-    height: '40px',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: button["default"].borderColor,
-    borderRadius: '5px',
     // hover styling
     '&:hover': {
       backgroundColor: button.mouseOver.fill,
@@ -103,7 +115,17 @@ var buttonStyle = function buttonStyle(button) {
       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',
@@ -117,9 +139,9 @@ var buttonStyle = function buttonStyle(button) {
         fontSize: '26px'
       }
     }
-  };
+  });
 };
-var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+var variantsToClassName = function variantsToClassName(buttonVariants) {
   return buttonVariants.reduce(function (variants, _ref) {
     var variant = _ref.props.variant,
         style = _ref.style;
@@ -127,32 +149,14 @@ var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
   }, {});
 };
 var buttonVariants = function buttonVariants(buttons) {
-  return [{
-    props: {
-      variant: 'primary'
-    },
-    style: buttonStyle(buttons.primary)
-  }, {
-    props: {
-      variant: 'secondary'
-    },
-    style: buttonStyle(buttons.secondary)
-  }, {
-    props: {
-      variant: 'tertiary'
-    },
-    style: buttonStyle(buttons.tertiary)
-  }, {
-    props: {
-      variant: 'flat'
-    },
-    style: buttonStyle(buttons.flat)
-  }, {
-    props: {
-      variant: 'tool'
-    },
-    style: buttonStyle(buttons.tool)
-  }];
+  return gwButtonVariants.map(function (variant) {
+    return {
+      props: {
+        variant: variant
+      },
+      style: buttonStyle(buttons[variant])
+    };
+  });
 };
 
 var hex2rgba = function hex2rgba(hex) {
@@ -204,8 +208,24 @@ var createShadows = function createShadows(elevations) {
   });
 };
 var BORDER_RADIUS = 3;
+var breakpoints = {
+  mobile: 0,
+  tablet: 768,
+  desktop: 1024,
+  dekstopHD: 1440,
+  dekstopHDWide: 1920
+};
 var createTheme = function createTheme(paletteType, geowebColors, shadows) {
   return createTheme$1({
+    breakpoints: {
+      values: {
+        xs: breakpoints.mobile,
+        sm: breakpoints.tablet,
+        md: breakpoints.desktop,
+        lg: breakpoints.dekstopHD,
+        xl: breakpoints.dekstopHDWide
+      }
+    },
     palette: {
       mode: paletteType,
       secondary: {
@@ -234,7 +254,13 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       },
       MuiToggleButton: {
         styleOverrides: {
-          root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+          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: {
@@ -243,17 +269,16 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       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',
@@ -404,13 +429,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: {
@@ -445,54 +480,82 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
           }
         }
       },
-      // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
       MuiAlert: {
         styleOverrides: {
           standardError: {
-            border: '1px solid #c00000',
+            border: geowebColors.functional.errorOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fff0ea'
+            backgroundColor: geowebColors.functional.errorOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.error,
+              opacity: 1
+            }
           },
           standardWarning: {
-            border: '1px solid #ffa800',
+            border: geowebColors.functional.warningOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fff8eb'
+            backgroundColor: geowebColors.functional.warningOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.warning,
+              opacity: 1
+            }
           },
           standardInfo: {
-            border: '1px solid #0062e6',
+            border: geowebColors.functional.notificationOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#eaf3ff'
+            backgroundColor: geowebColors.functional.notificationOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.notification,
+              opacity: 1
+            }
           },
           standardSuccess: {
-            border: '1px solid #72bb23',
+            border: geowebColors.functional.successOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fcffeb'
+            backgroundColor: geowebColors.functional.successOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.success,
+              opacity: 1
+            }
           },
           action: {
-            color: '#0075a9'
+            color: geowebColors.buttons.tertiary["default"].color
           },
           message: {
             fontSize: '14px',
             lineHeight: 1.43,
             letterSpacing: '0.25px',
-            color: '#051039'
+            color: geowebColors.typographyAndIcons.text
           }
         }
       },
+      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'
@@ -694,23 +757,35 @@ var colors$1 = {
         borderColor: 'transparent'
       }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
-    },
-    primaryActive: {
-      fill: '#186DFF'
-    },
-    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: {
@@ -743,7 +818,8 @@ var colors$1 = {
     }
   },
   greys: {
-    accessible: '#767676'
+    accessible: '#767676',
+    accessibleLight: '#C5C5C5'
   },
   cards: {
     cardContainer: '#FFFFFF',
@@ -824,6 +900,10 @@ var colors$1 = {
       fill: '#767676',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -863,10 +943,6 @@ var colors$1 = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     tableRowDefaultText: {
       color: '#051039',
       opacity: 0.87,
@@ -876,13 +952,6 @@ var colors$1 = {
       fill: '#FFFFFF',
       border: '1px solid #EEEEEE'
     },
-    tableRowMouseover: {
-      fill: '#051039',
-      opacity: 0.07
-    },
-    tableRowDisabledIcon: {
-      fill: '#767676'
-    },
     tableRowDisabledText: {
       color: '#767676',
       opacity: 0.87,
@@ -919,6 +988,32 @@ var colors$1 = {
       color: '#707070',
       opacity: 1
     }
+  },
+  functional: {
+    success: '#72BB23',
+    successOutline: {
+      fill: '#FCFFEB',
+      border: ' 1px solid #72BB23'
+    },
+    error: '#C00000',
+    errorOutline: {
+      fill: '#F9E8EA',
+      border: '1px solid #C00000'
+    },
+    warning: '#FFA800',
+    warningOutline: {
+      fill: '#FFF8EB',
+      border: '1px solid #FFA800'
+    },
+    warningHighlight: {
+      fill: '#FFA800',
+      opacity: 0.2
+    },
+    notification: '#0062E6',
+    notificationOutline: {
+      fill: '#DFF2FD',
+      border: '1px solid #0062E6'
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -1227,6 +1322,14 @@ var GWTheme = createTheme$1({
           maxWidth: '1280px'
         }
       }
+    },
+    MuiButton: {
+      variants: buttonVariants(geowebColors.buttons)
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: variantsToClassName(buttonVariants(geowebColors.buttons))
+      }
     }
   }
 });
@@ -1412,23 +1515,35 @@ var colors = {
         borderColor: 'transparent'
       }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
-    },
-    primaryActive: {
-      fill: '#186DFF'
-    },
-    flatMouseover: {
-      fill: '#494949'
+    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: {
@@ -1461,7 +1576,8 @@ var colors = {
     }
   },
   greys: {
-    accessible: '#A2A2A2'
+    accessible: '#A2A2A2',
+    accessibleLight: '#6F6F6F'
   },
   cards: {
     cardContainer: '#303030',
@@ -1542,6 +1658,10 @@ var colors = {
       fill: '#A2A2A2',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -1581,10 +1701,6 @@ var colors = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#C5C5C5',
-      opacity: 1
-    },
     tableRowDefaultText: {
       color: '#FFFFFF',
       opacity: 0.87,
@@ -1594,13 +1710,6 @@ var colors = {
       fill: '#303030',
       border: '1px solid #404040'
     },
-    tableRowMouseover: {
-      fill: '#000000',
-      opacity: 0.15
-    },
-    tableRowDisabledIcon: {
-      fill: '#A2A2A2'
-    },
     tableRowDisabledText: {
       color: '#909090',
       opacity: 0.87,
@@ -1637,6 +1746,32 @@ var colors = {
       color: '#B0B0B0',
       opacity: 1
     }
+  },
+  functional: {
+    success: '#72BB23',
+    successOutline: {
+      fill: 'rgba(114, 187, 35, 0.25)',
+      border: ' 1px solid #72BB23'
+    },
+    error: '#C00000',
+    errorOutline: {
+      fill: 'rgba(192, 0, 0, 0.25)',
+      border: '1px solid #C00000'
+    },
+    warning: '#FFA800',
+    warningOutline: {
+      fill: 'rgba(255, 168, 0, 0.25)',
+      border: '1px solid #FFA800'
+    },
+    warningHighlight: {
+      fill: '#FFA800',
+      opacity: 0.2
+    },
+    notification: '#186DFF',
+    notificationOutline: {
+      fill: 'rgba(24, 109, 255, 0.25)',
+      border: '1px solid #186DFF'
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 
@@ -1715,4 +1850,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 };

package/index.umd.js

@@ -79,18 +79,30 @@
         return ar;
     }
 
-    var buttonStyle = function buttonStyle(button) {
+    /* *
+     * 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',
-        padding: '12px 8px',
-        height: '40px',
-        borderStyle: 'solid',
-        borderWidth: '1px',
-        borderColor: button["default"].borderColor,
-        borderRadius: '5px',
         // hover styling
         '&:hover': {
           backgroundColor: button.mouseOver.fill,
@@ -110,7 +122,17 @@
           backgroundColor: button.disabled.fill,
           color: button.disabled.color,
           borderColor: button.disabled.borderColor
-        },
+        }
+      };
+    };
+    var buttonStyle = function buttonStyle(button) {
+      return __assign(__assign({}, defaultButtonStyle(button)), {
+        padding: '12px 8px',
+        height: '40px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: button["default"].borderColor,
+        borderRadius: '5px',
         // size styling
         '&[class*="sizeSmall"]': {
           fontSize: '12px',
@@ -124,9 +146,9 @@
             fontSize: '26px'
           }
         }
-      };
+      });
     };
-    var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+    var variantsToClassName = function variantsToClassName(buttonVariants) {
       return buttonVariants.reduce(function (variants, _a) {
         var _b;
 
@@ -136,32 +158,14 @@
       }, {});
     };
     var buttonVariants = function buttonVariants(buttons) {
-      return [{
-        props: {
-          variant: 'primary'
-        },
-        style: buttonStyle(buttons.primary)
-      }, {
-        props: {
-          variant: 'secondary'
-        },
-        style: buttonStyle(buttons.secondary)
-      }, {
-        props: {
-          variant: 'tertiary'
-        },
-        style: buttonStyle(buttons.tertiary)
-      }, {
-        props: {
-          variant: 'flat'
-        },
-        style: buttonStyle(buttons.flat)
-      }, {
-        props: {
-          variant: 'tool'
-        },
-        style: buttonStyle(buttons.tool)
-      }];
+      return gwButtonVariants.map(function (variant) {
+        return {
+          props: {
+            variant: variant
+          },
+          style: buttonStyle(buttons[variant])
+        };
+      });
     };
 
     var hex2rgba = function hex2rgba(hex, alpha) {
@@ -218,8 +222,24 @@
       });
     };
     var BORDER_RADIUS = 3;
+    var breakpoints = {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+      dekstopHD: 1440,
+      dekstopHDWide: 1920
+    };
     var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       return material.createTheme({
+        breakpoints: {
+          values: {
+            xs: breakpoints.mobile,
+            sm: breakpoints.tablet,
+            md: breakpoints.desktop,
+            lg: breakpoints.dekstopHD,
+            xl: breakpoints.dekstopHDWide
+          }
+        },
         palette: {
           mode: paletteType,
           secondary: {
@@ -248,7 +268,13 @@
           },
           MuiToggleButton: {
             styleOverrides: {
-              root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+              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: {
@@ -257,17 +283,16 @@
           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',
@@ -418,13 +443,23 @@
             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: {
@@ -459,54 +494,82 @@
               }
             }
           },
-          // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
           MuiAlert: {
             styleOverrides: {
               standardError: {
-                border: '1px solid #c00000',
+                border: geowebColors.functional.errorOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fff0ea'
+                backgroundColor: geowebColors.functional.errorOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.error,
+                  opacity: 1
+                }
               },
               standardWarning: {
-                border: '1px solid #ffa800',
+                border: geowebColors.functional.warningOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fff8eb'
+                backgroundColor: geowebColors.functional.warningOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.warning,
+                  opacity: 1
+                }
               },
               standardInfo: {
-                border: '1px solid #0062e6',
+                border: geowebColors.functional.notificationOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#eaf3ff'
+                backgroundColor: geowebColors.functional.notificationOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.notification,
+                  opacity: 1
+                }
               },
               standardSuccess: {
-                border: '1px solid #72bb23',
+                border: geowebColors.functional.successOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fcffeb'
+                backgroundColor: geowebColors.functional.successOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.success,
+                  opacity: 1
+                }
               },
               action: {
-                color: '#0075a9'
+                color: geowebColors.buttons.tertiary["default"].color
               },
               message: {
                 fontSize: '14px',
                 lineHeight: 1.43,
                 letterSpacing: '0.25px',
-                color: '#051039'
+                color: geowebColors.typographyAndIcons.text
               }
             }
           },
+          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'
@@ -708,23 +771,35 @@
             borderColor: 'transparent'
           }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
-        },
-        primaryActive: {
-          fill: '#186DFF'
-        },
-        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: {
@@ -757,7 +832,8 @@
         }
       },
       greys: {
-        accessible: '#767676'
+        accessible: '#767676',
+        accessibleLight: '#C5C5C5'
       },
       cards: {
         cardContainer: '#FFFFFF',
@@ -838,6 +914,10 @@
           fill: '#767676',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -877,10 +957,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         tableRowDefaultText: {
           color: '#051039',
           opacity: 0.87,
@@ -890,13 +966,6 @@
           fill: '#FFFFFF',
           border: '1px solid #EEEEEE'
         },
-        tableRowMouseover: {
-          fill: '#051039',
-          opacity: 0.07
-        },
-        tableRowDisabledIcon: {
-          fill: '#767676'
-        },
         tableRowDisabledText: {
           color: '#767676',
           opacity: 0.87,
@@ -933,6 +1002,32 @@
           color: '#707070',
           opacity: 1
         }
+      },
+      functional: {
+        success: '#72BB23',
+        successOutline: {
+          fill: '#FCFFEB',
+          border: ' 1px solid #72BB23'
+        },
+        error: '#C00000',
+        errorOutline: {
+          fill: '#F9E8EA',
+          border: '1px solid #C00000'
+        },
+        warning: '#FFA800',
+        warningOutline: {
+          fill: '#FFF8EB',
+          border: '1px solid #FFA800'
+        },
+        warningHighlight: {
+          fill: '#FFA800',
+          opacity: 0.2
+        },
+        notification: '#0062E6',
+        notificationOutline: {
+          fill: '#DFF2FD',
+          border: '1px solid #0062E6'
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -1225,6 +1320,14 @@
               maxWidth: '1280px'
             }
           }
+        },
+        MuiButton: {
+          variants: buttonVariants(geowebColors.buttons)
+        },
+        MuiToggleButton: {
+          styleOverrides: {
+            root: variantsToClassName(buttonVariants(geowebColors.buttons))
+          }
         }
       }
     });
@@ -1383,23 +1486,35 @@
             borderColor: 'transparent'
           }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
-        },
-        primaryActive: {
-          fill: '#186DFF'
-        },
-        flatMouseover: {
-          fill: '#494949'
+        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: {
@@ -1432,7 +1547,8 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2'
+        accessible: '#A2A2A2',
+        accessibleLight: '#6F6F6F'
       },
       cards: {
         cardContainer: '#303030',
@@ -1513,6 +1629,10 @@
           fill: '#A2A2A2',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -1552,10 +1672,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#C5C5C5',
-          opacity: 1
-        },
         tableRowDefaultText: {
           color: '#FFFFFF',
           opacity: 0.87,
@@ -1565,13 +1681,6 @@
           fill: '#303030',
           border: '1px solid #404040'
         },
-        tableRowMouseover: {
-          fill: '#000000',
-          opacity: 0.15
-        },
-        tableRowDisabledIcon: {
-          fill: '#A2A2A2'
-        },
         tableRowDisabledText: {
           color: '#909090',
           opacity: 0.87,
@@ -1608,6 +1717,32 @@
           color: '#B0B0B0',
           opacity: 1
         }
+      },
+      functional: {
+        success: '#72BB23',
+        successOutline: {
+          fill: 'rgba(114, 187, 35, 0.25)',
+          border: ' 1px solid #72BB23'
+        },
+        error: '#C00000',
+        errorOutline: {
+          fill: 'rgba(192, 0, 0, 0.25)',
+          border: '1px solid #C00000'
+        },
+        warning: '#FFA800',
+        warningOutline: {
+          fill: 'rgba(255, 168, 0, 0.25)',
+          border: '1px solid #FFA800'
+        },
+        warningHighlight: {
+          fill: '#FFA800',
+          opacity: 0.2
+        },
+        notification: '#186DFF',
+        notificationOutline: {
+          fill: 'rgba(24, 109, 255, 0.25)',
+          border: '1px solid #186DFF'
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 
@@ -1691,6 +1826,7 @@
     exports.ThemeWrapper = ThemeWrapper;
     exports.ThemeWrapperOldTheme = ThemeWrapperOldTheme;
     exports.darkTheme = darkTheme;
+    exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.useThemeContext = useThemeContext;
 

package/lib/components/Story/StoryHeader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface StoryHeaderProps {
+    title: string;
+}
+export declare const StoryHeader: React.FC<StoryHeaderProps>;
+export default StoryHeader;

package/lib/components/Story/index.d.ts

@@ -0,0 +1 @@
+export * from './StoryHeader';

package/lib/components/Theme/buttonStyles.d.ts

@@ -1,5 +1,6 @@
-import { ComponentsVariants, CSSInterpolation } from '@mui/material';
+import { ComponentsVariants, CSSInterpolation, CSSObject } from '@mui/material';
 import { ButtonStyles, ButtonStyle } from './types';
+export declare const defaultButtonStyle: (button: ButtonStyle) => CSSObject;
 export declare const buttonStyle: (button: ButtonStyle) => CSSInterpolation;
-export declare const toggleButtonStyle: (buttonVariants: ComponentsVariants['MuiButton']) => CSSInterpolation;
+export declare const variantsToClassName: (buttonVariants: ComponentsVariants['MuiButton']) => CSSInterpolation;
 export declare const buttonVariants: (buttons: ButtonStyles) => ComponentsVariants['MuiButton'];

package/lib/components/Theme/types.d.ts

@@ -2,6 +2,8 @@
 interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
+export declare const gwButtonVariants: readonly ["primary", "secondary", "tertiary", "flat", "tool", "boxed"];
+export declare type ButtonVariant = typeof gwButtonVariants[number];
 export interface ButtonStyle {
     default: CSSProperties;
     mouseOver: CSSProperties;
@@ -15,12 +17,8 @@ export interface ButtonStyles {
     tertiary: ButtonStyle;
     flat: ButtonStyle;
     tool: ButtonStyle;
-    primaryMouseover: CSSProperties;
-    primaryActive: CSSProperties;
-    flatMouseover: CSSProperties;
+    boxed: ButtonStyle;
     focusDefault: CSSProperties;
-    disabled: CSSProperties;
-    surfaceIconDefault: CSSProperties;
 }
 export declare type GeowebColorPalette = {
     background: {
@@ -51,6 +49,7 @@ export declare type GeowebColorPalette = {
     };
     greys: {
         accessible: CSSProperties['color'];
+        accessibleLight: CSSProperties['color'];
     };
     cards: {
         cardContainer: CSSProperties['color'];
@@ -77,6 +76,7 @@ export declare type GeowebColorPalette = {
         timelineNightTime: CSSProperties;
         timelineTimelineSurface: CSSProperties;
         timelineMonthChangeDash: CSSProperties;
+        timelineSelectionBackground: CSSProperties;
         timeScaleText: CSSProperties;
         timeScalePointer: CSSProperties;
         timeScaleHorizontalScale: CSSProperties;
@@ -100,11 +100,8 @@ export declare type GeowebColorPalette = {
         drawerOpen: CSSProperties;
     };
     layerManager: {
-        tableRowDefaultIcon: CSSProperties;
         tableRowDefaultText: CSSProperties;
         tableRowDefaultCardContainer: CSSProperties;
-        tableRowMouseover: CSSProperties;
-        tableRowDisabledIcon: CSSProperties;
         tableRowDisabledText: CSSProperties;
         tableRowDisabledCardContainer: CSSProperties;
     };
@@ -118,6 +115,17 @@ export declare type GeowebColorPalette = {
         captionError: CSSProperties;
         captionDisabled: CSSProperties;
     };
+    functional: {
+        success: CSSProperties['color'];
+        successOutline: CSSProperties;
+        error: CSSProperties['color'];
+        errorOutline: CSSProperties;
+        warning: CSSProperties['color'];
+        warningOutline: CSSProperties;
+        warningHighlight: CSSProperties;
+        notification: CSSProperties['color'];
+        notificationOutline: CSSProperties;
+    };
 };
 export declare type Elevations = {
     [id: string]: string;
@@ -137,6 +145,7 @@ declare module '@mui/material/Button' {
         tertiary: true;
         flat: true;
         tool: true;
+        boxed: true;
     }
 }
 export {};

package/lib/components/Theme/utils.d.ts

@@ -4,4 +4,11 @@ import { Elevations, GeowebColorPalette } from './types';
 export declare const hex2rgba: (hex: string, alpha?: number) => string;
 export declare const parseColors: (colors: GeowebColorPalette) => GeowebColorPalette;
 export declare const createShadows: (elevations: Elevations) => Shadows;
+export declare const breakpoints: {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+    dekstopHD: number;
+    dekstopHDWide: number;
+};
 export declare const createTheme: (paletteType: PaletteMode, geowebColors: GeowebColorPalette, shadows: Shadows) => Theme;

package/lib/stories/Breakpoints.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BreakpointDemo: React.FC;
+export declare const Breakpoints: React.FC;

package/lib/stories/IconButton.stories.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const IconButtonDemo: React.FC;
+export declare const IconButtons: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/stories/MenuItem.stories.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const MenuItemDemo: React.FC;
+export declare const MenuItem: () => React.ReactElement;

package/lib/stories/TextField.stories.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const TextFieldDemo: React.FC;
+export declare const TextFields: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/stories/index.stories.d.ts

@@ -10,6 +10,10 @@ export { Typography, TypographyGWTheme } from './Typography.stories';
 export { Tooltips } from './Tooltip.stories';
 export { Buttons } from './Button.stories';
 export { ToggleButtons } from './ToggleButton.stories';
+export { IconButtons } from './IconButton.stories';
+export { MenuItem } from './MenuItem.stories';
+export { TextFields } from './TextField.stories';
+export { Breakpoints } from './Breakpoints';
 export { FormElementsGWTheme, FormElements } from './FormElements.stories';
 declare const _default: {
     title: string;

package/lib/stories/snapshots/IconButton.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ButtonLight: () => React.ReactElement;
+export declare const ButtonDark: () => React.ReactElement;

package/lib/stories/snapshots/MenuItem.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const MenuItemLight: () => React.ReactElement;
+export declare const MenuItemDark: () => React.ReactElement;

package/lib/stories/snapshots/TextField.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const TextFieldLight: () => React.ReactElement;
+export declare const TextFieldDark: () => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,8 +12,8 @@
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "@mui/material": "^5.2.8",
     "react": "^17.0.2",
+    "@mui/material": "^5.2.8",
     "@mui/styles": "^5.2.3",
     "@mui/icons-material": "^5.2.5"
   }