From d3be9e71d3fcff2a720df11a1594648a89fcc8bb Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 22 Jun 2024 20:34:22 +0530
Subject: [PATCH 1/3] Fix inherit color is inconsistent between ThemeProvider
 and CssVarsProvider

---
 packages/mui-material/src/AppBar/AppBar.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index d1f60b6a9960d6..8b6d7b70ad1b82 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -123,14 +123,16 @@ const AppBarRoot = styled(Paper, {
         },
       })),
     {
-      props: { enableColorOnDark: true },
+      props: (props) =>
+        props.enableColorOnDark === true && !['inherit', 'transparent'].includes(props.color),
       style: {
         backgroundColor: 'var(--AppBar-background)',
         color: 'var(--AppBar-color)',
       },
     },
     {
-      props: { enableColorOnDark: false },
+      props: (props) =>
+        props.enableColorOnDark === false && !['inherit', 'transparent'].includes(props.color),
       style: {
         backgroundColor: 'var(--AppBar-background)',
         color: 'var(--AppBar-color)',

From b95229f258da2a13690f58f11c9d8663ca0dd138 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 22 Jun 2024 22:20:29 +0530
Subject: [PATCH 2/3] add tests

---
 .../mui-material/src/AppBar/AppBar.test.js    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/mui-material/src/AppBar/AppBar.test.js b/packages/mui-material/src/AppBar/AppBar.test.js
index 9084206c03eca8..9df49cea29d8e5 100644
--- a/packages/mui-material/src/AppBar/AppBar.test.js
+++ b/packages/mui-material/src/AppBar/AppBar.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import AppBar, { appBarClasses as classes } from '@mui/material/AppBar';
 import Paper from '@mui/material/Paper';
+import { ThemeProvider, createTheme, CssVarsProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<AppBar />', () => {
@@ -62,4 +63,38 @@ describe('<AppBar />', () => {
       expect(appBar).to.have.class('mui-fixed');
     });
   });
+
+  it('should inherit Paper background color with ThemeProvider', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    render(
+      <ThemeProvider theme={createTheme()}>
+        <AppBar data-testid="root" color="inherit">
+          Hello World
+        </AppBar>
+      </ThemeProvider>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).toHaveComputedStyle({ backgroundColor: 'rgb(255, 255, 255)' });
+  });
+
+  it('should inherit Paper background color with CssVarsProvider', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    render(
+      <CssVarsProvider>
+        <AppBar data-testid="root" color="inherit">
+          Hello World
+        </AppBar>
+      </CssVarsProvider>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).toHaveComputedStyle({ backgroundColor: 'rgb(255, 255, 255)' });
+  });
 });

From 523811bb55cb3c6760787a88dd22896fd25ef0c1 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 22 Jun 2024 22:41:27 +0530
Subject: [PATCH 3/3] use default theme palette paper color

---
 packages/mui-material/src/AppBar/AppBar.test.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material/src/AppBar/AppBar.test.js b/packages/mui-material/src/AppBar/AppBar.test.js
index 9df49cea29d8e5..6319ef4b5f7a6a 100644
--- a/packages/mui-material/src/AppBar/AppBar.test.js
+++ b/packages/mui-material/src/AppBar/AppBar.test.js
@@ -3,7 +3,8 @@ import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import AppBar, { appBarClasses as classes } from '@mui/material/AppBar';
 import Paper from '@mui/material/Paper';
-import { ThemeProvider, createTheme, CssVarsProvider } from '@mui/material/styles';
+import { ThemeProvider, CssVarsProvider, hexToRgb } from '@mui/material/styles';
+import defaultTheme from '../styles/defaultTheme';
 import describeConformance from '../../test/describeConformance';
 
 describe('<AppBar />', () => {
@@ -70,7 +71,7 @@ describe('<AppBar />', () => {
     }
 
     render(
-      <ThemeProvider theme={createTheme()}>
+      <ThemeProvider theme={defaultTheme}>
         <AppBar data-testid="root" color="inherit">
           Hello World
         </AppBar>
@@ -78,7 +79,9 @@ describe('<AppBar />', () => {
     );
 
     const appBar = screen.getByTestId('root');
-    expect(appBar).toHaveComputedStyle({ backgroundColor: 'rgb(255, 255, 255)' });
+    expect(appBar).toHaveComputedStyle({
+      backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+    });
   });
 
   it('should inherit Paper background color with CssVarsProvider', function test() {
@@ -95,6 +98,8 @@ describe('<AppBar />', () => {
     );
 
     const appBar = screen.getByTestId('root');
-    expect(appBar).toHaveComputedStyle({ backgroundColor: 'rgb(255, 255, 255)' });
+    expect(appBar).toHaveComputedStyle({
+      backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+    });
   });
 });