@opengeoweb/theme 2.3.0 → 2.4.0

package/index.esm.js

@@ -208,8 +208,24 @@ var createShadows = function createShadows(elevations) {
   });
 };
 var BORDER_RADIUS = 3;
+var breakpoints = {
+  mobile: 0,
+  tablet: 768,
+  desktop: 1024,
+  dekstopHD: 1440,
+  dekstopHDWide: 1920
+};
 var createTheme = function createTheme(paletteType, geowebColors, shadows) {
   return createTheme$1({
+    breakpoints: {
+      values: {
+        xs: breakpoints.mobile,
+        sm: breakpoints.tablet,
+        md: breakpoints.desktop,
+        lg: breakpoints.dekstopHD,
+        xl: breakpoints.dekstopHDWide
+      }
+    },
     palette: {
       mode: paletteType,
       secondary: {
@@ -464,37 +480,52 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
           }
         }
       },
-      // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
       MuiAlert: {
         styleOverrides: {
           standardError: {
-            border: '1px solid #c00000',
+            border: geowebColors.functional.errorOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fff0ea'
+            backgroundColor: geowebColors.functional.errorOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.error,
+              opacity: 1
+            }
           },
           standardWarning: {
-            border: '1px solid #ffa800',
+            border: geowebColors.functional.warningOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fff8eb'
+            backgroundColor: geowebColors.functional.warningOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.warning,
+              opacity: 1
+            }
           },
           standardInfo: {
-            border: '1px solid #0062e6',
+            border: geowebColors.functional.notificationOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#eaf3ff'
+            backgroundColor: geowebColors.functional.notificationOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.notification,
+              opacity: 1
+            }
           },
           standardSuccess: {
-            border: '1px solid #72bb23',
+            border: geowebColors.functional.successOutline.border,
             borderRadius: '0px',
-            backgroundColor: '#fcffeb'
+            backgroundColor: geowebColors.functional.successOutline.fill,
+            '& .MuiAlert-icon': {
+              color: geowebColors.functional.success,
+              opacity: 1
+            }
           },
           action: {
-            color: '#0075a9'
+            color: geowebColors.buttons.tertiary["default"].color
           },
           message: {
             fontSize: '14px',
             lineHeight: 1.43,
             letterSpacing: '0.25px',
-            color: '#051039'
+            color: geowebColors.typographyAndIcons.text
           }
         }
       },
@@ -869,6 +900,10 @@ var colors$1 = {
       fill: '#767676',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -917,10 +952,6 @@ var colors$1 = {
       fill: '#FFFFFF',
       border: '1px solid #EEEEEE'
     },
-    tableRowMouseover: {
-      fill: '#051039',
-      opacity: 0.07
-    },
     tableRowDisabledText: {
       color: '#767676',
       opacity: 0.87,
@@ -957,6 +988,32 @@ var colors$1 = {
       color: '#707070',
       opacity: 1
     }
+  },
+  functional: {
+    success: '#72BB23',
+    successOutline: {
+      fill: '#FCFFEB',
+      border: ' 1px solid #72BB23'
+    },
+    error: '#C00000',
+    errorOutline: {
+      fill: '#F9E8EA',
+      border: '1px solid #C00000'
+    },
+    warning: '#FFA800',
+    warningOutline: {
+      fill: '#FFF8EB',
+      border: '1px solid #FFA800'
+    },
+    warningHighlight: {
+      fill: '#FFA800',
+      opacity: 0.2
+    },
+    notification: '#0062E6',
+    notificationOutline: {
+      fill: '#DFF2FD',
+      border: '1px solid #0062E6'
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -1601,6 +1658,10 @@ var colors = {
       fill: '#A2A2A2',
       opacity: 0.5
     },
+    timelineSelectionBackground: {
+      fill: '#11D1C6',
+      opacity: 0.25
+    },
     // time scale
     timeScaleText: {
       fontSize: 12
@@ -1649,10 +1710,6 @@ var colors = {
       fill: '#303030',
       border: '1px solid #404040'
     },
-    tableRowMouseover: {
-      fill: '#000000',
-      opacity: 0.15
-    },
     tableRowDisabledText: {
       color: '#909090',
       opacity: 0.87,
@@ -1689,6 +1746,32 @@ var colors = {
       color: '#B0B0B0',
       opacity: 1
     }
+  },
+  functional: {
+    success: '#72BB23',
+    successOutline: {
+      fill: 'rgba(114, 187, 35, 0.25)',
+      border: ' 1px solid #72BB23'
+    },
+    error: '#C00000',
+    errorOutline: {
+      fill: 'rgba(192, 0, 0, 0.25)',
+      border: '1px solid #C00000'
+    },
+    warning: '#FFA800',
+    warningOutline: {
+      fill: 'rgba(255, 168, 0, 0.25)',
+      border: '1px solid #FFA800'
+    },
+    warningHighlight: {
+      fill: '#FFA800',
+      opacity: 0.2
+    },
+    notification: '#186DFF',
+    notificationOutline: {
+      fill: 'rgba(24, 109, 255, 0.25)',
+      border: '1px solid #186DFF'
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

package/index.umd.js

@@ -222,8 +222,24 @@
       });
     };
     var BORDER_RADIUS = 3;
+    var breakpoints = {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+      dekstopHD: 1440,
+      dekstopHDWide: 1920
+    };
     var createTheme = function createTheme(paletteType, geowebColors, shadows) {
       return material.createTheme({
+        breakpoints: {
+          values: {
+            xs: breakpoints.mobile,
+            sm: breakpoints.tablet,
+            md: breakpoints.desktop,
+            lg: breakpoints.dekstopHD,
+            xl: breakpoints.dekstopHDWide
+          }
+        },
         palette: {
           mode: paletteType,
           secondary: {
@@ -478,37 +494,52 @@
               }
             }
           },
-          // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
           MuiAlert: {
             styleOverrides: {
               standardError: {
-                border: '1px solid #c00000',
+                border: geowebColors.functional.errorOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fff0ea'
+                backgroundColor: geowebColors.functional.errorOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.error,
+                  opacity: 1
+                }
               },
               standardWarning: {
-                border: '1px solid #ffa800',
+                border: geowebColors.functional.warningOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fff8eb'
+                backgroundColor: geowebColors.functional.warningOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.warning,
+                  opacity: 1
+                }
               },
               standardInfo: {
-                border: '1px solid #0062e6',
+                border: geowebColors.functional.notificationOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#eaf3ff'
+                backgroundColor: geowebColors.functional.notificationOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.notification,
+                  opacity: 1
+                }
               },
               standardSuccess: {
-                border: '1px solid #72bb23',
+                border: geowebColors.functional.successOutline.border,
                 borderRadius: '0px',
-                backgroundColor: '#fcffeb'
+                backgroundColor: geowebColors.functional.successOutline.fill,
+                '& .MuiAlert-icon': {
+                  color: geowebColors.functional.success,
+                  opacity: 1
+                }
               },
               action: {
-                color: '#0075a9'
+                color: geowebColors.buttons.tertiary["default"].color
               },
               message: {
                 fontSize: '14px',
                 lineHeight: 1.43,
                 letterSpacing: '0.25px',
-                color: '#051039'
+                color: geowebColors.typographyAndIcons.text
               }
             }
           },
@@ -883,6 +914,10 @@
           fill: '#767676',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -931,10 +966,6 @@
           fill: '#FFFFFF',
           border: '1px solid #EEEEEE'
         },
-        tableRowMouseover: {
-          fill: '#051039',
-          opacity: 0.07
-        },
         tableRowDisabledText: {
           color: '#767676',
           opacity: 0.87,
@@ -971,6 +1002,32 @@
           color: '#707070',
           opacity: 1
         }
+      },
+      functional: {
+        success: '#72BB23',
+        successOutline: {
+          fill: '#FCFFEB',
+          border: ' 1px solid #72BB23'
+        },
+        error: '#C00000',
+        errorOutline: {
+          fill: '#F9E8EA',
+          border: '1px solid #C00000'
+        },
+        warning: '#FFA800',
+        warningOutline: {
+          fill: '#FFF8EB',
+          border: '1px solid #FFA800'
+        },
+        warningHighlight: {
+          fill: '#FFA800',
+          opacity: 0.2
+        },
+        notification: '#0062E6',
+        notificationOutline: {
+          fill: '#DFF2FD',
+          border: '1px solid #0062E6'
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -1572,6 +1629,10 @@
           fill: '#A2A2A2',
           opacity: 0.5
         },
+        timelineSelectionBackground: {
+          fill: '#11D1C6',
+          opacity: 0.25
+        },
         // time scale
         timeScaleText: {
           fontSize: 12
@@ -1620,10 +1681,6 @@
           fill: '#303030',
           border: '1px solid #404040'
         },
-        tableRowMouseover: {
-          fill: '#000000',
-          opacity: 0.15
-        },
         tableRowDisabledText: {
           color: '#909090',
           opacity: 0.87,
@@ -1660,6 +1717,32 @@
           color: '#B0B0B0',
           opacity: 1
         }
+      },
+      functional: {
+        success: '#72BB23',
+        successOutline: {
+          fill: 'rgba(114, 187, 35, 0.25)',
+          border: ' 1px solid #72BB23'
+        },
+        error: '#C00000',
+        errorOutline: {
+          fill: 'rgba(192, 0, 0, 0.25)',
+          border: '1px solid #C00000'
+        },
+        warning: '#FFA800',
+        warningOutline: {
+          fill: 'rgba(255, 168, 0, 0.25)',
+          border: '1px solid #FFA800'
+        },
+        warningHighlight: {
+          fill: '#FFA800',
+          opacity: 0.2
+        },
+        notification: '#186DFF',
+        notificationOutline: {
+          fill: 'rgba(24, 109, 255, 0.25)',
+          border: '1px solid #186DFF'
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

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

@@ -76,6 +76,7 @@ export declare type GeowebColorPalette = {
         timelineNightTime: CSSProperties;
         timelineTimelineSurface: CSSProperties;
         timelineMonthChangeDash: CSSProperties;
+        timelineSelectionBackground: CSSProperties;
         timeScaleText: CSSProperties;
         timeScalePointer: CSSProperties;
         timeScaleHorizontalScale: CSSProperties;
@@ -101,7 +102,6 @@ export declare type GeowebColorPalette = {
     layerManager: {
         tableRowDefaultText: CSSProperties;
         tableRowDefaultCardContainer: CSSProperties;
-        tableRowMouseover: CSSProperties;
         tableRowDisabledText: CSSProperties;
         tableRowDisabledCardContainer: CSSProperties;
     };
@@ -115,6 +115,17 @@ export declare type GeowebColorPalette = {
         captionError: CSSProperties;
         captionDisabled: CSSProperties;
     };
+    functional: {
+        success: CSSProperties['color'];
+        successOutline: CSSProperties;
+        error: CSSProperties['color'];
+        errorOutline: CSSProperties;
+        warning: CSSProperties['color'];
+        warningOutline: CSSProperties;
+        warningHighlight: CSSProperties;
+        notification: CSSProperties['color'];
+        notificationOutline: CSSProperties;
+    };
 };
 export declare type Elevations = {
     [id: string]: string;

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

@@ -4,4 +4,11 @@ import { Elevations, GeowebColorPalette } from './types';
 export declare const hex2rgba: (hex: string, alpha?: number) => string;
 export declare const parseColors: (colors: GeowebColorPalette) => GeowebColorPalette;
 export declare const createShadows: (elevations: Elevations) => Shadows;
+export declare const breakpoints: {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+    dekstopHD: number;
+    dekstopHDWide: number;
+};
 export declare const createTheme: (paletteType: PaletteMode, geowebColors: GeowebColorPalette, shadows: Shadows) => Theme;

package/lib/stories/Breakpoints.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BreakpointDemo: React.FC;
+export declare const Breakpoints: React.FC;

package/lib/stories/index.stories.d.ts

@@ -13,6 +13,7 @@ export { ToggleButtons } from './ToggleButton.stories';
 export { IconButtons } from './IconButton.stories';
 export { MenuItem } from './MenuItem.stories';
 export { TextFields } from './TextField.stories';
+export { Breakpoints } from './Breakpoints';
 export { FormElementsGWTheme, FormElements } from './FormElements.stories';
 declare const _default: {
     title: string;

package/package.json

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