@opengeoweb/theme 3.0.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "3.0.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"
   }
 }