From cbe9a14a5b48f0c7d799964fbba1f4b0a4a455c7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 29 Aug 2024 19:40:20 +0700 Subject: [PATCH 1/5] wip --- .../src/styles/createTheme.test.js | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js index 926a80321b6ef9..bc3a3518522897 100644 --- a/packages/mui-material/src/styles/createTheme.test.js +++ b/packages/mui-material/src/styles/createTheme.test.js @@ -4,7 +4,7 @@ import { createRenderer } from '@mui/internal-test-utils'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import { ThemeProvider, createTheme, styled } from '@mui/material/styles'; -import { deepOrange, green } from '@mui/material/colors'; +import { deepOrange, green, grey } from '@mui/material/colors'; import createPalette from './createPalette'; const lightPalette = createPalette({ mode: 'light' }); @@ -56,6 +56,31 @@ describe('createTheme', () => { expect(theme.palette.secondary.main).to.equal(green.A400); }); + it.only('should be customizable through `colorSchemes` node', () => { + const theme = createTheme({ + colorSchemes: { + dark: { + palette: { + background: { + default: grey[900], + }, + }, + }, + light: { + palette: { + bg: { + main: grey[800], + dark: grey[700], + }, + }, + }, + }, + }); + expect(theme.colorSchemes.dark.palette.background.default).to.equal(grey[900]); + expect(theme.colorSchemes.light.palette.bg.main).to.equal(grey[800]); + expect(theme.colorSchemes.light.palette.bg.dark).to.equal(grey[700]); + }); + describe('CSS variables', () => { it('should have a light as a default colorScheme if only `palette` is provided', () => { const theme = createTheme({ From c56577b4f055c5862ee39ce441e228033bd7c51b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 29 Aug 2024 21:58:46 +0700 Subject: [PATCH 2/5] fix color schemes without palette --- .../src/styles/createTheme.test.js | 39 ++++++++++++++++++- .../mui-material/src/styles/createTheme.ts | 37 ++++++++++++++---- 2 files changed, 67 insertions(+), 9 deletions(-) diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js index bc3a3518522897..be084ea9447848 100644 --- a/packages/mui-material/src/styles/createTheme.test.js +++ b/packages/mui-material/src/styles/createTheme.test.js @@ -56,7 +56,7 @@ describe('createTheme', () => { expect(theme.palette.secondary.main).to.equal(green.A400); }); - it.only('should be customizable through `colorSchemes` node', () => { + it('should be customizable through `colorSchemes` node', () => { const theme = createTheme({ colorSchemes: { dark: { @@ -68,6 +68,9 @@ describe('createTheme', () => { }, light: { palette: { + background: { + default: grey[50], + }, bg: { main: grey[800], dark: grey[700], @@ -77,8 +80,42 @@ describe('createTheme', () => { }, }); expect(theme.colorSchemes.dark.palette.background.default).to.equal(grey[900]); + expect(theme.colorSchemes.light.palette.background.default).to.equal(grey[50]); expect(theme.colorSchemes.light.palette.bg.main).to.equal(grey[800]); expect(theme.colorSchemes.light.palette.bg.dark).to.equal(grey[700]); + expect(theme.palette.mode).to.equal('light'); + expect(theme.palette.background.default).to.equal(grey[50]); + }); + + it('should be customizable through `colorSchemes` node with non-existing fields', () => { + const theme = createTheme({ + colorSchemes: { + dark: { + opacity: { + disabled: 0.38, + }, + palette: { + gradient: 'linear-gradient(90deg, #000000 0%, #ffffff 100%)', + }, + }, + light: { + opacity: { + disabled: 0.5, + }, + palette: { + gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)', + }, + }, + }, + }); + expect(theme.colorSchemes.dark.opacity.disabled).to.equal(0.38); + expect(theme.colorSchemes.light.opacity.disabled).to.equal(0.5); + expect(theme.colorSchemes.dark.palette.gradient).to.equal( + 'linear-gradient(90deg, #000000 0%, #ffffff 100%)', + ); + expect(theme.colorSchemes.light.palette.gradient).to.equal( + 'linear-gradient(90deg, #ffffff 0%, #000000 100%)', + ); }); describe('CSS variables', () => { diff --git a/packages/mui-material/src/styles/createTheme.ts b/packages/mui-material/src/styles/createTheme.ts index 5bf0b5ed8072ba..c58a40d1398e3c 100644 --- a/packages/mui-material/src/styles/createTheme.ts +++ b/packages/mui-material/src/styles/createTheme.ts @@ -22,7 +22,7 @@ function attachColorScheme( theme.colorSchemes[scheme] = { ...(colorScheme !== true && colorScheme), palette: createPalette({ - ...(colorScheme === true ? {} : colorScheme), + ...(colorScheme === true ? {} : colorScheme.palette), mode: scheme, } as any), // cast type to skip module augmentation test }; @@ -72,24 +72,45 @@ export default function createTheme( }; if (cssVariables === false) { - const theme = createThemeNoVars(options as ThemeOptions, ...args) as unknown as Theme & { + if (!('colorSchemes' in options)) { + // v5 signature + return createThemeNoVars(options as ThemeOptions, ...args); + } + + let paletteOptions; + if (!('palette' in options)) { + if (colorSchemesInput[defaultColorSchemeInput]) { + if (colorSchemesInput[defaultColorSchemeInput] !== true) { + paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette; + } else if (defaultColorSchemeInput === 'dark') { + paletteOptions = { mode: 'dark' }; + } + } + } + + const theme = createThemeNoVars( + { ...options, palette: paletteOptions } as ThemeOptions, + ...args, + ) as unknown as Theme & { defaultColorScheme?: 'light' | 'dark'; colorSchemes?: Partial>; }; - if (!('colorSchemes' in options)) { - return theme; - } - theme.defaultColorScheme = defaultColorSchemeInput; theme.colorSchemes = colorSchemesInput as Record; if (theme.palette.mode === 'light') { - theme.colorSchemes.light = { palette: theme.palette } as ColorSystem; + theme.colorSchemes.light = { + ...(colorSchemesInput.light !== true && colorSchemesInput.light), + palette: theme.palette, + } as ColorSystem; attachColorScheme(theme, 'dark', colorSchemesInput.dark); } if (theme.palette.mode === 'dark') { - theme.colorSchemes.dark = { palette: theme.palette } as ColorSystem; + theme.colorSchemes.dark = { + ...(colorSchemesInput.dark !== true && colorSchemesInput.dark), + palette: theme.palette, + } as ColorSystem; attachColorScheme(theme, 'light', colorSchemesInput.light); } From 414a82a13260b2356608c2a3b5311929ab86d68a Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 30 Aug 2024 15:58:33 +0700 Subject: [PATCH 3/5] Update packages/mui-material/src/styles/createTheme.ts Co-authored-by: Diego Andai Signed-off-by: Siriwat K --- packages/mui-material/src/styles/createTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/createTheme.ts b/packages/mui-material/src/styles/createTheme.ts index 798dfe685e59e3..d71dea64ac75a3 100644 --- a/packages/mui-material/src/styles/createTheme.ts +++ b/packages/mui-material/src/styles/createTheme.ts @@ -73,7 +73,7 @@ export default function createTheme( if (cssVariables === false) { if (!('colorSchemes' in options)) { - // v5 signature + // Behaves exactly as v5 return createThemeNoVars(options as ThemeOptions, ...args); } From e61a0bd954ee2b47aac4e4c5997a1b0d8cb436e0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 30 Aug 2024 16:42:51 +0700 Subject: [PATCH 4/5] add more tests --- .../src/styles/createTheme.test.js | 46 +++++++++++++++++++ .../mui-material/src/styles/createTheme.ts | 2 +- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js index 2de272028199d9..3c24d90fe3f302 100644 --- a/packages/mui-material/src/styles/createTheme.test.js +++ b/packages/mui-material/src/styles/createTheme.test.js @@ -118,6 +118,52 @@ describe('createTheme', () => { ); }); + it('should work with `palette` and `colorSchemes`', () => { + const theme = createTheme({ + palette: { + primary: { + main: '#27272a', + }, + background: { + default: '#f5f5f5', + }, + }, + colorSchemes: { + dark: true, + }, + }); + expect(theme.palette.primary.main).to.equal('#27272a'); + expect(theme.palette.background.default).to.equal('#f5f5f5'); + expect(theme.colorSchemes.light.palette.primary.main).to.equal('#27272a'); + expect(theme.colorSchemes.light.palette.background.default).to.equal('#f5f5f5'); + expect(theme.colorSchemes.dark.palette.primary.main).to.equal(darkPalette.primary.main); + expect(theme.colorSchemes.dark.palette.background.default).to.equal( + darkPalette.background.default, + ); + }); + + it('should work with `palette` and a custom `colorSchemes.dark`', () => { + const theme = createTheme({ + palette: { + background: { + default: '#f5f5f5', + }, + }, + colorSchemes: { + dark: { + palette: { + background: { + default: 'red', + }, + }, + }, + }, + }); + expect(theme.palette.background.default).to.equal('#f5f5f5'); + expect(theme.colorSchemes.light.palette.background.default).to.equal('#f5f5f5'); + expect(theme.colorSchemes.dark.palette.background.default).to.equal('red'); + }); + describe('CSS variables', () => { it('should have default light with media selector if no `palette` and colorSchemes.dark is provided ', () => { const theme = createTheme({ diff --git a/packages/mui-material/src/styles/createTheme.ts b/packages/mui-material/src/styles/createTheme.ts index d71dea64ac75a3..958764a159f7c0 100644 --- a/packages/mui-material/src/styles/createTheme.ts +++ b/packages/mui-material/src/styles/createTheme.ts @@ -77,7 +77,7 @@ export default function createTheme( return createThemeNoVars(options as ThemeOptions, ...args); } - let paletteOptions; + let paletteOptions = palette; if (!('palette' in options)) { if (colorSchemesInput[defaultColorSchemeInput]) { if (colorSchemesInput[defaultColorSchemeInput] !== true) { From 3df87c5340fcf1dd765b3d6209389be2ad7c8dd6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 30 Aug 2024 17:25:54 +0700 Subject: [PATCH 5/5] add ts-ignore --- packages/mui-material/src/styles/createTheme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/styles/createTheme.ts b/packages/mui-material/src/styles/createTheme.ts index 958764a159f7c0..36e92f1082edaf 100644 --- a/packages/mui-material/src/styles/createTheme.ts +++ b/packages/mui-material/src/styles/createTheme.ts @@ -83,6 +83,7 @@ export default function createTheme( if (colorSchemesInput[defaultColorSchemeInput] !== true) { paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette; } else if (defaultColorSchemeInput === 'dark') { + // @ts-ignore to prevent the module augmentation test from failing paletteOptions = { mode: 'dark' }; } }