@opengeoweb/theme 4.15.1 → 4.17.0

package/index.esm.js

@@ -671,6 +671,12 @@ var ExitDomain = function ExitDomain(props) {
     transform: "translate(4 4)"
   }));
 };
+var Menu = function Menu(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    transform: "translate(6 6)",
+    d: "M0,9.27 L2.73,9.27 L2.73,12 L0,12 Z M0,4.64 L2.73,4.64 L2.73,7.37 L0,7.37 Z M0,0 L2.73,0 L2.73,2.73 L0,2.73 Z M5,9.27 L12,9.27 L12,12 L5,12 Z M5,4.64 L12,4.64 L12,7.37 L5,7.37 Z M5,0 L12,0 L12,2.73 L5,2.73 Z"
+  }));
+};
 var None = function None(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", {
     transform: "translate(3 3)"
@@ -786,6 +792,7 @@ var index = /*#__PURE__*/Object.freeze({
     CollapseMedium: CollapseMedium,
     CollapseSmall: CollapseSmall,
     ExitDomain: ExitDomain,
+    Menu: Menu,
     None: None,
     Both: Both
 });
@@ -886,16 +893,19 @@ var ThemeTypes;
 
 var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
 
+var BORDER_RADIUS = 3;
 var defaultButtonStyle = function defaultButtonStyle(button) {
   return {
     // default styling
     color: button["default"].color,
     backgroundColor: button["default"].fill,
     textTransform: 'capitalize',
+    borderRadius: BORDER_RADIUS,
     // hover styling
     '&:hover': {
       backgroundColor: button.mouseOver.fill,
-      borderColor: button.mouseOver.borderColor
+      borderColor: button.mouseOver.borderColor,
+      color: button.mouseOver.color
     },
     // active styling
     '&.Mui-selected': {
@@ -911,6 +921,12 @@ var defaultButtonStyle = function defaultButtonStyle(button) {
       backgroundColor: button.disabled.fill,
       color: button.disabled.color,
       borderColor: button.disabled.borderColor
+    },
+    // focus styling
+    '&.Mui-focusVisible:not(.Mui-selected)': {
+      outline: button.focus.outline,
+      borderColor: 'transparent',
+      backgroundColor: button.mouseOver.fill
     }
   };
 };
@@ -921,7 +937,7 @@ var buttonStyle = function buttonStyle(button) {
     borderStyle: 'solid',
     borderWidth: '1px',
     borderColor: button["default"].borderColor,
-    borderRadius: '5px',
+    borderRadius: BORDER_RADIUS,
     // size styling
     '&[class*="sizeSmall"]': {
       fontSize: '12px',
@@ -1004,7 +1020,6 @@ var createShadows = function createShadows(elevations) {
     return value;
   });
 };
-var BORDER_RADIUS = 3;
 var breakpoints = {
   mobile: 0,
   tablet: 768,
@@ -1047,15 +1062,24 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
     shadows: shadows,
     components: {
       MuiButton: {
-        variants: buttonVariants(geowebColors.buttons)
+        variants: buttonVariants(geowebColors.buttons),
+        defaultProps: {
+          focusRipple: false
+        }
       },
       MuiToggleButton: {
+        defaultProps: {
+          focusRipple: false
+        },
         styleOverrides: {
           root: variantsToClassName(buttonVariants(geowebColors.buttons))
         }
       },
       MuiIconButton: {
         // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
+        defaultProps: {
+          focusRipple: false
+        },
         styleOverrides: {
           root: defaultButtonStyle(geowebColors.buttons.flat)
         }
@@ -1243,6 +1267,29 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
           }
         }
       },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            '&:hover': {
+              backgroundColor: geowebColors.cards.cardContainerMouseOver
+            },
+            '&.Mui-selected': {
+              backgroundColor: geowebColors.cards.cardContainerMouseOver,
+              boxShadow: "inset 4px 0px 0px 0px ".concat(geowebColors.typographyAndIcons.iconLinkActive),
+              '&:hover': {
+                backgroundColor: geowebColors.cards.cardContainerMouseOver
+              }
+            },
+            '&.Mui-focusVisible': {
+              backgroundColor: geowebColors.cards.cardContainerMouseOver,
+              outline: geowebColors.buttons.focusDefault.outline
+            },
+            ' .MuiListItemIcon-root': {
+              minWidth: 40
+            }
+          }
+        }
+      },
       MuiBackdrop: {
         styleOverrides: {
           root: {
@@ -1457,7 +1504,8 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
             },
             height: 32,
             width: 32,
-            fontSize: 16
+            fontSize: 16,
+            borderRadius: '50%'
           })
         }
       },
@@ -1512,9 +1560,12 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
+var focusButtonStyle$1 = {
+  outline: 'solid 2px #419cfe'
+}; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
 
 var colors$1 = {
   background: {
@@ -1545,43 +1596,45 @@ var colors$1 = {
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     secondary: {
       "default": {
-        fill: '#0876b6',
+        fill: '#374061',
         color: '#FFFFFF',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#064c84',
+        fill: '#1047B0',
         color: '#FFFFFF',
-        borderColor: '#3DA6FF'
+        borderColor: 'transparent'
       },
       active: {
-        fill: '#0876b6',
+        fill: '#186DFF',
         color: '#FFFFFF',
         borderColor: 'transparent'
       },
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     tertiary: {
       "default": {
         fill: 'transparent',
-        color: '#575F7A',
-        borderColor: '#575F7A'
+        color: '#374061',
+        borderColor: '#374061'
       },
       mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: '#575F7A'
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: '#374061'
       },
       active: {
         fill: 'transparent',
@@ -1589,25 +1642,26 @@ var colors$1 = {
         borderColor: '#186DFF'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#E0E8F5',
         color: '#186DFF',
         borderColor: '#186DFF'
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     flat: {
       "default": {
         fill: 'transparent',
-        color: '#575F7A',
+        color: '#374061',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
+        fill: '#E0E8F5',
+        color: '#374061',
         borderColor: 'transparent'
       },
       active: {
@@ -1616,25 +1670,26 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#E0E8F5',
         color: '#186DFF',
         borderColor: 'transparent'
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     tool: {
       "default": {
         fill: '#ECEDEE',
-        color: '#575F7A',
+        color: '#374061',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
+        fill: '#E0E8F5',
+        color: '#374061',
         borderColor: 'transparent'
       },
       active: {
@@ -1649,20 +1704,21 @@ var colors$1 = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     boxed: {
       "default": {
         fill: 'transparent',
-        color: '#575F7A',
-        borderColor: '#575f7a'
+        color: '#374061',
+        borderColor: '#374061'
       },
       mouseOver: {
-        fill: '#E3E4E7',
-        color: '#575F7A',
-        borderColor: '#575f7a'
+        fill: '#E0E8F5',
+        color: '#374061',
+        borderColor: '#374061'
       },
       active: {
         fill: '#186DFF',
@@ -1676,9 +1732,10 @@ var colors$1 = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     icon: {
       "default": {
@@ -1687,7 +1744,7 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#E3E4E7',
+        fill: '#E0E8F5',
         color: '#374061',
         borderColor: 'transparent'
       },
@@ -1697,19 +1754,18 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#E0E8F5',
         color: '#186DFF',
         borderColor: 'transparent'
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
-    focusDefault: {
-      outline: 'solid 2px #419cfe'
-    }
+    focusDefault: focusButtonStyle$1
   },
   typographyAndIcons: {
     text: '#051039',
@@ -1719,7 +1775,7 @@ var colors$1 = {
     iconLinkDisabled: '#CCCCCC',
     textLinkActive: '#186DFF',
     buttonIconTertiaryFlat: '#575F7A',
-    inactiveText: '#707070'
+    inactiveText: '#626262'
   },
   textInputField: {
     "default": {
@@ -1751,7 +1807,8 @@ var colors$1 = {
   },
   cards: {
     cardContainer: '#FFFFFF',
-    cardContainerBorder: '#EEEEEE'
+    cardContainerBorder: '#EEEEEE',
+    cardContainerMouseOver: '#E0E8F5'
   },
   backdrops: {
     black: {
@@ -2319,9 +2376,12 @@ var GWTheme = createTheme$1({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
+var focusButtonStyle = {
+  outline: 'solid 2px #419cfe'
+}; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
 
 var colors = {
   background: {
@@ -2352,96 +2412,100 @@ var colors = {
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     secondary: {
       "default": {
-        fill: '#0876b6',
-        color: '#FFFFFF',
+        fill: '#F8F9F9',
+        color: '#374061',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#064C84',
+        fill: '#1047B0',
         color: '#FFFFFF',
-        borderColor: '#3DA6FF'
+        borderColor: '#transparent'
       },
       active: {
-        fill: '#0876B6',
+        fill: '#186DFF',
         color: '#FFFFFF',
         borderColor: 'transparent'
       },
       activeMouseOver: {},
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     tertiary: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
-        borderColor: '#E5E5E5'
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
-        borderColor: '#E5E5E5'
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       active: {
         fill: 'transparent',
-        color: '#488BFD',
-        borderColor: '#48A8FA'
+        color: '#7BACFF',
+        borderColor: '#7BACFF'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#488BFD',
-        borderColor: '#488BFD'
+        fill: '#414751',
+        color: '#7BACFF',
+        borderColor: '#7BACFF'
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     flat: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
+        fill: '#414751',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       active: {
         fill: 'transparent',
-        color: '#488BFD',
+        color: '#7BACFF',
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
-        color: '#488BFD',
+        fill: '#414751',
+        color: '#7BACFF',
         borderColor: 'transparent'
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     tool: {
       "default": {
         fill: '#393939',
-        color: '#E5E5E5',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
+        fill: '#414751',
+        color: '#F8F9F9',
         borderColor: 'transparent'
       },
       active: {
@@ -2456,20 +2520,21 @@ var colors = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     boxed: {
       "default": {
         fill: 'transparent',
-        color: '#E5E5E5',
-        borderColor: '#e5e5e5'
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       mouseOver: {
-        fill: '#494949',
-        color: '#E5E5E5',
-        borderColor: '#e5e5e5'
+        fill: '#414751',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
       },
       active: {
         fill: '#186DFF',
@@ -2483,9 +2548,10 @@ var colors = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     icon: {
       "default": {
@@ -2494,7 +2560,7 @@ var colors = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
+        fill: '#414751',
         color: '#F8F9F9',
         borderColor: 'transparent'
       },
@@ -2504,7 +2570,7 @@ var colors = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#414751',
         color: '#488BFD',
         borderColor: 'transparent'
       },
@@ -2512,11 +2578,10 @@ var colors = {
         fill: 'transparent',
         color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
-    focusDefault: {
-      outline: 'solid 2px #419cfe'
-    }
+    focusDefault: focusButtonStyle
   },
   typographyAndIcons: {
     text: '#FFFFFF',
@@ -2526,7 +2591,7 @@ var colors = {
     iconLinkDisabled: '#5E5E5E',
     textLinkActive: '#488BFD',
     buttonIconTertiaryFlat: '#C5C5C5',
-    inactiveText: '#B0B0B0'
+    inactiveText: '#b4b4b4'
   },
   textInputField: {
     "default": {
@@ -2558,7 +2623,8 @@ var colors = {
   },
   cards: {
     cardContainer: '#303030',
-    cardContainerBorder: '#404040'
+    cardContainerBorder: '#404040',
+    cardContainerMouseOver: '#414751'
   },
   backdrops: {
     black: {
@@ -2573,7 +2639,7 @@ var colors = {
   screenManager: {
     activeWindow: '#242424',
     inactiveWindow: '#303030',
-    tabButtonHover: 'rgba(123, 172, 255, 0.12);'
+    tabButtonHover: '#414751;'
   },
   timeSlider: {
     // player
@@ -2866,4 +2932,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, 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, darkTheme, dragHandlePath, gwButtonVariants, lightTheme, 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, darkTheme, dragHandlePath, gwButtonVariants, lightTheme, useThemeContext };

package/index.umd.js

@@ -722,6 +722,12 @@
         transform: "translate(4 4)"
       }));
     };
+    var Menu = function Menu(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
+        transform: "translate(6 6)",
+        d: "M0,9.27 L2.73,9.27 L2.73,12 L0,12 Z M0,4.64 L2.73,4.64 L2.73,7.37 L0,7.37 Z M0,0 L2.73,0 L2.73,2.73 L0,2.73 Z M5,9.27 L12,9.27 L12,12 L5,12 Z M5,4.64 L12,4.64 L12,7.37 L5,7.37 Z M5,0 L12,0 L12,2.73 L5,2.73 Z"
+      }));
+    };
     var None = function None(props) {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", {
         transform: "translate(3 3)"
@@ -837,6 +843,7 @@
         CollapseMedium: CollapseMedium,
         CollapseSmall: CollapseSmall,
         ExitDomain: ExitDomain,
+        Menu: Menu,
         None: None,
         Both: Both
     });
@@ -866,16 +873,19 @@
 
     var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
 
+    var BORDER_RADIUS = 3;
     var defaultButtonStyle = function defaultButtonStyle(button) {
       return {
         // default styling
         color: button["default"].color,
         backgroundColor: button["default"].fill,
         textTransform: 'capitalize',
+        borderRadius: BORDER_RADIUS,
         // hover styling
         '&:hover': {
           backgroundColor: button.mouseOver.fill,
-          borderColor: button.mouseOver.borderColor
+          borderColor: button.mouseOver.borderColor,
+          color: button.mouseOver.color
         },
         // active styling
         '&.Mui-selected': {
@@ -891,6 +901,12 @@
           backgroundColor: button.disabled.fill,
           color: button.disabled.color,
           borderColor: button.disabled.borderColor
+        },
+        // focus styling
+        '&.Mui-focusVisible:not(.Mui-selected)': {
+          outline: button.focus.outline,
+          borderColor: 'transparent',
+          backgroundColor: button.mouseOver.fill
         }
       };
     };
@@ -901,7 +917,7 @@
         borderStyle: 'solid',
         borderWidth: '1px',
         borderColor: button["default"].borderColor,
-        borderRadius: '5px',
+        borderRadius: BORDER_RADIUS,
         // size styling
         '&[class*="sizeSmall"]': {
           fontSize: '12px',
@@ -991,7 +1007,6 @@
         return value;
       });
     };
-    var BORDER_RADIUS = 3;
     var breakpoints = {
       mobile: 0,
       tablet: 768,
@@ -1034,15 +1049,24 @@
         shadows: shadows,
         components: {
           MuiButton: {
-            variants: buttonVariants(geowebColors.buttons)
+            variants: buttonVariants(geowebColors.buttons),
+            defaultProps: {
+              focusRipple: false
+            }
           },
           MuiToggleButton: {
+            defaultProps: {
+              focusRipple: false
+            },
             styleOverrides: {
               root: variantsToClassName(buttonVariants(geowebColors.buttons))
             }
           },
           MuiIconButton: {
             // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
+            defaultProps: {
+              focusRipple: false
+            },
             styleOverrides: {
               root: defaultButtonStyle(geowebColors.buttons.flat)
             }
@@ -1230,6 +1254,29 @@
               }
             }
           },
+          MuiListItemButton: {
+            styleOverrides: {
+              root: {
+                '&:hover': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver
+                },
+                '&.Mui-selected': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
+                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive,
+                  '&:hover': {
+                    backgroundColor: geowebColors.cards.cardContainerMouseOver
+                  }
+                },
+                '&.Mui-focusVisible': {
+                  backgroundColor: geowebColors.cards.cardContainerMouseOver,
+                  outline: geowebColors.buttons.focusDefault.outline
+                },
+                ' .MuiListItemIcon-root': {
+                  minWidth: 40
+                }
+              }
+            }
+          },
           MuiBackdrop: {
             styleOverrides: {
               root: {
@@ -1444,7 +1491,8 @@
                 },
                 height: 32,
                 width: 32,
-                fontSize: 16
+                fontSize: 16,
+                borderRadius: '50%'
               })
             }
           },
@@ -1499,9 +1547,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
+    var focusButtonStyle$1 = {
+      outline: 'solid 2px #419cfe'
+    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
 
     var colors$1 = {
       background: {
@@ -1532,43 +1583,45 @@
           activeMouseOver: {},
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         secondary: {
           "default": {
-            fill: '#0876b6',
+            fill: '#374061',
             color: '#FFFFFF',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#064c84',
+            fill: '#1047B0',
             color: '#FFFFFF',
-            borderColor: '#3DA6FF'
+            borderColor: 'transparent'
           },
           active: {
-            fill: '#0876b6',
+            fill: '#186DFF',
             color: '#FFFFFF',
             borderColor: 'transparent'
           },
           activeMouseOver: {},
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         tertiary: {
           "default": {
             fill: 'transparent',
-            color: '#575F7A',
-            borderColor: '#575F7A'
+            color: '#374061',
+            borderColor: '#374061'
           },
           mouseOver: {
-            fill: '#E3E4E7',
-            color: '#575F7A',
-            borderColor: '#575F7A'
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: '#374061'
           },
           active: {
             fill: 'transparent',
@@ -1576,25 +1629,26 @@
             borderColor: '#186DFF'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
+            fill: '#E0E8F5',
             color: '#186DFF',
             borderColor: '#186DFF'
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         flat: {
           "default": {
             fill: 'transparent',
-            color: '#575F7A',
+            color: '#374061',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#E3E4E7',
-            color: '#575F7A',
+            fill: '#E0E8F5',
+            color: '#374061',
             borderColor: 'transparent'
           },
           active: {
@@ -1603,25 +1657,26 @@
             borderColor: 'transparent'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
+            fill: '#E0E8F5',
             color: '#186DFF',
             borderColor: 'transparent'
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         tool: {
           "default": {
             fill: '#ECEDEE',
-            color: '#575F7A',
+            color: '#374061',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#E3E4E7',
-            color: '#575F7A',
+            fill: '#E0E8F5',
+            color: '#374061',
             borderColor: 'transparent'
           },
           active: {
@@ -1636,20 +1691,21 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         boxed: {
           "default": {
             fill: 'transparent',
-            color: '#575F7A',
-            borderColor: '#575f7a'
+            color: '#374061',
+            borderColor: '#374061'
           },
           mouseOver: {
-            fill: '#E3E4E7',
-            color: '#575F7A',
-            borderColor: '#575f7a'
+            fill: '#E0E8F5',
+            color: '#374061',
+            borderColor: '#374061'
           },
           active: {
             fill: '#186DFF',
@@ -1663,9 +1719,10 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         icon: {
           "default": {
@@ -1674,7 +1731,7 @@
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#E3E4E7',
+            fill: '#E0E8F5',
             color: '#374061',
             borderColor: 'transparent'
           },
@@ -1684,19 +1741,18 @@
             borderColor: 'transparent'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
+            fill: '#E0E8F5',
             color: '#186DFF',
             borderColor: 'transparent'
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
-        }
+        focusDefault: focusButtonStyle$1
       },
       typographyAndIcons: {
         text: '#051039',
@@ -1706,7 +1762,7 @@
         iconLinkDisabled: '#CCCCCC',
         textLinkActive: '#186DFF',
         buttonIconTertiaryFlat: '#575F7A',
-        inactiveText: '#707070'
+        inactiveText: '#626262'
       },
       textInputField: {
         "default": {
@@ -1738,7 +1794,8 @@
       },
       cards: {
         cardContainer: '#FFFFFF',
-        cardContainerBorder: '#EEEEEE'
+        cardContainerBorder: '#EEEEEE',
+        cardContainerMouseOver: '#E0E8F5'
       },
       backdrops: {
         black: {
@@ -2290,9 +2347,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
+    var focusButtonStyle = {
+      outline: 'solid 2px #419cfe'
+    }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
 
     var colors = {
       background: {
@@ -2323,96 +2383,100 @@
           activeMouseOver: {},
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         secondary: {
           "default": {
-            fill: '#0876b6',
-            color: '#FFFFFF',
+            fill: '#F8F9F9',
+            color: '#374061',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#064C84',
+            fill: '#1047B0',
             color: '#FFFFFF',
-            borderColor: '#3DA6FF'
+            borderColor: '#transparent'
           },
           active: {
-            fill: '#0876B6',
+            fill: '#186DFF',
             color: '#FFFFFF',
             borderColor: 'transparent'
           },
           activeMouseOver: {},
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         tertiary: {
           "default": {
             fill: 'transparent',
-            color: '#E5E5E5',
-            borderColor: '#E5E5E5'
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
           },
           mouseOver: {
-            fill: '#494949',
-            color: '#E5E5E5',
-            borderColor: '#E5E5E5'
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
           },
           active: {
             fill: 'transparent',
-            color: '#488BFD',
-            borderColor: '#48A8FA'
+            color: '#7BACFF',
+            borderColor: '#7BACFF'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
-            color: '#488BFD',
-            borderColor: '#488BFD'
+            fill: '#414751',
+            color: '#7BACFF',
+            borderColor: '#7BACFF'
           },
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         flat: {
           "default": {
             fill: 'transparent',
-            color: '#E5E5E5',
+            color: '#F8F9F9',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#494949',
-            color: '#E5E5E5',
+            fill: '#414751',
+            color: '#F8F9F9',
             borderColor: 'transparent'
           },
           active: {
             fill: 'transparent',
-            color: '#488BFD',
+            color: '#7BACFF',
             borderColor: 'transparent'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
-            color: '#488BFD',
+            fill: '#414751',
+            color: '#7BACFF',
             borderColor: 'transparent'
           },
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         tool: {
           "default": {
             fill: '#393939',
-            color: '#E5E5E5',
+            color: '#F8F9F9',
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#494949',
-            color: '#E5E5E5',
+            fill: '#414751',
+            color: '#F8F9F9',
             borderColor: 'transparent'
           },
           active: {
@@ -2427,20 +2491,21 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         boxed: {
           "default": {
             fill: 'transparent',
-            color: '#E5E5E5',
-            borderColor: '#e5e5e5'
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
           },
           mouseOver: {
-            fill: '#494949',
-            color: '#E5E5E5',
-            borderColor: '#e5e5e5'
+            fill: '#414751',
+            color: '#F8F9F9',
+            borderColor: '#F8F9F9'
           },
           active: {
             fill: '#186DFF',
@@ -2454,9 +2519,10 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         icon: {
           "default": {
@@ -2465,7 +2531,7 @@
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#494949',
+            fill: '#414751',
             color: '#F8F9F9',
             borderColor: 'transparent'
           },
@@ -2475,7 +2541,7 @@
             borderColor: 'transparent'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
+            fill: '#414751',
             color: '#488BFD',
             borderColor: 'transparent'
           },
@@ -2483,11 +2549,10 @@
             fill: 'transparent',
             color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
-        }
+        focusDefault: focusButtonStyle
       },
       typographyAndIcons: {
         text: '#FFFFFF',
@@ -2497,7 +2562,7 @@
         iconLinkDisabled: '#5E5E5E',
         textLinkActive: '#488BFD',
         buttonIconTertiaryFlat: '#C5C5C5',
-        inactiveText: '#B0B0B0'
+        inactiveText: '#b4b4b4'
       },
       textInputField: {
         "default": {
@@ -2529,7 +2594,8 @@
       },
       cards: {
         cardContainer: '#303030',
-        cardContainerBorder: '#404040'
+        cardContainerBorder: '#404040',
+        cardContainerMouseOver: '#414751'
       },
       backdrops: {
         black: {
@@ -2544,7 +2610,7 @@
       screenManager: {
         activeWindow: '#242424',
         inactiveWindow: '#303030',
-        tabButtonHover: 'rgba(123, 172, 255, 0.12);'
+        tabButtonHover: '#414751;'
       },
       timeSlider: {
         // player
@@ -2892,6 +2958,7 @@
     exports.List = List;
     exports.ListItem = ListItem;
     exports.Location = Location;
+    exports.Menu = Menu;
     exports.Minus = Minus;
     exports.None = None;
     exports.Notifications = Notifications;

package/lib/components/Icons/Icons.d.ts

@@ -87,6 +87,7 @@ export declare const CollapseLarge: (props: SvgIconProps) => JSX.Element;
 export declare const CollapseMedium: (props: SvgIconProps) => JSX.Element;
 export declare const CollapseSmall: (props: SvgIconProps) => JSX.Element;
 export declare const ExitDomain: (props: SvgIconProps) => JSX.Element;
+export declare const Menu: (props: SvgIconProps) => JSX.Element;
 export declare const None: (props: SvgIconProps) => JSX.Element;
 export declare const Both: (props: SvgIconProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { ComponentsVariants, CSSInterpolation, CSSObject } from '@mui/material';
 import { ButtonStyles, 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;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface CSSProperties extends React.CSSProperties {
+export interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
 export declare enum ThemeTypes {
@@ -14,6 +14,7 @@ export interface ButtonStyle {
     active: CSSProperties;
     activeMouseOver: CSSProperties;
     disabled: CSSProperties;
+    focus: CSSProperties;
 }
 export interface ButtonStyles {
     primary: ButtonStyle;
@@ -60,7 +61,8 @@ export declare type GeowebColorPalette = {
     };
     cards: {
         cardContainer: CSSProperties['color'];
-        cardContainerBorder?: CSSProperties['color'];
+        cardContainerBorder: CSSProperties['color'];
+        cardContainerMouseOver: CSSProperties['color'];
     };
     backdrops: {
         black: CSSProperties;
@@ -175,4 +177,3 @@ declare module '@mui/material/Button' {
         icon: true;
     }
 }
-export {};

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

@@ -1,7 +1,12 @@
+/// <reference types="react" />
 import { Theme, PaletteMode } from '@mui/material';
 import { Shadows } from '@mui/material/styles/shadows';
 import { Elevations, GeowebColorPalette } from './types';
 export declare const hex2rgba: (hex: string, alpha?: number) => string;
+export interface CSSProperties extends React.CSSProperties {
+    rgba?: string;
+    opacity?: number;
+}
 export declare const parseColors: (colors: GeowebColorPalette) => GeowebColorPalette;
 export declare const createShadows: (elevations: Elevations) => Shadows;
 export declare const breakpoints: {

package/lib/stories/Table.stories.d.ts

@@ -1,4 +1,11 @@
 import * as React from 'react';
+export interface ExampleRow {
+    name: string;
+    calories: number;
+    fat: number;
+    carbs: number;
+    protein: number;
+}
 export declare const TableDemo: React.FC;
 export declare const Table: {
     (): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "4.15.1",
+  "version": "4.17.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {