@opengeoweb/theme 9.8.0 → 9.10.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, StyledEngineProvider } from '@mui/material';
+import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, GlobalStyles, StyledEngineProvider } from '@mui/material';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1512,16 +1512,21 @@ var colors$1 = {
     iconLinkDisabled: '#CCCCCC',
     textLinkActive: '#186DFF',
     buttonIconTertiaryFlat: '#575F7A',
-    inactiveText: '#626262'
+    inactiveText: '#626262',
+    iconWarning: '#ffa800'
   },
   textInputField: {
     "default": {
-      fill: '#051039',
-      opacity: 0.07
+      fill: '#e9edf5',
+      opacity: 1
+    },
+    mouseOver: {
+      fill: '#e0e8f5',
+      opacity: 1
     },
     active: {
-      fill: '#051039',
-      opacity: 0.02
+      fill: '#e9edf5',
+      opacity: 1
     },
     disabled: {
       fill: '#000000',
@@ -1530,8 +1535,21 @@ var colors$1 = {
     label: {
       fill: '#051039',
       opacity: 0.67
+    },
+    error: {
+      fill: '#FEEDEE',
+      opacity: 1
+    },
+    errorMouseOver: {
+      fill: '#ffc5c5',
+      opacity: 1
     }
   },
+  menuItem: {
+    mouseOver: '#e0e8f5',
+    selected: '#186DFF',
+    selectedMouseOver: '#1047b0'
+  },
   tab: {
     mouseOver: {
       fill: '#051039',
@@ -1774,7 +1792,7 @@ var colors$1 = {
     },
     captionErrorBackground: {
       color: '#C00000',
-      opacity: 0.25
+      opacity: 1
     },
     captionDisabled: {
       color: '#707070',
@@ -1901,6 +1919,9 @@ var createTheme = function createTheme(_ref) {
       text: {
         primary: geowebColors.typographyAndIcons.text
       },
+      warning: {
+        main: geowebColors.typographyAndIcons.iconWarning
+      },
       // geoweb color palette
       geowebColors: geowebColors
     },
@@ -1912,6 +1933,11 @@ var createTheme = function createTheme(_ref) {
     },
     shadows: shadows,
     components: {
+      MuiInputBase: {
+        defaultProps: {
+          disableInjectingGlobalStyles: true
+        }
+      },
       MuiButton: {
         variants: buttonVariants(geowebColors.buttons),
         defaultProps: {
@@ -1959,6 +1985,25 @@ var createTheme = function createTheme(_ref) {
           }
         }
       },
+      MuiPopover: {
+        styleOverrides: {
+          root: {
+            '& .MuiMenuItem-root': {
+              '&:hover, &:focus': {
+                backgroundColor: geowebColors.menuItem.mouseOver
+              },
+              '&.Mui-selected': {
+                background: geowebColors.menuItem.selected,
+                boxShadow: 'none',
+                color: '#fff',
+                '&:hover, &:focus': {
+                  backgroundColor: geowebColors.menuItem.selectedMouseOver
+                }
+              }
+            }
+          }
+        }
+      },
       MuiRadio: {
         styleOverrides: {
           root: {
@@ -2234,16 +2279,23 @@ var createTheme = function createTheme(_ref) {
           root: {
             backgroundColor: geowebColors.textInputField["default"].rgba,
             '&.Mui-focused': {
-              backgroundColor: geowebColors.textInputField.active.rgba,
+              backgroundColor: geowebColors.textInputField["default"].rgba,
               '&:after': {
-                borderColor: 'transparent'
+                borderColor: geowebColors.captions.captionInformation.rgba
               }
             },
+            '&:hover': {
+              backgroundColor: geowebColors.textInputField.mouseOver.rgba
+            },
             '&.Mui-disabled': {
               backgroundColor: geowebColors.textInputField.disabled.rgba
             },
             '&.Mui-error': {
-              '&:before': {
+              backgroundColor: geowebColors.textInputField.error.rgba,
+              '&:hover': {
+                backgroundColor: geowebColors.textInputField.errorMouseOver.rgba
+              },
+              '&:after': {
                 borderColor: geowebColors.captions.captionError.color
               }
             },
@@ -2260,8 +2312,11 @@ var createTheme = function createTheme(_ref) {
             }
           },
           underline: {
+            '&:before': {
+              borderColor: geowebColors.greys.accessible
+            },
             '&:after': {
-              borderWidth: '1px'
+              borderWidth: '2px'
             },
             '&.Mui-disabled:before': {
               borderBottomStyle: 'solid'
@@ -2278,7 +2333,7 @@ var createTheme = function createTheme(_ref) {
               color: geowebColors.captions.captionInformation.color,
               opacity: geowebColors.captions.captionInformation.opacity
             },
-            '&.Mui-error': {
+            '&.Mui-error, :has(+ .Mui-error)': {
               color: geowebColors.captions.captionError.color,
               opacity: geowebColors.captions.captionError.opacity
             },
@@ -2393,6 +2448,48 @@ var createTheme = function createTheme(_ref) {
             paddingRight: '5px'
           }
         }
+      },
+      MuiPickersPopper: {
+        styleOverrides: {
+          root: {
+            '& .MuiPickersPopper-paper': {
+              backgroundColor: geowebColors.background.surface
+            }
+          }
+        }
+      },
+      MuiPickersDay: {
+        styleOverrides: {
+          root: {
+            borderRadius: 2,
+            '&.Mui-selected': {
+              backgroundColor: geowebColors.buttons.primary["default"].fill,
+              color: geowebColors.buttons.primary["default"].color
+            },
+            '&:hover, &.Mui-selected:hover': {
+              backgroundColor: geowebColors.buttons.primary.mouseOver.fill,
+              color: geowebColors.buttons.primary["default"].color
+            },
+            '&.MuiPickersDay-today': {
+              borderColor: geowebColors.buttons.primary.mouseOver.borderColor
+            }
+          }
+        }
+      },
+      MuiMultiSectionDigitalClockSection: {
+        styleOverrides: {
+          item: {
+            borderRadius: 2,
+            '&.Mui-selected': {
+              backgroundColor: geowebColors.buttons.primary["default"].fill,
+              color: geowebColors.buttons.primary["default"].color
+            },
+            '&:hover, &.Mui-selected:hover': {
+              backgroundColor: geowebColors.buttons.primary.mouseOver.fill,
+              color: geowebColors.buttons.primary["default"].color
+            }
+          }
+        }
       }
     }
   });
@@ -2711,12 +2808,17 @@ var colors = {
     iconLinkDisabled: '#5E5E5E',
     textLinkActive: '#488BFD',
     buttonIconTertiaryFlat: '#C5C5C5',
-    inactiveText: '#b4b4b4'
+    inactiveText: '#b4b4b4',
+    iconWarning: '#ffa800'
   },
   textInputField: {
     "default": {
-      fill: '#000000',
-      opacity: 0.15
+      fill: '#2b2f35',
+      opacity: 1
+    },
+    mouseOver: {
+      fill: '#414751',
+      opacity: 1
     },
     active: {
       fill: '#909090',
@@ -2729,8 +2831,21 @@ var colors = {
     label: {
       fill: '#FFFFFF',
       opacity: 0.7
+    },
+    error: {
+      fill: '#532323',
+      opacity: 1
+    },
+    errorMouseOver: {
+      fill: '#633838',
+      opacity: 1
     }
   },
+  menuItem: {
+    mouseOver: '#414751',
+    selected: '#186DFF',
+    selectedMouseOver: '#1047b0'
+  },
   tab: {
     mouseOver: {
       fill: '#000000',
@@ -2962,7 +3077,7 @@ var colors = {
   captions: {
     captionStatus: {
       color: '#FFFFFF',
-      opacity: 0.7
+      opacity: 0.67
     },
     captionInformation: {
       color: '#9EC2FF',
@@ -3047,318 +3162,6 @@ var elevations = {
   elevation_24: '0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14)'
 };
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-// temporary copy of theme color values to make sure GWTheme is backwards compatible while working on new theme.
-var geowebColors = Object.assign({}, colors$1);
-var GWTheme = createTheme$1({
-  breakpoints: {
-    values: {
-      xs: breakpoints.mobile,
-      sm: breakpoints.tablet,
-      md: breakpoints.desktop,
-      lg: breakpoints.desktopHD,
-      xl: breakpoints.desktopHDWide
-    }
-  },
-  palette: {
-    secondary: {
-      main: '#0075a9'
-    },
-    action: {
-      active: '#ffa800'
-    },
-    text: {
-      disabled: '#051039'
-    },
-    geowebColors: parseColors(geowebColors)
-  },
-  shape: {
-    borderRadius: 3
-  },
-  typography: {
-    h6: {
-      fontSize: '16px'
-    },
-    subtitle1: {
-      fontSize: '16px',
-      fontWeight: 500,
-      lineHeight: 1.5,
-      letterSpacing: '0.15px',
-      opacity: 0.87,
-      color: '#051039'
-    },
-    subtitle2: {
-      fontSize: '14px',
-      fontWeight: 500,
-      lineHeight: 1.71,
-      letterSpacing: '0.1px',
-      opacity: 0.87,
-      color: '#051039'
-    },
-    body1: {
-      fontSize: '16px',
-      lineHeight: 1.56,
-      letterSpacing: '0.44px',
-      color: '#051039'
-    },
-    body2: {
-      fontSize: '14px',
-      lineHeight: 1.43,
-      letterSpacing: '0.25px',
-      color: '#051039'
-    },
-    overline: {
-      textTransform: 'none',
-      fontSize: '12px',
-      lineHeight: 1.43,
-      letterSpacing: '0.25px',
-      color: '#051039',
-      opacity: 0.7
-    },
-    caption: {
-      fontSize: '12px',
-      lineHeight: 1.33,
-      letterSpacing: '0.4px',
-      color: '#051039',
-      opacity: 0.7
-    },
-    button: {
-      fontWeight: 500,
-      fontSize: '14px',
-      color: '0075a9'
-    }
-  },
-  components: {
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          borderRadius: '2px',
-          fontSize: '16px',
-          fontWeight: 'normal',
-          padding: '10px',
-          backgroundColor: '#232323'
-        }
-      }
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          color: '#0075a9'
-        }
-      }
-    },
-    MuiCheckbox: {
-      styleOverrides: {
-        root: {
-          '&.Mui-disabled': {
-            color: '#CCCCCC!important'
-          },
-          '&.Mui-checked': {
-            color: '#0075a9'
-          }
-        }
-      }
-    },
-    MuiSelect: {
-      styleOverrides: {
-        icon: {
-          color: '#0075a9'
-        },
-        select: {
-          '&:focus': {
-            backgroundColor: 'rgba(0, 117, 169, 0.05)'
-          }
-        }
-      }
-    },
-    MuiAlert: {
-      styleOverrides: {
-        standardError: {
-          border: '1px solid #c00000',
-          borderRadius: '0px',
-          backgroundColor: '#fff0ea'
-        },
-        standardWarning: {
-          border: '1px solid #ffa800',
-          borderRadius: '0px',
-          backgroundColor: '#fff8eb'
-        },
-        standardInfo: {
-          border: '1px solid #0062e6',
-          borderRadius: '0px',
-          backgroundColor: '#eaf3ff'
-        },
-        standardSuccess: {
-          border: '1px solid #72bb23',
-          borderRadius: '0px',
-          backgroundColor: '#fcffeb'
-        },
-        action: {
-          color: '#0075a9'
-        },
-        message: {
-          fontSize: '14px',
-          lineHeight: 1.43,
-          letterSpacing: '0.25px',
-          color: '#051039'
-        }
-      }
-    },
-    MuiTabs: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#ffffff',
-          minHeight: '30px'
-        },
-        scrollButtons: {
-          width: '20px'
-        }
-      }
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          minHeight: '30px',
-          textTransform: 'none',
-          minWidth: '76px',
-          '@media (min-width: 600px)': {
-            minWidth: '76px'
-          }
-        },
-        labelIcon: {
-          minHeight: '30px'
-        }
-      }
-    },
-    MuiListItem: {
-      styleOverrides: {
-        root: {
-          '&$selected': {
-            backgroundColor: 'rgba(0, 117, 169, 0.15)',
-            borderLeft: '4px solid #0075a9',
-            '&:hover': {
-              backgroundColor: 'rgba(0, 117, 169, 0.10)'
-            }
-          }
-        },
-        button: {
-          '&:hover': {
-            backgroundColor: 'rgba(0, 117, 169, 0.15)'
-          }
-        }
-      }
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          '&.Mui-selected': {
-            backgroundColor: 'rgba(0, 117, 169, 0.15)',
-            borderLeft: '4px solid #0075a9',
-            '&:hover': {
-              backgroundColor: 'rgba(0, 117, 169, 0.10)'
-            }
-          },
-          '&:hover': {
-            backgroundColor: 'rgba(0, 117, 169, 0.15)'
-          }
-        }
-      }
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          color: 'rgba(5, 16, 57, 0.7)',
-          '&.Mui-focused': {
-            color: '#0075a9'
-          },
-          '&.Mui-error': {
-            color: '#d32f2f!important'
-          }
-        }
-      }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          '&$focused $notchedOutline': {
-            borderColor: '#0075a9'
-          }
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'rgba(0, 117, 169, 0.05)',
-          color: '#051039',
-          '&.Mui-disabled': {
-            backgroundColor: 'white'
-          },
-          '&.Mui-focused': {
-            backgroundColor: 'rgba(0,0,0,0.09)'
-          }
-        },
-        underline: {
-          '&.Mui-disabled:before': {
-            borderBottomStyle: 'none'
-          }
-        }
-      }
-    },
-    MuiRadio: {
-      styleOverrides: {
-        root: {
-          '&.Mui-disabled': {
-            color: '#CCCCCC!important'
-          },
-          '&.Mui-checked': {
-            color: '#0075a9'
-          }
-        }
-      }
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: {
-          '&:last-child': {
-            paddingBottom: 0
-          }
-        }
-      }
-    },
-    MuiDialog: {
-      styleOverrides: {
-        paperWidthLg: {
-          maxWidth: '1280px'
-        }
-      }
-    },
-    MuiButton: {
-      variants: buttonVariants(geowebColors.buttons)
-    },
-    MuiToggleButton: {
-      styleOverrides: {
-        root: variantsToClassName(buttonVariants(geowebColors.buttons))
-      }
-    }
-  }
-});
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3440,7 +3243,20 @@ var ThemeProvider = function ThemeProvider(_ref) {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ThemeProvider$1, {
     theme: currentTheme
-  }, !disableCssBaseline && /*#__PURE__*/React.createElement(CssBaseline, null), children));
+  }, !disableCssBaseline && /*#__PURE__*/React.createElement(CssBaseline, null), /*#__PURE__*/React.createElement(GlobalStyles, {
+    styles: {
+      '@keyframes mui-auto-fill': {
+        from: {
+          display: 'block'
+        }
+      },
+      '@keyframes mui-auto-fill-cancel': {
+        from: {
+          display: 'block'
+        }
+      }
+    }
+  }), children));
 };
 var useThemeContext = function useThemeContext() {
   return React.useContext(ThemeContext);
@@ -3460,14 +3276,532 @@ var ThemeWrapper = function ThemeWrapper(_ref2) {
     disableCssBaseline: disableCssBaseline
   }, children));
 };
-// Wrapper for storybook stories with GWTheme. Will be deprecated
-var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
-  var children = _a.children,
-    props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(ThemeWrapper, Object.assign({
-    theme: GWTheme,
-    disableCssBaseline: true
-  }, props), children);
+
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+var EChartsDarkTheme = {
+  backgroundColor: '#393939',
+  textStyle: {
+    color: '#ffffff',
+    fontSize: '10px',
+    fontWeight: '400'
+  },
+  title: {
+    textStyle: {
+      color: '#ffffff'
+    },
+    subtextStyle: {
+      color: '#ffffff'
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: 'circle',
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc'
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: 'rgba(255, 255, 255, 0.67)',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#979797']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['#979797']
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: 'rgba(255, 255, 255, 0.67)',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#979797']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['#979797']
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: 'rgba(255, 255, 255, 0.67)',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#979797']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['#979797']
+      }
+    }
+  },
+  timeAxis: {
+    nameTextStyle: {
+      color: 'rgba(255, 255, 255, 0.67)'
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: 'rgba(255, 255, 255, 0.67)',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#979797']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['#979797']
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#ffffff'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#979797'
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: '#979797'
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#979797',
+        width: '1'
+      },
+      crossStyle: {
+        color: '#979797',
+        width: '1'
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: '#979797',
+      width: 1
+    },
+    itemStyle: {
+      color: '#e60049',
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: '#979797',
+      borderColor: '#979797',
+      borderWidth: 0.5
+    },
+    checkpointStyle: {
+      color: '#e43c59',
+      borderColor: '#c23531'
+    },
+    label: {
+      color: 'rgba(255, 255, 255, 0.67)',
+      fontSize: '8px'
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#a9334c'
+      },
+      controlStyle: {
+        color: '#979797',
+        borderColor: '#979797',
+        borderWidth: 0.5
+      },
+      label: {
+        color: 'rgba(255, 255, 255, 0.67)'
+      }
+    }
+  },
+  dataZoom: {
+    backgroundColor: 'rgba(47,69,84,0)',
+    dataBackgroundColor: 'rgba(255,255,255,0.3)',
+    fillerColor: 'rgba(167,183,204,0.4)',
+    handleColor: '#313131',
+    handleSize: '100%',
+    textStyle: {
+      color: '#979797'
+    }
+  },
+  markPoint: {
+    label: {
+      color: 'rgba(255, 255, 255, 0.67)'
+    },
+    emphasis: {
+      label: {
+        color: 'rgba(255, 255, 255, 0.67)'
+      }
+    }
+  }
+};
+
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+var EChartsLightTheme = {
+  backgroundColor: 'rgba(0,0,0,0)',
+  textStyle: {
+    color: '#051039',
+    fontSize: '10px',
+    fontWeight: '400'
+  },
+  title: {
+    textStyle: {
+      color: 'rgba(5, 16, 57, 0.67)'
+    },
+    subtextStyle: {
+      color: 'rgba(5, 16, 57, 0.67)'
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: 'circle',
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc'
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  timeAxis: {
+    nameTextStyle: {
+      color: '#6E7079'
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+      fontSize: '8px'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#374061'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#6E7079'
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: '#333333'
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#cccccc',
+        width: 1
+      },
+      crossStyle: {
+        color: '#cccccc',
+        width: 1
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: '#dae1f5',
+      width: 2
+    },
+    itemStyle: {
+      color: '#a4b1d7',
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: '#a4b1d7',
+      borderColor: '#a4b1d7',
+      borderWidth: 1
+    },
+    checkpointStyle: {
+      color: '#316bf3',
+      borderColor: '#ffffff'
+    },
+    label: {
+      color: '#a4b1d7'
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#ffffff'
+      },
+      controlStyle: {
+        color: '#a4b1d7',
+        borderColor: '#a4b1d7',
+        borderWidth: 1
+      },
+      label: {
+        color: '#a4b1d7'
+      }
+    }
+  },
+  dataZoom: {
+    handleSize: '100%',
+    textStyle: {
+      color: '#051039'
+    }
+  },
+  markPoint: {
+    label: {
+      color: '#eeeeee'
+    },
+    emphasis: {
+      label: {
+        color: '#eeeeee'
+      }
+    }
+  }
 };
 
-export { Add, Animation, ArrowDown, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, Fog, FunnelCloud, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, MyLocation, None, Notifications, Now, Options, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, Rain, Resize, Search, Share, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, lightTheme, parseColors, useThemeContext };
+export { Add, Animation, ArrowDown, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, EChartsDarkTheme, EChartsLightTheme, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Export, FastForward, Filter, Fog, FunnelCloud, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, MyLocation, None, Notifications, Now, Options, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, Rain, Resize, Search, Share, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThumbsUp, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, lightTheme, parseColors, useThemeContext };