@opengeoweb/theme 2.2.1 → 2.4.1

package/index.esm.js

@@ -90,18 +90,12 @@ function _nonIterableRest() {
  * */
 var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
 
-var buttonStyle = function buttonStyle(button) {
+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,
@@ -121,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',
@@ -135,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;
@@ -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'
@@ -755,7 +818,8 @@ var colors$1 = {
     }
   },
   greys: {
-    accessible: '#767676'
+    accessible: '#767676',
+    accessibleLight: '#C5C5C5'
   },
   cards: {
     cardContainer: '#FFFFFF',
@@ -836,6 +900,10 @@ var colors$1 = {
       fill: '#767676',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -875,10 +943,6 @@ var colors$1 = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     tableRowDefaultText: {
       color: '#051039',
       opacity: 0.87,
@@ -888,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,
@@ -931,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
 
@@ -1245,7 +1328,7 @@ var GWTheme = createTheme$1({
     },
     MuiToggleButton: {
       styleOverrides: {
-        root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+        root: variantsToClassName(buttonVariants(geowebColors.buttons))
       }
     }
   }
@@ -1493,7 +1576,8 @@ var colors = {
     }
   },
   greys: {
-    accessible: '#A2A2A2'
+    accessible: '#A2A2A2',
+    accessibleLight: '#6F6F6F'
   },
   cards: {
     cardContainer: '#303030',
@@ -1574,6 +1658,10 @@ var colors = {
       fill: '#A2A2A2',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -1613,10 +1701,6 @@ var colors = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#C5C5C5',
-      opacity: 1
-    },
     tableRowDefaultText: {
       color: '#FFFFFF',
       opacity: 0.87,
@@ -1626,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,
@@ -1669,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
 

package/index.umd.js

@@ -97,18 +97,12 @@
      * */
     var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
 
-    var buttonStyle = function buttonStyle(button) {
+    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,
@@ -128,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',
@@ -142,9 +146,9 @@
             fontSize: '26px'
           }
         }
-      };
+      });
     };
-    var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
+    var variantsToClassName = function variantsToClassName(buttonVariants) {
       return buttonVariants.reduce(function (variants, _a) {
         var _b;
 
@@ -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'
@@ -769,7 +832,8 @@
         }
       },
       greys: {
-        accessible: '#767676'
+        accessible: '#767676',
+        accessibleLight: '#C5C5C5'
       },
       cards: {
         cardContainer: '#FFFFFF',
@@ -850,6 +914,10 @@
           fill: '#767676',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -889,10 +957,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         tableRowDefaultText: {
           color: '#051039',
           opacity: 0.87,
@@ -902,13 +966,6 @@
           fill: '#FFFFFF',
           border: '1px solid #EEEEEE'
         },
-        tableRowMouseover: {
-          fill: '#051039',
-          opacity: 0.07
-        },
-        tableRowDisabledIcon: {
-          fill: '#767676'
-        },
         tableRowDisabledText: {
           color: '#767676',
           opacity: 0.87,
@@ -945,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
 
@@ -1243,7 +1326,7 @@
         },
         MuiToggleButton: {
           styleOverrides: {
-            root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+            root: variantsToClassName(buttonVariants(geowebColors.buttons))
           }
         }
       }
@@ -1464,7 +1547,8 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2'
+        accessible: '#A2A2A2',
+        accessibleLight: '#6F6F6F'
       },
       cards: {
         cardContainer: '#303030',
@@ -1545,6 +1629,10 @@
           fill: '#A2A2A2',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -1584,10 +1672,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#C5C5C5',
-          opacity: 1
-        },
         tableRowDefaultText: {
           color: '#FFFFFF',
           opacity: 0.87,
@@ -1597,13 +1681,6 @@
           fill: '#303030',
           border: '1px solid #404040'
         },
-        tableRowMouseover: {
-          fill: '#000000',
-          opacity: 0.15
-        },
-        tableRowDisabledIcon: {
-          fill: '#A2A2A2'
-        },
         tableRowDisabledText: {
           color: '#909090',
           opacity: 0.87,
@@ -1640,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
 

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

@@ -49,6 +49,7 @@ export declare type GeowebColorPalette = {
     };
     greys: {
         accessible: CSSProperties['color'];
+        accessibleLight: CSSProperties['color'];
     };
     cards: {
         cardContainer: CSSProperties['color'];
@@ -75,6 +76,7 @@ export declare type GeowebColorPalette = {
         timelineNightTime: CSSProperties;
         timelineTimelineSurface: CSSProperties;
         timelineMonthChangeDash: CSSProperties;
+        timelineSelectionBackground: CSSProperties;
         timeScaleText: CSSProperties;
         timeScalePointer: CSSProperties;
         timeScaleHorizontalScale: CSSProperties;
@@ -98,11 +100,8 @@ export declare type GeowebColorPalette = {
         drawerOpen: CSSProperties;
     };
     layerManager: {
-        tableRowDefaultIcon: CSSProperties;
         tableRowDefaultText: CSSProperties;
         tableRowDefaultCardContainer: CSSProperties;
-        tableRowMouseover: CSSProperties;
-        tableRowDisabledIcon: CSSProperties;
         tableRowDisabledText: CSSProperties;
         tableRowDisabledCardContainer: CSSProperties;
     };
@@ -116,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;

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.1",
+  "version": "2.4.1",
   "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"
   }