Fix custom theme variables used

package.json

@@ -22,7 +22,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",

src/components/app-wrapper.tsx

@@ -90,36 +90,17 @@ const lightTheme = createTheme({
     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: 'black',
     },
     row: {
         primary: '#E8E8E8',
-        secondary: '#F4F4F4',
         hover: '#8E9C9B',
     },
-    aggrid: {
+    agGrid: {
         theme: 'ag-theme-alpine',
         highlightColor: '#CFDFFB',
-    },
-    agGridBackground: {
-        color: 'white',
+        backgroundColor: 'white',
     },
     typography: {
         button: {
@@ -132,36 +113,17 @@ const darkTheme = createTheme({
     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: 'white',
     },
     row: {
         primary: '#272727',
-        secondary: '#323232',
         hover: '#545C5B',
     },
-    aggrid: {
+    agGrid: {
         theme: 'ag-theme-alpine-dark',
         highlightColor: '#1F3B5B',
-    },
-    agGridBackground: {
-        color: '#383838',
+        backgroundColor: '#383838',
     },
     typography: {
         button: {

src/components/directory-breadcrumbs.tsx

@@ -20,24 +20,24 @@ const styles = {
         textAlign: 'center',
         color: theme.link.color,
 
-        backgroundColor: theme.row.primary as string,
+        backgroundColor: theme.row.primary,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 
         '&:hover, &:focus': {
-            backgroundColor: theme.row.hover as string,
+            backgroundColor: theme.row.hover,
             textDecoration: 'none',
         },
         '&:active': {
-            backgroundColor: emphasize(theme.row.hover as string, 0.15),
+            backgroundColor: emphasize(theme.row.hover, 0.15),
         },
     }),
     directory: (theme) => ({
         display: 'inline-grid',
         alignItems: 'center',
         textAlign: 'center',
 
-        backgroundColor: theme.row.hover as string,
+        backgroundColor: theme.row.hover,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 

src/components/directory-content.tsx

@@ -62,7 +62,7 @@ const styles = {
                 backgroundColor: 'inherit',
             },
             '12%, 36%, to': {
-                backgroundColor: theme.row.hover as string,
+                backgroundColor: theme.row.hover,
             },
         },
     }),

src/components/directory-tree-view.tsx

@@ -25,7 +25,7 @@ const styles = {
         userSelect: 'none',
         '&:focus > .MuiTreeItem-content .MuiTreeItem-label, .focused': {
             borderRadius: theme.spacing(2),
-            backgroundColor: theme.aggrid.highlightColor,
+            backgroundColor: theme.agGrid?.highlightColor,
         },
         '&:hover': {
             borderRadius: theme.spacing(2),
@@ -34,7 +34,7 @@ const styles = {
     }),
     treeItemSelected: (theme) => ({
         borderRadius: `${theme.spacing(2)}!important`,
-        backgroundColor: theme.aggrid.highlightColor,
+        backgroundColor: theme.agGrid?.highlightColor,
     }),
     treeItemContent: (theme) => ({
         paddingRight: theme.spacing(1),
@@ -54,7 +54,7 @@ const styles = {
         color: 'inherit',
     }),
     treeItemHovered: (theme) => ({
-        backgroundColor: `${theme.aggrid.highlightColor}!important`,
+        backgroundColor: `${theme.agGrid?.highlightColor}!important`,
         borderRadius: theme.spacing(2),
     }),
     treeItemLabelRoot: (theme) => ({

src/components/utils/renderers/user-cell-renderer.tsx

@@ -41,7 +41,7 @@ const styles = {
         height: '32px',
         width: '32px',
         fontSize: theme.typography.fontSize,
-        backgroundColor: theme.row.hover as string,
+        backgroundColor: theme.row.hover,
     }),
 } as const satisfies MuiStyles;
 

src/module-mui.d.ts

@@ -4,35 +4,32 @@
  * 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/.
  */
-/* eslint-disable spaced-comment */
-
-// https://mui.com/material-ui/customization/theming/#typescript
-// eslint-disable-next-line import/no-extraneous-dependencies -- lib from MUI
-import { CSSObject } from '@mui/styled-engine';
 import type { Property } from 'csstype';
-// 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/material-ui/customization/theming/#typescript
 declare module '@mui/material/styles' {
-    type ThemeExtension = {
-        arrow: CSSObject;
-        arrow_hover: CSSObject;
-        circle: CSSObject;
-        circle_hover: CSSObject;
-        link: CSSObject;
-        row: CSSObject;
-        aggrid: {
-            theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
-            highlightColor: Property.Color;
+    interface Theme {
+        link: {
+            color: Property.Color;
         };
-        agGridBackground: CSSObject;
-    };
-
-    export interface Theme extends /*MuiTheme,*/ ThemeExtension {}
+        row: {
+            primary: Property.BackgroundColor;
+            hover: Property.BackgroundColor;
+        };
+    }
 
     // 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>;
+    interface ThemeOptions {
+        // note: options aren't optional because there aren't default values in code
+        link: {
+            color: Property.Color;
+        };
+        row: {
+            primary: Property.BackgroundColor;
+            hover: Property.BackgroundColor;
+        };
+    }
 }