@opengeoweb/theme 2.2.1 → 2.3.0

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;
@@ -234,7 +238,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 +253,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 +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: {
@@ -479,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'
@@ -755,7 +787,8 @@ var colors$1 = {
     }
   },
   greys: {
-    accessible: '#767676'
+    accessible: '#767676',
+    accessibleLight: '#C5C5C5'
   },
   cards: {
     cardContainer: '#FFFFFF',
@@ -875,10 +908,6 @@ var colors$1 = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     tableRowDefaultText: {
       color: '#051039',
       opacity: 0.87,
@@ -892,9 +921,6 @@ var colors$1 = {
       fill: '#051039',
       opacity: 0.07
     },
-    tableRowDisabledIcon: {
-      fill: '#767676'
-    },
     tableRowDisabledText: {
       color: '#767676',
       opacity: 0.87,
@@ -1245,7 +1271,7 @@ var GWTheme = createTheme$1({
     },
     MuiToggleButton: {
       styleOverrides: {
-        root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+        root: variantsToClassName(buttonVariants(geowebColors.buttons))
       }
     }
   }
@@ -1493,7 +1519,8 @@ var colors = {
     }
   },
   greys: {
-    accessible: '#A2A2A2'
+    accessible: '#A2A2A2',
+    accessibleLight: '#6F6F6F'
   },
   cards: {
     cardContainer: '#303030',
@@ -1613,10 +1640,6 @@ var colors = {
     }
   },
   layerManager: {
-    tableRowDefaultIcon: {
-      fill: '#C5C5C5',
-      opacity: 1
-    },
     tableRowDefaultText: {
       color: '#FFFFFF',
       opacity: 0.87,
@@ -1630,9 +1653,6 @@ var colors = {
       fill: '#000000',
       opacity: 0.15
     },
-    tableRowDisabledIcon: {
-      fill: '#A2A2A2'
-    },
     tableRowDisabledText: {
       color: '#909090',
       opacity: 0.87,

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;
 
@@ -248,7 +252,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 +267,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 +427,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: {
@@ -493,20 +512,33 @@
               }
             }
           },
+          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 +801,8 @@
         }
       },
       greys: {
-        accessible: '#767676'
+        accessible: '#767676',
+        accessibleLight: '#C5C5C5'
       },
       cards: {
         cardContainer: '#FFFFFF',
@@ -889,10 +922,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         tableRowDefaultText: {
           color: '#051039',
           opacity: 0.87,
@@ -906,9 +935,6 @@
           fill: '#051039',
           opacity: 0.07
         },
-        tableRowDisabledIcon: {
-          fill: '#767676'
-        },
         tableRowDisabledText: {
           color: '#767676',
           opacity: 0.87,
@@ -1243,7 +1269,7 @@
         },
         MuiToggleButton: {
           styleOverrides: {
-            root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+            root: variantsToClassName(buttonVariants(geowebColors.buttons))
           }
         }
       }
@@ -1464,7 +1490,8 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2'
+        accessible: '#A2A2A2',
+        accessibleLight: '#6F6F6F'
       },
       cards: {
         cardContainer: '#303030',
@@ -1584,10 +1611,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#C5C5C5',
-          opacity: 1
-        },
         tableRowDefaultText: {
           color: '#FFFFFF',
           opacity: 0.87,
@@ -1601,9 +1624,6 @@
           fill: '#000000',
           opacity: 0.15
         },
-        tableRowDisabledIcon: {
-          fill: '#A2A2A2'
-        },
         tableRowDisabledText: {
           color: '#909090',
           opacity: 0.87,

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'];
@@ -98,11 +99,9 @@ export declare type GeowebColorPalette = {
         drawerOpen: CSSProperties;
     };
     layerManager: {
-        tableRowDefaultIcon: CSSProperties;
         tableRowDefaultText: CSSProperties;
         tableRowDefaultCardContainer: CSSProperties;
         tableRowMouseover: CSSProperties;
-        tableRowDisabledIcon: CSSProperties;
         tableRowDisabledText: CSSProperties;
         tableRowDisabledCardContainer: CSSProperties;
     };

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,9 @@ 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 { 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.3.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"
   }