diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 27293ce5e53d3e..a99e6eb0b7b855 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -150,6 +150,7 @@ describe('[Material UI] CssVarsProvider', () => { JSON.stringify({ paper: 'var(--mui-palette-background-paper)', default: 'var(--mui-palette-background-default)', + defaultChannel: 'var(--mui-palette-background-defaultChannel)', }), ); 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 fb2ceb05203afc..26f92bae2b9587 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -64,6 +64,10 @@ export type Overlays = [ string | undefined, ]; +export interface PaletteBackgroundChannel { + defaultChannel: string; +} + export interface PaletteCommonChannel { background: string; backgroundChannel: string; @@ -194,6 +198,7 @@ export interface PaletteTooltip { // The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts` export interface ColorSystemOptions { palette?: PaletteOptions & { + background?: Partial; common?: Partial; primary?: Partial; secondary?: Partial; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 2628a52a6f450a..14ad3990b18de0 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -251,6 +251,8 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } + palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token. + palette.common.backgroundChannel = colorChannel(palette.common.background); palette.common.onBackgroundChannel = colorChannel(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 85230a3fef9930..a92d9fead8fffa 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -53,6 +53,9 @@ describe('experimental_extendTheme', () => { it('should generate color channels', () => { const theme = 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.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'); diff --git a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts index b7e1db589b8987..b34facddabf5d9 100644 --- a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts +++ b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts @@ -1,6 +1,7 @@ import type { CssVarsTheme, CssVarsPalette, + PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteTextChannel, @@ -18,6 +19,7 @@ declare module '@mui/material/styles' { // Extend the type that will be used in palette interface CommonColors extends PaletteCommonChannel {} interface PaletteColor extends PaletteColorChannel {} + interface TypeBackground extends PaletteBackgroundChannel {} interface TypeText extends PaletteTextChannel {} interface TypeAction extends PaletteActionChannel {}