@opengeoweb/theme 9.8.0 → 9.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "9.8.0",
+  "version": "9.10.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,8 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@mui/material": "5.12.0",
-    "@mui/system": "^5.15.1"
+    "@mui/material": "~5.15.11",
+    "@mui/system": "^5.15.1",
+    "@mui/x-date-pickers": "^6.18.5"
   },
   "peerDependencies": {
     "react": "18"

package/src/index.d.ts

@@ -7,3 +7,4 @@ export { createTheme, breakpoints } from './lib/utils/createTheme';
 export * from './lib/components/Icons';
 export * from './lib/components/Paths';
 export * from './lib/types';
+export * from './lib/utils/EChartsThemes';

package/src/lib/components/Theme/ThemeContext.d.ts

@@ -15,5 +15,4 @@ export interface ThemeProviderProps {
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useThemeContext: () => Partial<ThemeContextProps>;
 export declare const ThemeWrapper: React.FC<ThemeProviderProps>;
-export declare const ThemeWrapperOldTheme: React.FC<ThemeProviderProps>;
 export {};

package/src/lib/stories/FormElements.stories.d.ts

@@ -3,7 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const FormElementsGWTheme: React.FC;
 export declare const FormElementsLight: {
     (): React.ReactElement;
     storyName: string;

package/src/lib/stories/Select.stories.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SelectLight: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const SelectDark: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/src/lib/stories/Typography.stories.d.ts

@@ -3,7 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TypographyGWTheme: React.FC;
 export declare const TypographyLight: {
     (): React.ReactElement;
     storyName: string;

package/src/lib/types.d.ts

@@ -18,7 +18,7 @@ export interface ButtonStyle {
     disabled: CSSProperties;
     focus: CSSProperties;
 }
-export type GeowebColorPalette = {
+export interface GeowebColorPalette {
     background: {
         surface: CSSProperties['color'];
         surfaceApp: CSSProperties['color'];
@@ -47,6 +47,7 @@ export type GeowebColorPalette = {
         buttonIcon: CSSProperties['color'];
         iconLinkActive: CSSProperties['color'];
         iconLinkDisabled: CSSProperties['color'];
+        iconWarning: CSSProperties['color'];
         textLinkActive: CSSProperties['color'];
         buttonIconTertiaryFlat: CSSProperties['color'];
         inactiveText: CSSProperties['color'];
@@ -56,6 +57,14 @@ export type GeowebColorPalette = {
         active: CSSProperties;
         disabled: CSSProperties;
         label: CSSProperties;
+        mouseOver: CSSProperties;
+        error: CSSProperties;
+        errorMouseOver: CSSProperties;
+    };
+    menuItem: {
+        mouseOver: CSSProperties['color'];
+        selected: CSSProperties['color'];
+        selectedMouseOver: CSSProperties['color'];
     };
     tab: {
         mouseOver: CSSProperties;
@@ -188,10 +197,8 @@ export type GeowebColorPalette = {
         action: CSSProperties['color'];
         actionHover: CSSProperties;
     };
-};
-export type Elevations = {
-    [id: string]: string;
-};
+}
+export type Elevations = Record<string, string>;
 declare module '@mui/material/styles' {
     interface Palette {
         geowebColors: GeowebColorPalette;

package/src/lib/utils/EChartsThemes/darkTheme.d.ts

@@ -0,0 +1,249 @@
+export declare const EChartsDarkTheme: {
+    backgroundColor: string;
+    textStyle: {
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    line: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    bar: {
+        itemStyle: {
+            barBorderWidth: number;
+            barBorderColor: string;
+        };
+    };
+    scatter: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        nameTextStyle: {
+            color: string;
+        };
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    toolbox: {
+        iconStyle: {
+            borderColor: string;
+        };
+        emphasis: {
+            iconStyle: {
+                borderColor: string;
+            };
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: string;
+            };
+            crossStyle: {
+                color: string;
+                width: string;
+            };
+        };
+    };
+    timeline: {
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+            borderWidth: number;
+        };
+        controlStyle: {
+            color: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        checkpointStyle: {
+            color: string;
+            borderColor: string;
+        };
+        label: {
+            color: string;
+            fontSize: string;
+        };
+        emphasis: {
+            itemStyle: {
+                color: string;
+            };
+            controlStyle: {
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    dataZoom: {
+        backgroundColor: string;
+        dataBackgroundColor: string;
+        fillerColor: string;
+        handleColor: string;
+        handleSize: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    markPoint: {
+        label: {
+            color: string;
+        };
+        emphasis: {
+            label: {
+                color: string;
+            };
+        };
+    };
+};

package/src/lib/utils/EChartsThemes/index.d.ts

@@ -0,0 +1,3 @@
+import { EChartsDarkTheme } from './darkTheme';
+import { EChartsLightTheme } from './lightTheme';
+export { EChartsLightTheme, EChartsDarkTheme };

package/src/lib/utils/EChartsThemes/lightTheme.d.ts

@@ -0,0 +1,244 @@
+export declare const EChartsLightTheme: {
+    backgroundColor: string;
+    textStyle: {
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    line: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    bar: {
+        itemStyle: {
+            barBorderWidth: number;
+            barBorderColor: string;
+        };
+    };
+    scatter: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        nameTextStyle: {
+            color: string;
+        };
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontSize: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    toolbox: {
+        iconStyle: {
+            borderColor: string;
+        };
+        emphasis: {
+            iconStyle: {
+                borderColor: string;
+            };
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            crossStyle: {
+                color: string;
+                width: number;
+            };
+        };
+    };
+    timeline: {
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+            borderWidth: number;
+        };
+        controlStyle: {
+            color: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        checkpointStyle: {
+            color: string;
+            borderColor: string;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                color: string;
+            };
+            controlStyle: {
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    dataZoom: {
+        handleSize: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    markPoint: {
+        label: {
+            color: string;
+        };
+        emphasis: {
+            label: {
+                color: string;
+            };
+        };
+    };
+};

package/src/lib/utils/createTheme.d.ts

@@ -7,10 +7,10 @@ export declare const breakpoints: {
     desktopHD: number;
     desktopHDWide: number;
 };
-type CreateThemeProps = {
+interface CreateThemeProps {
     paletteType?: PaletteMode;
     geowebColors?: GeowebColorPalette;
     elevations?: Elevations;
-};
+}
 export declare const createTheme: ({ paletteType, geowebColors: defaultGeowebColors, elevations: defaultShadows, }: CreateThemeProps) => Theme;
 export {};

package/src/lib/utils/themes/index.d.ts

@@ -1,5 +1,4 @@
 import { colors as colorsLight, elevations as elevationsLight } from './lightTheme';
 export declare const lightTheme: import("@mui/material").Theme;
 export declare const darkTheme: import("@mui/material").Theme;
-export { GWTheme } from './gwTheme';
 export { colorsLight, elevationsLight };

package/src/lib/utils/themes/gwTheme.d.ts

@@ -1 +0,0 @@
-export declare const GWTheme: import("@mui/material").Theme;