@opengeoweb/theme 2.1.2 → 2.2.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Theme as MUITheme } from '@material-ui/core';
+import { Theme as MUITheme } from '@mui/material';
 interface ThemeContextProps {
     toggleTheme?: () => void;
     isDark?: boolean;

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

@@ -0,0 +1,5 @@
+import { ComponentsVariants, CSSInterpolation } from '@mui/material';
+import { ButtonStyles, ButtonStyle } from './types';
+export declare const buttonStyle: (button: ButtonStyle) => CSSInterpolation;
+export declare const toggleButtonStyle: (buttonVariants: ComponentsVariants['MuiButton']) => CSSInterpolation;
+export declare const buttonVariants: (buttons: ButtonStyles) => ComponentsVariants['MuiButton'];

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

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

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

@@ -1,3 +1,3 @@
 import { GeowebColorPalette } from './types';
 export declare const colors: GeowebColorPalette;
-export declare const darkTheme: import("@material-ui/core").Theme;
+export declare const darkTheme: import("@mui/material").Theme;

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

@@ -1,7 +1 @@
-import { AlertClassKey } from '@material-ui/lab/Alert';
-declare module '@material-ui/core/styles/overrides' {
-    interface ComponentNameToClassKey {
-        MuiAlert: AlertClassKey;
-    }
-}
-export declare const GWTheme: import("@material-ui/core").Theme;
+export declare const GWTheme: import("@mui/material").Theme;

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

@@ -1,3 +1,3 @@
 import { GeowebColorPalette } from './types';
 export declare const colors: GeowebColorPalette;
-export declare const lightTheme: import("@material-ui/core").Theme;
+export declare const lightTheme: import("@mui/material").Theme;

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

@@ -2,6 +2,26 @@
 interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
+export interface ButtonStyle {
+    default: CSSProperties;
+    mouseOver: CSSProperties;
+    active: CSSProperties;
+    activeMouseOver: CSSProperties;
+    disabled: CSSProperties;
+}
+export interface ButtonStyles {
+    primary: ButtonStyle;
+    secondary: ButtonStyle;
+    tertiary: ButtonStyle;
+    flat: ButtonStyle;
+    tool: ButtonStyle;
+    primaryMouseover: CSSProperties;
+    primaryActive: CSSProperties;
+    flatMouseover: CSSProperties;
+    focusDefault: CSSProperties;
+    disabled: CSSProperties;
+    surfaceIconDefault: CSSProperties;
+}
 export declare type GeowebColorPalette = {
     background: {
         surface: CSSProperties['color'];
@@ -11,15 +31,7 @@ export declare type GeowebColorPalette = {
     brand: {
         brand: CSSProperties['color'];
     };
-    buttons: {
-        primary: CSSProperties;
-        primaryMouseover: CSSProperties;
-        primaryActive: CSSProperties;
-        flatMouseover: CSSProperties;
-        focusDefault: CSSProperties;
-        disabled: CSSProperties;
-        surfaceIconDefault: CSSProperties;
-    };
+    buttons: ButtonStyles;
     typographyAndIcons: {
         text: CSSProperties['color'];
         icon: CSSProperties['color'];
@@ -110,7 +122,7 @@ export declare type GeowebColorPalette = {
 export declare type Elevations = {
     [id: string]: string;
 };
-declare module '@material-ui/core/styles/createPalette' {
+declare module '@mui/material/styles' {
     interface Palette {
         geowebColors: GeowebColorPalette;
     }
@@ -118,4 +130,13 @@ declare module '@material-ui/core/styles/createPalette' {
         geowebColors: GeowebColorPalette;
     }
 }
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        tertiary: true;
+        flat: true;
+        tool: true;
+    }
+}
 export {};

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

@@ -1,7 +1,7 @@
-import { Theme, PaletteType } from '@material-ui/core';
-import { Shadows } from '@material-ui/core/styles/shadows';
+import { Theme, PaletteMode } from '@mui/material';
+import { Shadows } from '@mui/material/styles/shadows';
 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 createTheme: (paletteType: PaletteType, geowebColors: GeowebColorPalette, shadows: Shadows) => Theme;
+export declare const createTheme: (paletteType: PaletteMode, geowebColors: GeowebColorPalette, shadows: Shadows) => Theme;

package/lib/stories/Backdrop.stories.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface BackdropDemoProps {
     isOpen?: boolean;
+    handleClose?: () => void;
 }
 export declare const BackdropDemo: React.FC<BackdropDemoProps>;
 export declare const Backdrop: React.FC;

package/lib/stories/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const ButtonDemo: React.FC;
+export declare const Buttons: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/stories/ToggleButton.stories.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const ToggleButtonDemo: React.FC;
+export declare const ToggleButtons: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -8,6 +8,8 @@ export { Table } from './Table.stories';
 export { Tabs } from './Tabs.stories';
 export { Typography, TypographyGWTheme } from './Typography.stories';
 export { Tooltips } from './Tooltip.stories';
+export { Buttons } from './Button.stories';
+export { ToggleButtons } from './ToggleButton.stories';
 export { FormElementsGWTheme, FormElements } from './FormElements.stories';
 declare const _default: {
     title: string;

package/lib/stories/snapshots/Button.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ButtonLight: () => React.ReactElement;
+export declare const ButtonDark: () => React.ReactElement;

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

@@ -5,3 +5,4 @@ declare const _default: {
 export default _default;
 export declare const FormElementsLight: () => React.ReactElement;
 export declare const FormElementsDark: () => React.ReactElement;
+export declare const FormElementsGWTheme: () => React.ReactElement;

package/lib/stories/snapshots/ToggleButton.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ToggleButtonLight: () => React.ReactElement;
+export declare const ToggleButtonDark: () => React.ReactElement;

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
-  "main": "./theme.umd.js",
-  "module": "./theme.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "react": "16.14.0",
-    "@material-ui/icons": "^4.9.1"
+    "@mui/material": "^5.2.8",
+    "react": "^17.0.2",
+    "@mui/styles": "^5.2.3",
+    "@mui/icons-material": "^5.2.5"
   }
 }