From a243b3661edad184fada2e06fe8e563ffc99bd09 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 19 Sep 2025 19:32:17 +0200 Subject: [PATCH] Fix custom theme variables used --- package-lock.json | 6 +-- package.json | 2 +- src/components/app-wrapper.tsx | 46 ++---------------- src/components/directory-breadcrumbs.tsx | 8 ++-- src/components/directory-content.tsx | 2 +- src/components/directory-tree-view.tsx | 6 +-- .../utils/renderers/user-cell-renderer.tsx | 2 +- src/module-mui.d.ts | 47 +++++++++---------- 8 files changed, 39 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index df9128e99..8e79ab7a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -3122,8 +3122,8 @@ }, "node_modules/@gridsuite/commons-ui": { "version": "0.126.0", - "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.126.0.tgz", - "integrity": "sha512-PQKNxVOYeygiRMLsKyBdjF+u1HZKG3yZONDc4YHGpaV8rOqmtHC7721qUL6dg5EP7C8b+Wi7nlSxeMd3n/UrBg==", + "resolved": "file:../commons-ui/gridsuite-commons-ui-0.126.0.tgz", + "integrity": "sha512-LCXsqixdcX8HWDeNw8rM+VC0DZAULwht1ymx3fqlAu5v021Ao9Ko4cmusuWRKsVVbfgmikk/zPbDdOlpxXmkiQ==", "license": "MPL-2.0", "dependencies": { "@ag-grid-community/locale": "^33.3.2", diff --git a/package.json b/package.json index 0a509f387..fb9861b28 100644 --- a/package.json +++ b/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", diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 59efe3556..cec7c109b 100644 --- a/src/components/app-wrapper.tsx +++ b/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: { diff --git a/src/components/directory-breadcrumbs.tsx b/src/components/directory-breadcrumbs.tsx index 036ce7758..0bcf8d45a 100644 --- a/src/components/directory-breadcrumbs.tsx +++ b/src/components/directory-breadcrumbs.tsx @@ -20,16 +20,16 @@ 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) => ({ @@ -37,7 +37,7 @@ const styles = { 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), diff --git a/src/components/directory-content.tsx b/src/components/directory-content.tsx index e9f3f88fd..02e467ba0 100644 --- a/src/components/directory-content.tsx +++ b/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, }, }, }), diff --git a/src/components/directory-tree-view.tsx b/src/components/directory-tree-view.tsx index 3c175afcd..174af45f9 100644 --- a/src/components/directory-tree-view.tsx +++ b/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) => ({ diff --git a/src/components/utils/renderers/user-cell-renderer.tsx b/src/components/utils/renderers/user-cell-renderer.tsx index 350071c03..796bfade4 100644 --- a/src/components/utils/renderers/user-cell-renderer.tsx +++ b/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; diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts index a65956be0..47a37ffe3 100644 --- a/src/module-mui.d.ts +++ b/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 {} -} - -declare module '@mui/utils/capitalize' { - export default function capitalize(string: S): Capitalize; + 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; + }; + } }