Fix custom theme variables used

Author: Tristan-WorkGH

package-lock.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.126.0",
+        "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.126.0.tgz",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^5.18.0",
         "@mui/lab": "5.0.0-alpha.175",

package.json

@@ -53,26 +53,7 @@ const lightTheme: ThemeOptions = {
     palette: {
         mode: 'light',
     },
-    arrow: {
-        fill: '#212121',
-        stroke: '#212121',
-    },
-    arrow_hover: {
-        fill: 'white',
-        stroke: 'white',
-    },
-    circle: {
-        stroke: 'white',
-        fill: 'white',
-    },
-    circle_hover: {
-        stroke: '#212121',
-        fill: '#212121',
-    },
-    link: {
-        color: 'blue',
-    },
-    aggrid: {
+    agGrid: {
         theme: 'ag-theme-alpine',
     },
 };
@@ -81,26 +62,7 @@ const darkTheme: ThemeOptions = {
     palette: {
         mode: 'dark',
     },
-    arrow: {
-        fill: 'white',
-        stroke: 'white',
-    },
-    arrow_hover: {
-        fill: '#424242',
-        stroke: '#424242',
-    },
-    circle: {
-        stroke: '#424242',
-        fill: '#424242',
-    },
-    circle_hover: {
-        stroke: 'white',
-        fill: 'white',
-    },
-    link: {
-        color: 'green',
-    },
-    aggrid: {
+    agGrid: {
         theme: 'ag-theme-alpine-dark',
     },
 };

src/components/App/AppWrapper.tsx

@@ -4,35 +4,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-// https://mui.com/material-ui/customization/theming/#typescript
-import { CSSObject } from '@mui/styled-engine';
-import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles/createTheme';
+
+// Just to be sure that commons-ui's mui augmentation is seen by tsc
+import type {} from '@gridsuite/commons-ui';
 
 // https://mui.com/x/react-date-pickers/quickstart/#theme-augmentation
 import type {} from '@mui/x-date-pickers/themeAugmentation';
-
-declare module '@mui/material/styles/createTheme' {
-    export * from '@mui/material/styles/createTheme';
-
-    type ThemeExtension = {
-        arrow: CSSObject;
-        arrow_hover: CSSObject;
-        circle: CSSObject;
-        circle_hover: CSSObject;
-        link: CSSObject;
-        mapboxStyle: string;
-        aggrid: {
-            theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
-        };
-        agGridThemeOverride?: CSSObject;
-    };
-
-    export interface Theme extends MuiTheme, ThemeExtension {}
-
-    // allow configuration using `createTheme`
-    export interface ThemeOptions extends MuiThemeOptions, Partial<ThemeExtension> {}
-}
-
-declare module '@mui/utils/capitalize' {
-    export default function capitalize<S extends string>(string: S): Capitalize<S>;
-}
+import type {} from '@mui/x-date-pickers/AdapterDateFns';