[material-ui] Add paperChannel token (#41447)

mui · Mar 11, 2024 · 9aec566 · 9aec566
1 parent be6c430
commit 9aec566
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');