@opengeoweb/theme 2.2.0 → 2.2.1

package/index.esm.js

@@ -72,6 +72,24 @@ 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 gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
+
 var buttonStyle = function buttonStyle(button) {
   return {
     // default styling
@@ -127,32 +145,14 @@ var toggleButtonStyle = function toggleButtonStyle(buttonVariants) {
   }, {});
 };
 var buttonVariants = function buttonVariants(buttons) {
-  return [{
-    props: {
-      variant: 'primary'
-    },
-    style: buttonStyle(buttons.primary)
-  }, {
-    props: {
-      variant: 'secondary'
-    },
-    style: buttonStyle(buttons.secondary)
-  }, {
-    props: {
-      variant: 'tertiary'
-    },
-    style: buttonStyle(buttons.tertiary)
-  }, {
-    props: {
-      variant: 'flat'
-    },
-    style: buttonStyle(buttons.flat)
-  }, {
-    props: {
-      variant: 'tool'
-    },
-    style: buttonStyle(buttons.tool)
-  }];
+  return gwButtonVariants.map(function (variant) {
+    return {
+      props: {
+        variant: variant
+      },
+      style: buttonStyle(buttons[variant])
+    };
+  });
 };
 
 var hex2rgba = function hex2rgba(hex) {
@@ -694,23 +694,35 @@ var colors$1 = {
         borderColor: 'transparent'
       }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
-    },
-    primaryActive: {
-      fill: '#186DFF'
-    },
-    flatMouseover: {
-      fill: '#E3E4E7'
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#575F7A',
+        borderColor: '#575f7a'
+      },
+      mouseOver: {
+        fill: '#E3E4E7',
+        color: '#575F7A',
+        borderColor: '#575f7a'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
     },
     focusDefault: {
       outline: 'solid 2px #419cfe'
-    },
-    disabled: {
-      fill: '#E8E5E5'
-    },
-    surfaceIconDefault: {
-      fill: '#F5F5F5'
     }
   },
   typographyAndIcons: {
@@ -1227,6 +1239,14 @@ var GWTheme = createTheme$1({
           maxWidth: '1280px'
         }
       }
+    },
+    MuiButton: {
+      variants: buttonVariants(geowebColors.buttons)
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+      }
     }
   }
 });
@@ -1412,23 +1432,35 @@ var colors = {
         borderColor: 'transparent'
       }
     },
-    primaryMouseover: {
-      fill: '#1047B0'
-    },
-    primaryActive: {
-      fill: '#186DFF'
-    },
-    flatMouseover: {
-      fill: '#494949'
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#E5E5E5',
+        borderColor: '#e5e5e5'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#E5E5E5',
+        borderColor: '#e5e5e5'
+      },
+      active: {
+        fill: '#186DFF',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#1047B0',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B0B0B0',
+        borderColor: 'transparent'
+      }
     },
     focusDefault: {
       outline: 'solid 2px #419cfe'
-    },
-    disabled: {
-      fill: '#303030'
-    },
-    surfaceIconDefault: {
-      fill: '#2B2B2B'
     }
   },
   typographyAndIcons: {
@@ -1715,4 +1747,4 @@ var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
   }, props), children);
 };
 
-export { GWTheme, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, darkTheme, lightTheme, useThemeContext };
+export { GWTheme, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, darkTheme, gwButtonVariants, lightTheme, useThemeContext };

package/index.umd.js

@@ -79,6 +79,24 @@
         return ar;
     }
 
+    /* *
+     * 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 gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
+
     var buttonStyle = function buttonStyle(button) {
       return {
         // default styling
@@ -136,32 +154,14 @@
       }, {});
     };
     var buttonVariants = function buttonVariants(buttons) {
-      return [{
-        props: {
-          variant: 'primary'
-        },
-        style: buttonStyle(buttons.primary)
-      }, {
-        props: {
-          variant: 'secondary'
-        },
-        style: buttonStyle(buttons.secondary)
-      }, {
-        props: {
-          variant: 'tertiary'
-        },
-        style: buttonStyle(buttons.tertiary)
-      }, {
-        props: {
-          variant: 'flat'
-        },
-        style: buttonStyle(buttons.flat)
-      }, {
-        props: {
-          variant: 'tool'
-        },
-        style: buttonStyle(buttons.tool)
-      }];
+      return gwButtonVariants.map(function (variant) {
+        return {
+          props: {
+            variant: variant
+          },
+          style: buttonStyle(buttons[variant])
+        };
+      });
     };
 
     var hex2rgba = function hex2rgba(hex, alpha) {
@@ -708,23 +708,35 @@
             borderColor: 'transparent'
           }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
-        },
-        primaryActive: {
-          fill: '#186DFF'
-        },
-        flatMouseover: {
-          fill: '#E3E4E7'
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#575F7A',
+            borderColor: '#575f7a'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: '#575f7a'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
         focusDefault: {
           outline: 'solid 2px #419cfe'
-        },
-        disabled: {
-          fill: '#E8E5E5'
-        },
-        surfaceIconDefault: {
-          fill: '#F5F5F5'
         }
       },
       typographyAndIcons: {
@@ -1225,6 +1237,14 @@
               maxWidth: '1280px'
             }
           }
+        },
+        MuiButton: {
+          variants: buttonVariants(geowebColors.buttons)
+        },
+        MuiToggleButton: {
+          styleOverrides: {
+            root: toggleButtonStyle(buttonVariants(geowebColors.buttons))
+          }
         }
       }
     });
@@ -1383,23 +1403,35 @@
             borderColor: 'transparent'
           }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
-        },
-        primaryActive: {
-          fill: '#186DFF'
-        },
-        flatMouseover: {
-          fill: '#494949'
+        boxed: {
+          "default": {
+            fill: 'transparent',
+            color: '#E5E5E5',
+            borderColor: '#e5e5e5'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: '#e5e5e5'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
         focusDefault: {
           outline: 'solid 2px #419cfe'
-        },
-        disabled: {
-          fill: '#303030'
-        },
-        surfaceIconDefault: {
-          fill: '#2B2B2B'
         }
       },
       typographyAndIcons: {
@@ -1691,6 +1723,7 @@
     exports.ThemeWrapper = ThemeWrapper;
     exports.ThemeWrapperOldTheme = ThemeWrapperOldTheme;
     exports.darkTheme = darkTheme;
+    exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.useThemeContext = useThemeContext;
 

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

@@ -2,6 +2,8 @@
 interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
+export declare const gwButtonVariants: readonly ["primary", "secondary", "tertiary", "flat", "tool", "boxed"];
+export declare type ButtonVariant = typeof gwButtonVariants[number];
 export interface ButtonStyle {
     default: CSSProperties;
     mouseOver: CSSProperties;
@@ -15,12 +17,8 @@ export interface ButtonStyles {
     tertiary: ButtonStyle;
     flat: ButtonStyle;
     tool: ButtonStyle;
-    primaryMouseover: CSSProperties;
-    primaryActive: CSSProperties;
-    flatMouseover: CSSProperties;
+    boxed: ButtonStyle;
     focusDefault: CSSProperties;
-    disabled: CSSProperties;
-    surfaceIconDefault: CSSProperties;
 }
 export declare type GeowebColorPalette = {
     background: {
@@ -137,6 +135,7 @@ declare module '@mui/material/Button' {
         tertiary: true;
         flat: true;
         tool: true;
+        boxed: true;
     }
 }
 export {};

package/package.json

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