@opengeoweb/theme 2.14.0 → 2.15.0

package/index.esm.js

@@ -1237,6 +1237,35 @@ 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'
+          }
+        }
       }
     }
   });
@@ -1577,9 +1606,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: {
@@ -2313,9 +2346,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: {

package/index.umd.js

@@ -1224,6 +1224,35 @@
                 }
               }
             }
+          },
+          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'
+              }
+            }
           }
         }
       });
@@ -1564,9 +1593,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: {
@@ -2284,9 +2317,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: {

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;

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,7 @@ 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';
 declare const _default: {
     title: string;
 };

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