@opengeoweb/theme 4.16.0 → 4.17.0

package/index.esm.js

@@ -904,7 +904,8 @@ var defaultButtonStyle = function defaultButtonStyle(button) {
     // hover styling
     '&:hover': {
       backgroundColor: button.mouseOver.fill,
-      borderColor: button.mouseOver.borderColor
+      borderColor: button.mouseOver.borderColor,
+      color: button.mouseOver.color
     },
     // active styling
     '&.Mui-selected': {
@@ -920,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
     }
   };
 };
@@ -1055,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)
         }
@@ -1251,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: {
@@ -1521,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: {
@@ -1554,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',
@@ -1598,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: {
@@ -1625,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: {
@@ -1658,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',
@@ -1685,9 +1732,10 @@ var colors$1 = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#707070',
+        color: '#626262',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle$1
     },
     icon: {
       "default": {
@@ -1696,7 +1744,7 @@ var colors$1 = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#E3E4E7',
+        fill: '#E0E8F5',
         color: '#374061',
         borderColor: 'transparent'
       },
@@ -1706,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',
@@ -1728,7 +1775,7 @@ var colors$1 = {
     iconLinkDisabled: '#CCCCCC',
     textLinkActive: '#186DFF',
     buttonIconTertiaryFlat: '#575F7A',
-    inactiveText: '#707070'
+    inactiveText: '#626262'
   },
   textInputField: {
     "default": {
@@ -1760,7 +1807,8 @@ var colors$1 = {
   },
   cards: {
     cardContainer: '#FFFFFF',
-    cardContainerBorder: '#EEEEEE'
+    cardContainerBorder: '#EEEEEE',
+    cardContainerMouseOver: '#E0E8F5'
   },
   backdrops: {
     black: {
@@ -2328,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: {
@@ -2361,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: {
@@ -2465,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',
@@ -2492,9 +2548,10 @@ var colors = {
       },
       disabled: {
         fill: 'transparent',
-        color: '#B0B0B0',
+        color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
     icon: {
       "default": {
@@ -2503,7 +2560,7 @@ var colors = {
         borderColor: 'transparent'
       },
       mouseOver: {
-        fill: '#494949',
+        fill: '#414751',
         color: '#F8F9F9',
         borderColor: 'transparent'
       },
@@ -2513,7 +2570,7 @@ var colors = {
         borderColor: 'transparent'
       },
       activeMouseOver: {
-        fill: 'rgba(24, 109, 255, 0.1)',
+        fill: '#414751',
         color: '#488BFD',
         borderColor: 'transparent'
       },
@@ -2521,11 +2578,10 @@ var colors = {
         fill: 'transparent',
         color: '#B4B4B4',
         borderColor: 'transparent'
-      }
+      },
+      focus: focusButtonStyle
     },
-    focusDefault: {
-      outline: 'solid 2px #419cfe'
-    }
+    focusDefault: focusButtonStyle
   },
   typographyAndIcons: {
     text: '#FFFFFF',
@@ -2535,7 +2591,7 @@ var colors = {
     iconLinkDisabled: '#5E5E5E',
     textLinkActive: '#488BFD',
     buttonIconTertiaryFlat: '#C5C5C5',
-    inactiveText: '#B0B0B0'
+    inactiveText: '#b4b4b4'
   },
   textInputField: {
     "default": {
@@ -2567,7 +2623,8 @@ var colors = {
   },
   cards: {
     cardContainer: '#303030',
-    cardContainerBorder: '#404040'
+    cardContainerBorder: '#404040',
+    cardContainerMouseOver: '#414751'
   },
   backdrops: {
     black: {
@@ -2582,7 +2639,7 @@ var colors = {
   screenManager: {
     activeWindow: '#242424',
     inactiveWindow: '#303030',
-    tabButtonHover: 'rgba(123, 172, 255, 0.12);'
+    tabButtonHover: '#414751;'
   },
   timeSlider: {
     // player

package/index.umd.js

@@ -884,7 +884,8 @@
         // hover styling
         '&:hover': {
           backgroundColor: button.mouseOver.fill,
-          borderColor: button.mouseOver.borderColor
+          borderColor: button.mouseOver.borderColor,
+          color: button.mouseOver.color
         },
         // active styling
         '&.Mui-selected': {
@@ -900,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
         }
       };
     };
@@ -1042,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)
             }
@@ -1238,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: {
@@ -1508,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: {
@@ -1541,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',
@@ -1585,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: {
@@ -1612,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: {
@@ -1645,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',
@@ -1672,9 +1719,10 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#707070',
+            color: '#626262',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle$1
         },
         icon: {
           "default": {
@@ -1683,7 +1731,7 @@
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#E3E4E7',
+            fill: '#E0E8F5',
             color: '#374061',
             borderColor: 'transparent'
           },
@@ -1693,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',
@@ -1715,7 +1762,7 @@
         iconLinkDisabled: '#CCCCCC',
         textLinkActive: '#186DFF',
         buttonIconTertiaryFlat: '#575F7A',
-        inactiveText: '#707070'
+        inactiveText: '#626262'
       },
       textInputField: {
         "default": {
@@ -1747,7 +1794,8 @@
       },
       cards: {
         cardContainer: '#FFFFFF',
-        cardContainerBorder: '#EEEEEE'
+        cardContainerBorder: '#EEEEEE',
+        cardContainerMouseOver: '#E0E8F5'
       },
       backdrops: {
         black: {
@@ -2299,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: {
@@ -2332,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: {
@@ -2436,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',
@@ -2463,9 +2519,10 @@
           },
           disabled: {
             fill: 'transparent',
-            color: '#B0B0B0',
+            color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
         icon: {
           "default": {
@@ -2474,7 +2531,7 @@
             borderColor: 'transparent'
           },
           mouseOver: {
-            fill: '#494949',
+            fill: '#414751',
             color: '#F8F9F9',
             borderColor: 'transparent'
           },
@@ -2484,7 +2541,7 @@
             borderColor: 'transparent'
           },
           activeMouseOver: {
-            fill: 'rgba(24, 109, 255, 0.1)',
+            fill: '#414751',
             color: '#488BFD',
             borderColor: 'transparent'
           },
@@ -2492,11 +2549,10 @@
             fill: 'transparent',
             color: '#B4B4B4',
             borderColor: 'transparent'
-          }
+          },
+          focus: focusButtonStyle
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
-        }
+        focusDefault: focusButtonStyle
       },
       typographyAndIcons: {
         text: '#FFFFFF',
@@ -2506,7 +2562,7 @@
         iconLinkDisabled: '#5E5E5E',
         textLinkActive: '#488BFD',
         buttonIconTertiaryFlat: '#C5C5C5',
-        inactiveText: '#B0B0B0'
+        inactiveText: '#b4b4b4'
       },
       textInputField: {
         "default": {
@@ -2538,7 +2594,8 @@
       },
       cards: {
         cardContainer: '#303030',
-        cardContainerBorder: '#404040'
+        cardContainerBorder: '#404040',
+        cardContainerMouseOver: '#414751'
       },
       backdrops: {
         black: {
@@ -2553,7 +2610,7 @@
       screenManager: {
         activeWindow: '#242424',
         inactiveWindow: '#303030',
-        tabButtonHover: 'rgba(123, 172, 255, 0.12);'
+        tabButtonHover: '#414751;'
       },
       timeSlider: {
         // player

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