[Material UI] Add palette.background.defaultChannel token (mui#35061)

jesrodri · Dec 6, 2022 · 4a78078 · 4a78078
1 parent 3098cce
commit 4a78078
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 0 deletions.
diff --git 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
@@ -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<PaletteBackgroundChannel>;
     common?: Partial<PaletteCommonChannel>;
     primary?: Partial<PaletteColorChannel>;
     secondary?: Partial<PaletteColorChannel>;

diff --git 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
@@ -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
@@ -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 {}