@opengeoweb/theme 2.1.4 → 2.3.0

package/index.umd.js

@@ -79,6 +79,95 @@
         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 defaultButtonStyle = function defaultButtonStyle(button) {
+      return {
+        // default styling
+        color: button["default"].color,
+        backgroundColor: button["default"].fill,
+        textTransform: 'capitalize',
+        // hover styling
+        '&:hover': {
+          backgroundColor: button.mouseOver.fill,
+          borderColor: button.mouseOver.borderColor
+        },
+        // active styling
+        '&.Mui-selected': {
+          backgroundColor: button.active.fill,
+          color: button.active.color,
+          borderColor: button.active.borderColor,
+          '&:hover': {
+            backgroundColor: button.activeMouseOver.fill
+          }
+        },
+        // disabled styling
+        '&.Mui-disabled': {
+          backgroundColor: button.disabled.fill,
+          color: button.disabled.color,
+          borderColor: button.disabled.borderColor
+        }
+      };
+    };
+    var buttonStyle = function buttonStyle(button) {
+      return __assign(__assign({}, defaultButtonStyle(button)), {
+        padding: '12px 8px',
+        height: '40px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: button["default"].borderColor,
+        borderRadius: '5px',
+        // size styling
+        '&[class*="sizeSmall"]': {
+          fontSize: '12px',
+          height: '32px',
+          lineHeight: '12px'
+        },
+        // icon styling
+        '& .MuiButton-startIcon': {
+          marginRight: '2px',
+          '& .MuiSvgIcon-root': {
+            fontSize: '26px'
+          }
+        }
+      });
+    };
+    var variantsToClassName = function variantsToClassName(buttonVariants) {
+      return buttonVariants.reduce(function (variants, _a) {
+        var _b;
+
+        var variant = _a.props.variant,
+            style = _a.style;
+        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])
+        };
+      });
+    };
+
     var hex2rgba = function hex2rgba(hex, alpha) {
       if (alpha === void 0) {
         alpha = 1;
@@ -158,23 +247,36 @@
         },
         shadows: shadows,
         components: {
+          MuiButton: {
+            variants: buttonVariants(geowebColors.buttons)
+          },
+          MuiToggleButton: {
+            styleOverrides: {
+              root: variantsToClassName(buttonVariants(geowebColors.buttons))
+            }
+          },
+          MuiIconButton: {
+            // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1926 remove default styling and create CustomIconButton
+            styleOverrides: {
+              root: defaultButtonStyle(geowebColors.buttons.flat)
+            }
+          },
           MuiCssBaseline: {
             styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
           },
           MuiMenuItem: {
             styleOverrides: {
               root: {
+                minHeight: '48px!important',
                 fontSize: '0.875rem',
                 letterSpacing: '0.25px',
-                ':not(:last-child)&:after': {
-                  content: '""',
-                  position: 'absolute',
-                  width: '100%',
-                  height: 1,
-                  background: geowebColors.greys.accessible,
-                  bottom: 0,
-                  left: 0,
-                  opacity: 0.5
+                divider: {
+                  borderBottomColor: geowebColors.greys.accessibleLight
+                },
+                li: {
+                  '&:hover': {
+                    backgroundColor: geowebColors.tab.mouseOver.rgba
+                  }
                 },
                 '&.Mui-selected': {
                   background: 'none',
@@ -325,13 +427,23 @@
             styleOverrides: {
               root: {
                 color: geowebColors.typographyAndIcons.text,
-                fontSize: '14px'
+                fontSize: '14px',
+                minHeight: '36px'
               },
               divider: {
                 borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
               }
             }
           },
+          MuiListItemIcon: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.icon,
+                width: '24px',
+                height: '24px'
+              }
+            }
+          },
           MuiBackdrop: {
             styleOverrides: {
               root: {
@@ -400,20 +512,33 @@
               }
             }
           },
+          MuiTextField: {
+            defaultProps: {
+              variant: 'filled'
+            }
+          },
           MuiFilledInput: {
             styleOverrides: {
               root: {
                 backgroundColor: geowebColors.textInputField["default"].rgba,
                 '&.Mui-focused': {
-                  backgroundColor: geowebColors.textInputField.active.rgba
+                  backgroundColor: geowebColors.textInputField.active.rgba,
+                  '&:after': {
+                    borderColor: 'transparent'
+                  }
                 },
                 '&.Mui-disabled': {
                   backgroundColor: geowebColors.textInputField.disabled.rgba
+                },
+                '&.Mui-error': {
+                  '&:after': {
+                    borderColor: geowebColors.captions.captionError.color
+                  }
                 }
               },
               underline: {
                 '&:after': {
-                  borderBottom: 'transparent'
+                  borderWidth: '1px'
                 },
                 '&.Mui-disabled:before': {
                   borderBottomStyle: 'solid'
@@ -489,25 +614,161 @@
       },
       buttons: {
         primary: {
-          fill: '#186DFF'
+          "default": {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: '#71A6FF'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        secondary: {
+          "default": {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#064c84',
+            color: '#FFFFFF',
+            borderColor: '#3DA6FF'
+          },
+          active: {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
+        },
+        tertiary: {
+          "default": {
+            fill: 'transparent',
+            color: '#575F7A',
+            borderColor: '#575F7A'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: '#575F7A'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: '#186DFF'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#186DFF',
+            borderColor: '#186DFF'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#186DFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
-        primaryActive: {
-          fill: '#186DFF'
+        tool: {
+          "default": {
+            fill: '#ECEDEE',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#E3E4E7',
+            color: '#575F7A',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
-        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: {
@@ -540,7 +801,8 @@
         }
       },
       greys: {
-        accessible: '#767676'
+        accessible: '#767676',
+        accessibleLight: '#C5C5C5'
       },
       cards: {
         cardContainer: '#FFFFFF',
@@ -660,10 +922,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         tableRowDefaultText: {
           color: '#051039',
           opacity: 0.87,
@@ -677,9 +935,6 @@
           fill: '#051039',
           opacity: 0.07
         },
-        tableRowDisabledIcon: {
-          fill: '#767676'
-        },
         tableRowDisabledText: {
           color: '#767676',
           opacity: 0.87,
@@ -713,7 +968,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#767676',
+          color: '#707070',
           opacity: 1
         }
       }
@@ -1008,6 +1263,14 @@
               maxWidth: '1280px'
             }
           }
+        },
+        MuiButton: {
+          variants: buttonVariants(geowebColors.buttons)
+        },
+        MuiToggleButton: {
+          styleOverrides: {
+            root: variantsToClassName(buttonVariants(geowebColors.buttons))
+          }
         }
       }
     });
@@ -1040,25 +1303,161 @@
       },
       buttons: {
         primary: {
-          fill: '#186DFF'
+          "default": {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: '#71A6FF'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
-        primaryMouseover: {
-          fill: '#1047B0'
+        secondary: {
+          "default": {
+            fill: '#0876b6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#064C84',
+            color: '#FFFFFF',
+            borderColor: '#3DA6FF'
+          },
+          active: {
+            fill: '#0876B6',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {},
+          disabled: {
+            fill: 'transparent',
+            color: '#707070',
+            borderColor: 'transparent'
+          }
         },
-        primaryActive: {
-          fill: '#186DFF'
+        tertiary: {
+          "default": {
+            fill: 'transparent',
+            color: '#E5E5E5',
+            borderColor: '#E5E5E5'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: '#E5E5E5'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#488BFD',
+            borderColor: '#48A8FA'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#488BFD',
+            borderColor: '#488BFD'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
-        flatMouseover: {
-          fill: '#494949'
+        flat: {
+          "default": {
+            fill: 'transparent',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: 'transparent',
+            color: '#488BFD',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: 'rgba(24, 109, 255, 0.1)',
+            color: '#488BFD',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
-        focusDefault: {
-          outline: 'solid 2px #419cfe'
+        tool: {
+          "default": {
+            fill: '#393939',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          mouseOver: {
+            fill: '#494949',
+            color: '#E5E5E5',
+            borderColor: 'transparent'
+          },
+          active: {
+            fill: '#186DFF',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          activeMouseOver: {
+            fill: '#1047B0',
+            color: '#FFFFFF',
+            borderColor: 'transparent'
+          },
+          disabled: {
+            fill: 'transparent',
+            color: '#B0B0B0',
+            borderColor: 'transparent'
+          }
         },
-        disabled: {
-          fill: '#303030'
+        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'
+          }
         },
-        surfaceIconDefault: {
-          fill: '#2B2B2B'
+        focusDefault: {
+          outline: 'solid 2px #419cfe'
         }
       },
       typographyAndIcons: {
@@ -1091,7 +1490,8 @@
         }
       },
       greys: {
-        accessible: '#A2A2A2'
+        accessible: '#A2A2A2',
+        accessibleLight: '#6F6F6F'
       },
       cards: {
         cardContainer: '#303030',
@@ -1211,10 +1611,6 @@
         }
       },
       layerManager: {
-        tableRowDefaultIcon: {
-          fill: '#C5C5C5',
-          opacity: 1
-        },
         tableRowDefaultText: {
           color: '#FFFFFF',
           opacity: 0.87,
@@ -1228,9 +1624,6 @@
           fill: '#000000',
           opacity: 0.15
         },
-        tableRowDisabledIcon: {
-          fill: '#A2A2A2'
-        },
         tableRowDisabledText: {
           color: '#909090',
           opacity: 0.87,
@@ -1264,7 +1657,7 @@
           opacity: 1
         },
         captionDisabled: {
-          color: '#909090',
+          color: '#B0B0B0',
           opacity: 1
         }
       }
@@ -1350,6 +1743,7 @@
     exports.ThemeWrapper = ThemeWrapper;
     exports.ThemeWrapperOldTheme = ThemeWrapperOldTheme;
     exports.darkTheme = darkTheme;
+    exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.useThemeContext = useThemeContext;
 

package/lib/components/Story/StoryHeader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface StoryHeaderProps {
+    title: string;
+}
+export declare const StoryHeader: React.FC<StoryHeaderProps>;
+export default StoryHeader;

package/lib/components/Story/index.d.ts

@@ -0,0 +1 @@
+export * from './StoryHeader';

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

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

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

@@ -0,0 +1 @@
+export {};