@opengeoweb/theme 2.14.0 → 4.0.0

package/README.md

@@ -95,21 +95,20 @@ export const Wrapper: React.FC = () => (
 
 > **note** make sure to use the ThemeProvider in unit tests too, as they will fail otherwise
 
-2.  Use the style/color in your component. The theme palette can be found as `geowebColor` property inside the `theme.palette` of the MUI Theme
+2.  Use the style/color in your component. You can do this directly by passing an style object as `sx` props or create an object with styles which could be handy if you need to reuse styles. The theme palette can be found as `geowebColor` property inside the `theme.palette` of the MUI Theme
 
 ```javascript
-const useStyles = makeStyles((theme: Theme) => ({
+const styles = {
   button: {
-    border: theme.palette.geowebColors.buttons.flatMouseOver.border,
+    border: 'geowebColors.buttons.flatMouseOver.border',
     '&:hover': {
-      backgroundColor: theme.palette.geowebColors.buttons.flatMouseOver.fill,
+      backgroundColor: 'geowebColors.buttons.flatMouseOver.fill',
     },
   },
-}));
+};
 
 const MyButton: React.FC = () => {
-  const classes = useStyles();
-  return <Button className={classes.button}>content</Button>;
+  return <Button sx={styles.button}>content</Button>;
 };
 ```
 
@@ -327,11 +326,11 @@ Contains demo stories with MUI components. Every story is build with the `StoryW
 - The **Elevation** shows all elevations we currently have. These can be used for defining `box-shadow` for elements. If you want to use the elevation in code:
 
 ```javascript
-const useStyles = makeStyles((theme: Theme) => ({
+const styles = {
   header: {
-    boxShadow: theme.shadows[1], // elevation_01
+    boxShadow: 1, // elevation_01
   },
-}));
+};
 ```
 
 - The rest of the stories are for showing the MUI elements without any styling, other then the given theme styling.
@@ -449,7 +448,7 @@ This footer is only used for when the wrapper is resizable. Therefore it would m
 
 - do follow design names, if you feel the name has too much repeat in it or can be changed, ask [Didier](https://gitlab.com/didier.dezanet)! Same for missing colors .
 - do add links to design in code
-- do create shared components that are used in knmi-geoweb and reference application in the `shared` lib
+- do create shared components that are used in opengeoweb application in the `shared` lib
 - do add a ThemeProvider for components with a new theme styling. Otherwise unit tests will break
 - do discuss the library and the usage of it. If you think it can be approved please let us know!
 

package/index.esm.js

@@ -1237,6 +1237,46 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
             }
           }
         }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          switchBase: {
+            color: geowebColors.customSwitch.thumb,
+            '&.Mui-checked': {
+              color: geowebColors.customSwitch.thumb
+            },
+            '&.Mui-disabled': {
+              color: geowebColors.customSwitch.thumbDisabled
+            },
+            '&.Mui-checked.Mui-disabled': {
+              color: geowebColors.customSwitch.thumbDisabled
+            },
+            '&.Mui-checked+.MuiSwitch-track': {
+              backgroundColor: geowebColors.customSwitch.trackActive
+            },
+            '&.Mui-disabled+.MuiSwitch-track': {
+              backgroundColor: geowebColors.customSwitch.track
+            },
+            '&.Mui-checked.Mui-disabled+.MuiSwitch-track': {
+              backgroundColor: geowebColors.customSwitch.trackActive
+            }
+          },
+          track: {
+            backgroundColor: geowebColors.customSwitch.track,
+            opacity: '1 !important'
+          }
+        }
+      },
+      MuiSnackbarContent: {
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.snackbar.background,
+            color: geowebColors.snackbar.text,
+            fontSize: '16px',
+            letterSpacing: '0.44px',
+            borderRadius: '2px'
+          }
+        }
       }
     }
   });
@@ -1577,9 +1617,13 @@ var colors$1 = {
     thumb: '#F8F9F9',
     thumbDisabled: '#CCCCCC',
     mark: '#FFFFFF',
-    markDisabled: '#FFFFFF',
-    switchTrack: '#72BB23',
-    switchTrackDisabled: '#767676'
+    markDisabled: '#FFFFFF'
+  },
+  customSwitch: {
+    thumb: '#F8F9F9',
+    thumbDisabled: '#F5F5F5',
+    track: '#707070',
+    trackActive: '#186DFF'
   },
   syncGroups: {
     drawerOpen: {
@@ -1658,6 +1702,12 @@ var colors$1 = {
       fill: '#DFF2FD',
       border: '1px solid #0062E6'
     }
+  },
+  snackbar: {
+    background: '#051039',
+    text: '#FFFFFF',
+    action: '#98e1f1',
+    actionHover: '#494949'
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -2313,9 +2363,13 @@ var colors = {
     thumb: '#F8F9F9',
     thumbDisabled: '#5E5E5E',
     mark: '#FFFFFF',
-    markDisabled: '#303030',
-    switchTrack: '#72BB23',
-    switchTrackDisabled: '#E8E5E5'
+    markDisabled: '#303030'
+  },
+  customSwitch: {
+    thumb: '#F8F9F9',
+    thumbDisabled: '#F5F5F5',
+    track: '#BDBDBD',
+    trackActive: '#488BFD'
   },
   syncGroups: {
     drawerOpen: {
@@ -2394,6 +2448,12 @@ var colors = {
       fill: 'rgba(24, 109, 255, 0.25)',
       border: '1px solid #186DFF'
     }
+  },
+  snackbar: {
+    background: '#051039',
+    text: '#FFFFFF',
+    action: '#98e1f1',
+    actionHover: '#494949'
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

package/index.umd.js

@@ -1224,6 +1224,46 @@
                 }
               }
             }
+          },
+          MuiSwitch: {
+            styleOverrides: {
+              switchBase: {
+                color: geowebColors.customSwitch.thumb,
+                '&.Mui-checked': {
+                  color: geowebColors.customSwitch.thumb
+                },
+                '&.Mui-disabled': {
+                  color: geowebColors.customSwitch.thumbDisabled
+                },
+                '&.Mui-checked.Mui-disabled': {
+                  color: geowebColors.customSwitch.thumbDisabled
+                },
+                '&.Mui-checked+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.trackActive
+                },
+                '&.Mui-disabled+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.track
+                },
+                '&.Mui-checked.Mui-disabled+.MuiSwitch-track': {
+                  backgroundColor: geowebColors.customSwitch.trackActive
+                }
+              },
+              track: {
+                backgroundColor: geowebColors.customSwitch.track,
+                opacity: '1 !important'
+              }
+            }
+          },
+          MuiSnackbarContent: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.snackbar.background,
+                color: geowebColors.snackbar.text,
+                fontSize: '16px',
+                letterSpacing: '0.44px',
+                borderRadius: '2px'
+              }
+            }
           }
         }
       });
@@ -1564,9 +1604,13 @@
         thumb: '#F8F9F9',
         thumbDisabled: '#CCCCCC',
         mark: '#FFFFFF',
-        markDisabled: '#FFFFFF',
-        switchTrack: '#72BB23',
-        switchTrackDisabled: '#767676'
+        markDisabled: '#FFFFFF'
+      },
+      customSwitch: {
+        thumb: '#F8F9F9',
+        thumbDisabled: '#F5F5F5',
+        track: '#707070',
+        trackActive: '#186DFF'
       },
       syncGroups: {
         drawerOpen: {
@@ -1645,6 +1689,12 @@
           fill: '#DFF2FD',
           border: '1px solid #0062E6'
         }
+      },
+      snackbar: {
+        background: '#051039',
+        text: '#FFFFFF',
+        action: '#98e1f1',
+        actionHover: '#494949'
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -2284,9 +2334,13 @@
         thumb: '#F8F9F9',
         thumbDisabled: '#5E5E5E',
         mark: '#FFFFFF',
-        markDisabled: '#303030',
-        switchTrack: '#72BB23',
-        switchTrackDisabled: '#E8E5E5'
+        markDisabled: '#303030'
+      },
+      customSwitch: {
+        thumb: '#F8F9F9',
+        thumbDisabled: '#F5F5F5',
+        track: '#BDBDBD',
+        trackActive: '#488BFD'
       },
       syncGroups: {
         drawerOpen: {
@@ -2365,6 +2419,12 @@
           fill: 'rgba(24, 109, 255, 0.25)',
           border: '1px solid #186DFF'
         }
+      },
+      snackbar: {
+        background: '#051039',
+        text: '#FFFFFF',
+        action: '#98e1f1',
+        actionHover: '#494949'
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

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

@@ -98,8 +98,12 @@ export declare type GeowebColorPalette = {
         thumbDisabled: CSSProperties['color'];
         mark: CSSProperties['color'];
         markDisabled: CSSProperties['color'];
-        switchTrack: CSSProperties['color'];
-        switchTrackDisabled: CSSProperties['color'];
+    };
+    customSwitch: {
+        thumb: CSSProperties['color'];
+        thumbDisabled: CSSProperties['color'];
+        track: CSSProperties['color'];
+        trackActive: CSSProperties['color'];
     };
     syncGroups: {
         drawerOpen: CSSProperties;
@@ -131,6 +135,12 @@ export declare type GeowebColorPalette = {
         notification: CSSProperties['color'];
         notificationOutline: CSSProperties;
     };
+    snackbar: {
+        background: CSSProperties['color'];
+        text: CSSProperties['color'];
+        action: CSSProperties['color'];
+        actionHover: CSSProperties['color'];
+    };
 };
 export declare type Elevations = {
     [id: string]: string;

package/lib/stories/Snackbar.stories.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface SnackbarDemoProps {
+    open?: boolean;
+    handleClose?: () => void;
+}
+export declare const SnackbarDemo: React.FC<SnackbarDemoProps>;
+export declare const Snackbar: React.FC;
+export {};

package/lib/stories/Switch.stories.d.ts

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

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

@@ -16,6 +16,8 @@ export { TextFields } from './TextField.stories';
 export { Breakpoints } from './Breakpoints.stories';
 export { Icons } from './Icons.stories';
 export { FormElementsGWTheme, FormElements } from './FormElements.stories';
+export { Switch } from './Switch.stories';
+export { Snackbar } from './Snackbar.stories';
 declare const _default: {
     title: string;
 };

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "2.14.0",
+  "version": "4.0.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,6 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^17.0.2",
-    "@mui/material": "^5.2.8",
-    "@mui/styles": "^5.2.3"
+    "@mui/material": "^5.2.8"
   }
 }