@opengeoweb/theme 2.13.0 → 3.0.0

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.13.0",
+  "version": "3.0.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {