Update our usage of theme variables to support all MUI versions

Author: djhi

examples/demo/src/App.tsx

@@ -43,6 +43,7 @@ const store = localStorageStore(undefined, 'ECommerce');
 
 const App = () => {
     const [themeName] = useStore<ThemeName>('themeName', 'soft');
+    const singleTheme = themes.find(theme => theme.name === themeName)?.single;
     const lightTheme = themes.find(theme => theme.name === themeName)?.light;
     const darkTheme = themes.find(theme => theme.name === themeName)?.dark;
     return (
@@ -58,6 +59,7 @@ const App = () => {
             layout={Layout}
             i18nProvider={i18nProvider}
             disableTelemetry
+            theme={singleTheme}
             lightTheme={lightTheme}
             darkTheme={darkTheme}
             defaultTheme="light"

examples/demo/src/layout/Layout.tsx

@@ -4,7 +4,14 @@ import AppBar from './AppBar';
 import Menu from './Menu';
 
 export default ({ children }: { children: React.ReactNode }) => (
-    <Layout appBar={AppBar} menu={Menu}>
+    <Layout
+        appBar={AppBar}
+        menu={Menu}
+        sx={{
+            backgroundColor: theme =>
+                (theme.vars || theme).palette.background.default,
+        }}
+    >
         {children}
     </Layout>
 );

examples/demo/src/mui.d.ts

@@ -0,0 +1,12 @@
+import type {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material/styles' {
+    interface PaletteOptions {
+        bulkActionsToolbarColor?: string;
+        bulkActionsToolbarBackgroundColor?: string;
+    }
+    interface Palette {
+        bulkActionsToolbarColor: string;
+        bulkActionsToolbarBackgroundColor: string;
+    }
+}

examples/demo/src/themes/cssVariablesTheme.ts

@@ -0,0 +1,28 @@
+import { createTheme, lighten } from '@mui/material';
+import { RaThemeOptions } from 'react-admin';
+
+const defaultTheme = createTheme();
+const lightTheme: RaThemeOptions = {
+    palette: {
+        mode: 'light',
+        bulkActionsToolbarBackgroundColor: lighten(
+            defaultTheme.palette.primary.light,
+            0.8
+        ),
+    },
+};
+const darkTheme: RaThemeOptions = {
+    palette: {
+        mode: 'dark',
+        bulkActionsToolbarBackgroundColor: defaultTheme.palette.primary.dark,
+    },
+};
+
+export const cssVariablesTheme = createTheme({
+    cssVariables: true,
+    defaultColorScheme: 'light',
+    colorSchemes: {
+        light: lightTheme,
+        dark: darkTheme,
+    },
+});

examples/demo/src/themes/themes.tsx

@@ -14,6 +14,7 @@ import {
 
 import { softDarkTheme, softLightTheme } from './softTheme';
 import { chiptuneTheme } from './chiptuneTheme';
+import { cssVariablesTheme } from './cssVariablesTheme';
 
 export type ThemeName =
     | 'soft'
@@ -22,13 +23,15 @@ export type ThemeName =
     | 'nano'
     | 'radiant'
     | 'house'
-    | 'chiptune';
+    | 'chiptune'
+    | 'cssVariables';
 
-export interface Theme {
+export type Theme = {
     name: ThemeName;
-    light: RaThemeOptions;
+    light?: RaThemeOptions;
     dark?: RaThemeOptions;
-}
+    single?: RaThemeOptions;
+};
 
 const BW_SIDEBAR_OVERRIDE = {
     styleOverrides: {
@@ -45,6 +48,10 @@ const BW_SIDEBAR_OVERRIDE = {
 
 export const themes: Theme[] = [
     { name: 'soft', light: softLightTheme, dark: softDarkTheme },
+    {
+        name: 'cssVariables',
+        single: cssVariablesTheme,
+    },
     { name: 'default', light: defaultLightTheme, dark: defaultDarkTheme },
     {
         name: 'B&W',

packages/ra-input-rich-text/src/RichTextInput.tsx

@@ -225,26 +225,25 @@ const Root = styled('div', {
     [`& .${classes.editorContent}`]: {
         width: '100%',
         '& .ProseMirror': {
-            backgroundColor: theme.palette.background.default,
-            borderColor:
-                theme.palette.mode === 'light'
-                    ? 'rgba(0, 0, 0, 0.23)'
-                    : 'rgba(255, 255, 255, 0.23)',
+            backgroundColor: (theme.vars || theme).palette.background.default,
+            borderColor: (theme.vars || theme).palette.divider,
             borderRadius: theme.shape.borderRadius,
             borderStyle: 'solid',
             borderWidth: '1px',
             padding: theme.spacing(1),
 
             '&[contenteditable="false"], &[contenteditable="false"]:hover, &[contenteditable="false"]:focus':
                 {
-                    backgroundColor: theme.palette.action.disabledBackground,
+                    backgroundColor: (theme.vars || theme).palette.action
+                        .disabledBackground,
                 },
 
             '&:hover': {
-                backgroundColor: theme.palette.action.hover,
+                backgroundColor: (theme.vars || theme).palette.action.hover,
             },
             '&:focus': {
-                backgroundColor: theme.palette.background.default,
+                backgroundColor: (theme.vars || theme).palette.background
+                    .default,
             },
             '& p': {
                 margin: '0 0 1em 0',

packages/ra-input-rich-text/src/buttons/LevelSelect.tsx

@@ -8,7 +8,7 @@ import {
     Menu,
     MenuItem,
 } from '@mui/material';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useTranslate } from 'ra-core';
 import clsx from 'clsx';
@@ -213,7 +213,7 @@ const classes = {
 const Root = styled('div')(({ theme }) => ({
     [`&.${classes.list}`]: {
         borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
+        border: `1px solid color-mix(in srgb, ${(theme.vars || theme).palette.action.active}, transparent 12%) solid 2px`,
     },
     [`& .${classes.sizeSmall}`]: {
         paddingTop: 1,

packages/ra-input-rich-text/src/mui.d.ts

@@ -0,0 +1,12 @@
+import type {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material/styles' {
+    interface PaletteOptions {
+        bulkActionsToolbarColor?: string;
+        bulkActionsToolbarBackgroundColor?: string;
+    }
+    interface Palette {
+        bulkActionsToolbarColor: string;
+        bulkActionsToolbarBackgroundColor: string;
+    }
+}

packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx

@@ -43,7 +43,7 @@ const StyledContainer = styled(Container)(({ theme }) => ({
     },
 
     [`& .${classes.title}`]: {
-        color: theme.palette.common.white,
+        color: (theme.vars || theme).palette.common.white,
         marginBottom: theme.spacing(4),
         textAlign: 'center',
     },

packages/ra-no-code/src/ResourceConfiguration/ResourceConfiguration.tsx

@@ -163,7 +163,7 @@ const StyledCard = styled(Card)(({ theme }) => ({
     },
 
     [`& .${classes.fieldList}`]: {
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
     },
 
     [`& .${classes.fieldTitle}`]: {
@@ -180,6 +180,6 @@ const StyledCard = styled(Card)(({ theme }) => ({
     },
 
     [`& .${classes.actions}`]: {
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
     },
 }));