diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 31c1aa8f733b10..8b34b5b546cdee 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -153,6 +153,7 @@ describe('[Material UI] CssVarsProvider', () => { paper: 'var(--mui-palette-background-paper)', default: 'var(--mui-palette-background-default)', defaultChannel: 'var(--mui-palette-background-defaultChannel)', + paperChannel: 'var(--mui-palette-background-paperChannel)', }), ); expect(screen.getByTestId('palette-action').textContent).to.equal( diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index fa42f2a605957a..e2d45afbbc7b93 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -69,6 +69,7 @@ export type Overlays = [ export interface PaletteBackgroundChannel { defaultChannel: string; + paperChannel: string; } export interface PaletteCommonChannel { diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 3d8c2a31f3f357..ee1f339601a0bb 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -344,6 +344,9 @@ export default function extendTheme(options = {}, ...args) { // MUI X - DataGrid needs this token. setColorChannel(palette.background, 'default'); + // added for consistency with the `background.default` token + setColorChannel(palette.background, 'paper'); + setColorChannel(palette.common, 'background'); setColorChannel(palette.common, 'onBackground'); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index c7990a0043b46b..c25b8d7f69345e 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -59,6 +59,9 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.dark.palette.background.defaultChannel).to.equal('18 18 18'); expect(theme.colorSchemes.light.palette.background.defaultChannel).to.equal('255 255 255'); + expect(theme.colorSchemes.dark.palette.background.paperChannel).to.equal('18 18 18'); + expect(theme.colorSchemes.light.palette.background.paperChannel).to.equal('255 255 255'); + expect(theme.colorSchemes.dark.palette.primary.mainChannel).to.equal('144 202 249'); expect(theme.colorSchemes.dark.palette.primary.darkChannel).to.equal('66 165 245'); expect(theme.colorSchemes.dark.palette.primary.lightChannel).to.equal('227 242 253');