diff --git a/packages/mui-material/src/styles/createColorScheme.ts b/packages/mui-material/src/styles/createColorScheme.ts new file mode 100644 index 00000000000000..14d41cabf38e27 --- /dev/null +++ b/packages/mui-material/src/styles/createColorScheme.ts @@ -0,0 +1,33 @@ +import type { ColorSystemOptions } from './createThemeWithVars'; +import createPalette from './createPalette'; +import getOverlayAlpha from './getOverlayAlpha'; + +const defaultDarkOverlays = [...Array(25)].map((_, index) => { + if (index === 0) { + return undefined; + } + const overlay = getOverlayAlpha(index); + return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`; +}); + +export function getOpacity(mode: 'light' | 'dark') { + return { + inputPlaceholder: mode === 'dark' ? 0.5 : 0.42, + inputUnderline: mode === 'dark' ? 0.7 : 0.42, + switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12, + switchTrack: mode === 'dark' ? 0.3 : 0.38, + }; +} +export function getOverlays(mode: 'light' | 'dark') { + return mode === 'dark' ? defaultDarkOverlays : []; +} + +export default function createColorScheme(options: ColorSystemOptions) { + const { palette = {}, opacity, overlays, ...rest } = options; + return { + palette: createPalette(palette), + opacity: { ...getOpacity(palette.mode || 'light'), ...opacity }, + overlays: overlays || getOverlays(palette.mode || 'light'), + ...rest, + } as unknown as ColorSystemOptions; +} diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js index 1ac1e9cf1fb4f9..90f76d3622ac70 100644 --- a/packages/mui-material/src/styles/createThemeWithVars.js +++ b/packages/mui-material/src/styles/createThemeWithVars.js @@ -21,19 +21,11 @@ import { } from '@mui/system/colorManipulator'; import createThemeNoVars from './createThemeNoVars'; +import createColorScheme, { getOpacity, getOverlays } from './createColorScheme'; import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar'; -import getOverlayAlpha from './getOverlayAlpha'; import defaultGetSelector from './createGetSelector'; import { stringifyTheme } from './stringifyTheme'; -const defaultDarkOverlays = [...Array(25)].map((_, index) => { - if (index === 0) { - return undefined; - } - const overlay = getOverlayAlpha(index); - return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`; -}); - function assignNode(obj, keys) { keys.forEach((k) => { if (!obj[k]) { @@ -95,24 +87,16 @@ const silent = (fn) => { export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix); -function getOpacity(mode) { - return { - inputPlaceholder: mode === 'dark' ? 0.5 : 0.42, - inputUnderline: mode === 'dark' ? 0.7 : 0.42, - switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12, - switchTrack: mode === 'dark' ? 0.3 : 0.38, - }; -} -function getOverlays(mode) { - return mode === 'dark' ? defaultDarkOverlays : []; -} - function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) { if (!scheme) { return undefined; } scheme = scheme === true ? {} : scheme; const mode = colorScheme === 'dark' ? 'dark' : 'light'; + if (!restTheme) { + colorSchemes[colorScheme] = createColorScheme(scheme); + return undefined; + } const { palette, ...muiTheme } = createThemeNoVars({ ...restTheme, palette: { diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index 38dbdac7b6078b..afdf2e7ec77c9e 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -21,6 +21,7 @@ export { TypeAction, TypeBackground, } from './createPalette'; +export { default as createColorScheme } from './createColorScheme'; export { default as createStyles } from './createStyles'; export { Typography as TypographyVariants, diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 08a68e212b13c3..b38149b9eb1274 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -33,6 +33,7 @@ export { default as createStyles } from './createStyles'; export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils'; export { default as responsiveFontSizes } from './responsiveFontSizes'; export { default as createTransitions, duration, easing } from './createTransitions'; +export { default as createColorScheme } from './createColorScheme'; export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; export { default as styled } from './styled';