add createColorScheme

Author: siriwatknp

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;
+}

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: {

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,

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';