@opengeoweb/theme 4.18.0 → 4.19.1

package/index.esm.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, StyledEngineProvider } from '@mui/material';
+import { renderTimeViewClock } from '@mui/x-date-pickers';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -868,31 +869,6 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var ThemeTypes;
-
-(function (ThemeTypes) {
-  ThemeTypes["DARK_THEME"] = "darkTheme";
-  ThemeTypes["LIGHT_THEME"] = "lightTheme";
-})(ThemeTypes || (ThemeTypes = {}));
-
-var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
-
 var BORDER_RADIUS = 3;
 var defaultButtonStyle = function defaultButtonStyle(button) {
   return {
@@ -956,23 +932,44 @@ var buttonStyle = function buttonStyle(button) {
     }
   });
 };
-var variantsToClassName = function variantsToClassName(buttonVariants) {
-  return buttonVariants.reduce(function (variants, _ref) {
-    var variant = _ref.props.variant,
-        style = _ref.style;
-    return Object.assign(Object.assign({}, variants), _defineProperty({}, "&.".concat(variant), style));
-  }, {});
+var iconButtonStyle = function iconButtonStyle(button) {
+  return Object.assign(Object.assign({}, defaultButtonStyle(button)), {
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: button["default"].borderColor,
+    // size styling
+    '&[class*="sizeSmall"]': {
+      width: 24,
+      height: 24
+    },
+    '&[class*="sizeMedium"]': {
+      width: 32,
+      height: 32
+    },
+    '&[class*="sizeLarge"]': {
+      width: 40,
+      height: 40
+    }
+  });
 };
 var buttonVariants = function buttonVariants(buttons) {
-  return gwButtonVariants.map(function (variant) {
+  var stylingFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : buttonStyle;
+  return Object.keys(buttons).map(function (variant) {
     return {
       props: {
         variant: variant
       },
-      style: buttonStyle(buttons[variant])
+      style: stylingFn(buttons[variant])
     };
   });
 };
+var variantsToClassName = function variantsToClassName(buttonVariants) {
+  return buttonVariants.reduce(function (variants, _ref) {
+    var variant = _ref.props.variant,
+        style = _ref.style;
+    return Object.assign(Object.assign({}, variants), _defineProperty({}, "&.".concat(variant), style));
+  }, {});
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1256,8 +1253,93 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       focus: focusButtonStyle$1
+    }
+  },
+  iconButtons: {
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#E0E8F5',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#626262',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle$1
     },
-    focusDefault: focusButtonStyle$1
+    tool: {
+      "default": {
+        fill: '#ECEDEE',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#626262',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle$1
+    },
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#374061',
+        borderColor: '#374061'
+      },
+      mouseOver: {
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: '#374061'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#626262',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle$1
+    }
   },
   typographyAndIcons: {
     text: '#051039',
@@ -1294,7 +1376,7 @@ var colors$1 = {
     }
   },
   greys: {
-    accessible: '#767676',
+    accessible: '#626262',
     accessibleLight: '#C5C5C5'
   },
   cards: {
@@ -1627,7 +1709,7 @@ var createTheme = function createTheme(_ref) {
           focusRipple: false
         },
         styleOverrides: {
-          root: defaultButtonStyle(geowebColors.buttons.flat)
+          root: Object.assign(Object.assign({}, defaultButtonStyle(geowebColors.iconButtons.flat)), variantsToClassName(buttonVariants(geowebColors.iconButtons, iconButtonStyle)))
         }
       },
       MuiCssBaseline: {
@@ -1828,7 +1910,7 @@ var createTheme = function createTheme(_ref) {
             },
             '&.Mui-focusVisible': {
               backgroundColor: geowebColors.cards.cardContainerMouseOver,
-              outline: geowebColors.buttons.focusDefault.outline
+              outline: geowebColors.buttons.primary.focus.outline
             },
             ' .MuiListItemIcon-root': {
               minWidth: 40
@@ -1938,7 +2020,7 @@ var createTheme = function createTheme(_ref) {
               backgroundColor: geowebColors.textInputField.disabled.rgba
             },
             '&.Mui-error': {
-              '&:after': {
+              '&:before': {
                 borderColor: geowebColors.captions.captionError.color
               }
             },
@@ -2088,6 +2170,15 @@ var createTheme = function createTheme(_ref) {
             paddingRight: '5px'
           }
         }
+      },
+      MuiDesktopDateTimePicker: {
+        defaultProps: {
+          viewRenderers: {
+            hours: renderTimeViewClock,
+            minutes: renderTimeViewClock,
+            seconds: renderTimeViewClock
+          }
+        }
       }
     }
   });
@@ -2310,8 +2401,93 @@ var colors = {
         borderColor: 'transparent'
       },
       focus: focusButtonStyle
+    }
+  },
+  iconButtons: {
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#7BACFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#414751',
+        color: '#7BACFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
     },
-    focusDefault: focusButtonStyle
+    tool: {
+      "default": {
+        fill: '#393939',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      mouseOver: {
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    }
   },
   typographyAndIcons: {
     text: '#FFFFFF',
@@ -2348,7 +2524,7 @@ var colors = {
     }
   },
   greys: {
-    accessible: '#A2A2A2',
+    accessible: '#B4B4B4',
     accessibleLight: '#6F6F6F'
   },
   cards: {
@@ -2936,6 +3112,29 @@ var darkTheme = createTheme({
   elevations: elevations
 });
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var ThemeTypes;
+
+(function (ThemeTypes) {
+  ThemeTypes["DARK_THEME"] = "darkTheme";
+  ThemeTypes["LIGHT_THEME"] = "lightTheme";
+})(ThemeTypes || (ThemeTypes = {}));
+
 var ThemeContext = /*#__PURE__*/React.createContext({
   toggleTheme: undefined,
   isDark: undefined
@@ -3000,4 +3199,4 @@ var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
   }, props), children);
 };
 
-export { Add, Animation, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Menu, Minus, None, Notifications, Now, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, gwButtonVariants, lightTheme, parseColors, useThemeContext };
+export { Add, Animation, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Menu, Minus, None, Notifications, Now, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, lightTheme, parseColors, useThemeContext };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.React, global.material));
-})(this, (function (exports, React, material) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/x-date-pickers')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/x-date-pickers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.React, global.material, global.xDatePickers));
+})(this, (function (exports, React, material, xDatePickers) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -848,31 +848,6 @@
         Both: Both
     });
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    exports.ThemeTypes = void 0;
-
-    (function (ThemeTypes) {
-      ThemeTypes["DARK_THEME"] = "darkTheme";
-      ThemeTypes["LIGHT_THEME"] = "lightTheme";
-    })(exports.ThemeTypes || (exports.ThemeTypes = {}));
-
-    var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
-
     var BORDER_RADIUS = 3;
     var defaultButtonStyle = function defaultButtonStyle(button) {
       return {
@@ -936,6 +911,40 @@
         }
       });
     };
+    var iconButtonStyle = function iconButtonStyle(button) {
+      return __assign(__assign({}, defaultButtonStyle(button)), {
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: button["default"].borderColor,
+        // size styling
+        '&[class*="sizeSmall"]': {
+          width: 24,
+          height: 24
+        },
+        '&[class*="sizeMedium"]': {
+          width: 32,
+          height: 32
+        },
+        '&[class*="sizeLarge"]': {
+          width: 40,
+          height: 40
+        }
+      });
+    };
+    var buttonVariants = function buttonVariants(buttons, stylingFn) {
+      if (stylingFn === void 0) {
+        stylingFn = buttonStyle;
+      }
+
+      return Object.keys(buttons).map(function (variant) {
+        return {
+          props: {
+            variant: variant
+          },
+          style: stylingFn(buttons[variant])
+        };
+      });
+    };
     var variantsToClassName = function variantsToClassName(buttonVariants) {
       return buttonVariants.reduce(function (variants, _a) {
         var _b;
@@ -945,16 +954,6 @@
         return __assign(__assign({}, variants), (_b = {}, _b["&." + variant] = style, _b));
       }, {});
     };
-    var buttonVariants = function buttonVariants(buttons) {
-      return gwButtonVariants.map(function (variant) {
-        return {
-          props: {
-            variant: variant
-          },
-          style: buttonStyle(buttons[variant])
-        };
-      });
-    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1243,8 +1242,93 @@
             borderColor: 'transparent'
           },
           focus: focusButtonStyle$1
+        }
+      },
+      iconButtons: {
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#374061',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#E0E8F5',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle$1
+        },
+        tool: {
+          "default": {
+            fill: '#ECEDEE',
+            color: '#374061',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle$1
         },
-        focusDefault: focusButtonStyle$1
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#374061',
+            borderColor: '#374061'
+          },
+          mouseOver: {
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: '#374061'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#626262',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle$1
+        }
       },
       typographyAndIcons: {
         text: '#051039',
@@ -1281,7 +1365,7 @@
         }
       },
       greys: {
-        accessible: '#767676',
+        accessible: '#626262',
         accessibleLight: '#C5C5C5'
       },
       cards: {
@@ -1598,7 +1682,7 @@
               focusRipple: false
             },
             styleOverrides: {
-              root: defaultButtonStyle(geowebColors.buttons.flat)
+              root: __assign(__assign({}, defaultButtonStyle(geowebColors.iconButtons.flat)), variantsToClassName(buttonVariants(geowebColors.iconButtons, iconButtonStyle)))
             }
           },
           MuiCssBaseline: {
@@ -1799,7 +1883,7 @@
                 },
                 '&.Mui-focusVisible': {
                   backgroundColor: geowebColors.cards.cardContainerMouseOver,
-                  outline: geowebColors.buttons.focusDefault.outline
+                  outline: geowebColors.buttons.primary.focus.outline
                 },
                 ' .MuiListItemIcon-root': {
                   minWidth: 40
@@ -1909,7 +1993,7 @@
                   backgroundColor: geowebColors.textInputField.disabled.rgba
                 },
                 '&.Mui-error': {
-                  '&:after': {
+                  '&:before': {
                     borderColor: geowebColors.captions.captionError.color
                   }
                 },
@@ -2059,6 +2143,15 @@
                 paddingRight: '5px'
               }
             }
+          },
+          MuiDesktopDateTimePicker: {
+            defaultProps: {
+              viewRenderers: {
+                hours: xDatePickers.renderTimeViewClock,
+                minutes: xDatePickers.renderTimeViewClock,
+                seconds: xDatePickers.renderTimeViewClock
+              }
+            }
           }
         }
       });
@@ -2281,8 +2374,93 @@
             borderColor: 'transparent'
           },
           focus: focusButtonStyle
+        }
+      },
+      iconButtons: {
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#7BACFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#414751',
+            color: '#7BACFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
         },
-        focusDefault: focusButtonStyle
+        tool: {
+          "default": {
+            fill: '#393939',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
+        },
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
+          },
+          mouseOver: {
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B4B4B4',
+            borderColor: 'transparent'
+          },
+          focus: focusButtonStyle
+        }
       },
       typographyAndIcons: {
         text: '#FFFFFF',
@@ -2319,7 +2497,7 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2',
+        accessible: '#B4B4B4',
         accessibleLight: '#6F6F6F'
       },
       cards: {
@@ -2891,6 +3069,29 @@
       elevations: elevations
     });
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    exports.ThemeTypes = void 0;
+
+    (function (ThemeTypes) {
+      ThemeTypes["DARK_THEME"] = "darkTheme";
+      ThemeTypes["LIGHT_THEME"] = "lightTheme";
+    })(exports.ThemeTypes || (exports.ThemeTypes = {}));
+
     var ThemeContext = /*#__PURE__*/React__namespace.createContext({
       toggleTheme: undefined,
       isDark: undefined
@@ -3050,7 +3251,6 @@
     exports.darkTheme = darkTheme;
     exports.dragHandlePath = dragHandlePath;
     exports.elevationsLight = elevations$1;
-    exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.parseColors = parseColors;
     exports.useThemeContext = useThemeContext;

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

@@ -3,5 +3,21 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ButtonLight: () => React.ReactElement;
-export declare const ButtonDark: () => React.ReactElement;
+export declare const IconButtonLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const IconButtonDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/types.d.ts

@@ -7,8 +7,7 @@ export declare enum ThemeTypes {
     DARK_THEME = "darkTheme",
     LIGHT_THEME = "lightTheme"
 }
-export declare const gwButtonVariants: readonly ["primary", "secondary", "tertiary", "flat", "tool", "boxed", "icon"];
-export declare type ButtonVariant = typeof gwButtonVariants[number];
+export declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'flat' | 'tool' | 'boxed' | 'icon';
 export interface ButtonStyle {
     default: CSSProperties;
     mouseOver: CSSProperties;
@@ -17,16 +16,6 @@ export interface ButtonStyle {
     disabled: CSSProperties;
     focus: CSSProperties;
 }
-export interface ButtonStyles {
-    primary: ButtonStyle;
-    secondary: ButtonStyle;
-    tertiary: ButtonStyle;
-    flat: ButtonStyle;
-    tool: ButtonStyle;
-    boxed: ButtonStyle;
-    icon: ButtonStyle;
-    focusDefault: CSSProperties;
-}
 export declare type GeowebColorPalette = {
     background: {
         surface: CSSProperties['color'];
@@ -36,7 +25,20 @@ export declare type GeowebColorPalette = {
     brand: {
         brand: CSSProperties['color'];
     };
-    buttons: ButtonStyles;
+    buttons: {
+        primary: ButtonStyle;
+        secondary: ButtonStyle;
+        tertiary: ButtonStyle;
+        flat: ButtonStyle;
+        tool: ButtonStyle;
+        boxed: ButtonStyle;
+        icon: ButtonStyle;
+    };
+    iconButtons: {
+        flat: ButtonStyle;
+        tool: ButtonStyle;
+        boxed: ButtonStyle;
+    };
     typographyAndIcons: {
         text: CSSProperties['color'];
         icon: CSSProperties['color'];

package/lib/utils/buttonStyles.d.ts

@@ -1,7 +1,8 @@
-import { ComponentsVariants, CSSInterpolation, CSSObject } from '@mui/material';
-import { ButtonStyle, ButtonStyles } from '../types';
+import { ComponentsVariants, CSSObject } from '@mui/material';
+import { ButtonStyle } from '../types';
 export declare const BORDER_RADIUS = 3;
 export declare const defaultButtonStyle: (button: ButtonStyle) => CSSObject;
-export declare const buttonStyle: (button: ButtonStyle) => CSSInterpolation;
-export declare const variantsToClassName: (buttonVariants: ComponentsVariants['MuiButton']) => CSSInterpolation;
-export declare const buttonVariants: (buttons: ButtonStyles) => ComponentsVariants['MuiButton'];
+export declare const buttonStyle: (button: ButtonStyle) => CSSObject;
+export declare const iconButtonStyle: (button: ButtonStyle) => CSSObject;
+export declare const buttonVariants: (buttons: Record<string, ButtonStyle>, stylingFn?: (button: ButtonStyle) => CSSObject) => ComponentsVariants['MuiButton'];
+export declare const variantsToClassName: (buttonVariants: ComponentsVariants['MuiButton']) => CSSObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "4.18.0",
+  "version": "4.19.1",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,6 +13,7 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^18.2.0",
-    "@mui/material": "^5.10.8"
+    "@mui/material": "^5.12.0",
+    "@mui/x-date-pickers": "^6.2.1"
   }
 }