[System] Simplify theme input types for CssVarsProvider

packages/mui-joy/src/styles/CssVarsProvider.tsx

@@ -1,13 +1,12 @@
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import extendTheme from './extendTheme';
-import type { Theme, DefaultColorScheme, ExtendedColorScheme } from './types';
+import type { DefaultColorScheme, ExtendedColorScheme } from './types';
 
 const shouldSkipGeneratingVar = (keys: string[]) =>
   !!keys[0].match(/(typography|variants|focus|breakpoints)/);
 
 const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  DefaultColorScheme | ExtendedColorScheme,
-  Theme
+  DefaultColorScheme | ExtendedColorScheme
 >({
   theme: extendTheme(),
   attribute: 'data-joy-color-scheme',

packages/mui-joy/src/styles/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ThemeProvider as SystemThemeProvider, useTheme as useSystemTheme } from '@mui/system';
 import defaultTheme, { getThemeWithVars } from './defaultTheme';
-import type { ThemeInput } from './extendTheme';
+import type { CssVarsThemeOptions } from './extendTheme';
 
 export const useTheme = () => {
   return useSystemTheme(defaultTheme);
@@ -11,7 +11,7 @@ export default function ThemeProvider({
   children,
   theme: themeInput,
 }: React.PropsWithChildren<{
-  theme?: ThemeInput;
+  theme?: CssVarsThemeOptions;
 }>) {
   return (
     <SystemThemeProvider theme={themeInput ? getThemeWithVars(themeInput) : defaultTheme}>

packages/mui-joy/src/styles/defaultTheme.ts

@@ -1,10 +1,10 @@
 import { deepmerge } from '@mui/utils';
 import extendTheme from './extendTheme';
-import type { ThemeInput, ColorSystemInput } from './extendTheme';
+import type { CssVarsThemeOptions, ColorSystemOptions } from './extendTheme';
 import type { Theme, RuntimeColorSystem } from './types';
 
 export const getThemeWithVars = (
-  themeInput?: Omit<ThemeInput, 'colorSchemes'> & ColorSystemInput,
+  themeInput?: Omit<CssVarsThemeOptions, 'colorSchemes'> & ColorSystemOptions,
 ) => {
   const {
     colorSchemes,

packages/mui-joy/src/styles/extendTheme.ts

@@ -36,10 +36,10 @@ type Partial3Level<T> = {
   };
 };
 
-export interface ColorSystemInput extends Partial3Level<ColorSystem> {}
+export interface ColorSystemOptions extends Partial3Level<ColorSystem> {}
 
 // Use Partial2Level instead of PartialDeep because nested value type is CSSObject which does not work with PartialDeep.
-export interface ThemeInput extends Partial2Level<ThemeScales> {
+export interface CssVarsThemeOptions extends Partial2Level<ThemeScales> {
   /**
    * Prefix of the generated CSS variables
    * @default 'joy'
@@ -57,21 +57,21 @@ export interface ThemeInput extends Partial2Level<ThemeScales> {
   breakpoints?: BreakpointsOptions;
   spacing?: SpacingOptions;
   components?: Components<Theme>;
-  colorSchemes?: Partial<Record<DefaultColorScheme | ExtendedColorScheme, ColorSystemInput>>;
+  colorSchemes?: Partial<Record<DefaultColorScheme | ExtendedColorScheme, ColorSystemOptions>>;
 }
 
 export const createGetCssVar = (cssVarPrefix = 'joy') =>
   systemCreateGetCssVar<ThemeCSSVar>(cssVarPrefix);
 
-export default function extendTheme(themeInput?: ThemeInput): Theme {
+export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
   const {
     cssVarPrefix = 'joy',
     breakpoints,
     spacing,
     components: componentsInput,
     variants: variantsInput,
     ...scalesInput
-  } = themeInput || {};
+  } = themeOptions || {};
   const getCssVar = createGetCssVar(cssVarPrefix);
 
   const createLightModeVariantVariables = (color: ColorPaletteProp) => ({

packages/mui-joy/src/styles/index.ts

@@ -63,5 +63,5 @@ export * from './ThemeProvider';
 export { default as useThemeProps } from './useThemeProps';
 export { sx as experimental_sx } from './styleFunctionSx';
 export { default as extendTheme, createGetCssVar } from './extendTheme';
-export type { ThemeInput } from './extendTheme';
+export type { CssVarsThemeOptions } from './extendTheme';
 export { default as StyledEngineProvider } from './StyledEngineProvider';

packages/mui-material/src/styles/CssVarsProvider.tsx

@@ -1,8 +1,5 @@
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
-import experimental_extendTheme, {
-  SupportedColorScheme,
-  CssVarsTheme,
-} from './experimental_extendTheme';
+import experimental_extendTheme, { SupportedColorScheme } from './experimental_extendTheme';
 import createTypography from './createTypography';
 
 const shouldSkipGeneratingVar = (keys: string[]) =>
@@ -11,28 +8,26 @@ const shouldSkipGeneratingVar = (keys: string[]) =>
 
 const defaultTheme = experimental_extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  SupportedColorScheme,
-  CssVarsTheme
->({
-  theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
-  defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
-  },
-  resolveTheme: (theme) => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography),
-    };
+const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } =
+  createCssVarsProvider<SupportedColorScheme>({
+    theme: defaultTheme,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark',
+    },
+    resolveTheme: (theme) => {
+      const newTheme = {
+        ...theme,
+        typography: createTypography(theme.palette, theme.typography),
+      };
 
-    return newTheme;
-  },
-  shouldSkipGeneratingVar,
-});
+      return newTheme;
+    },
+    shouldSkipGeneratingVar,
+  });
 
 export {
   useColorScheme,

packages/mui-material/src/styles/experimental_extendTheme.d.ts

@@ -157,6 +157,7 @@ export interface PaletteSlider {
 
 export interface PaletteSnackbarContent {
   bg: string;
+  color: string;
 }
 
 export interface PaletteSpeedDialAction {
@@ -222,35 +223,36 @@ export interface ColorSystemOptions {
   overlays?: Overlays;
 }
 
-// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface CssVarsPalette {
+  colorScheme: SupportedColorScheme;
+  common: PaletteCommonChannel;
+  primary: PaletteColorChannel;
+  secondary: PaletteColorChannel;
+  error: PaletteColorChannel;
+  info: PaletteColorChannel;
+  success: PaletteColorChannel;
+  text: PaletteTextChannel;
+  dividerChannel: string;
+  action: PaletteActionChannel;
+  Alert: PaletteAlert;
+  AppBar: PaletteAppBar;
+  Avatar: PaletteAvatar;
+  Chip: PaletteChip;
+  FilledInput: PaletteFilledInput;
+  LinearProgress: PaletteLinearProgress;
+  Skeleton: PaletteSkeleton;
+  Slider: PaletteSlider;
+  SnackbarContent: PaletteSnackbarContent;
+  SpeedDialAction: PaletteSpeedDialAction;
+  StepConnector: PaletteStepConnector;
+  StepContent: PaletteStepContent;
+  Switch: PaletteSwitch;
+  TableCell: PaletteTableCell;
+  Tooltip: PaletteTooltip;
+}
+
 export interface ColorSystem {
-  palette: Palette & {
-    colorScheme: SupportedColorScheme;
-    common: PaletteCommonChannel;
-    primary: PaletteColorChannel;
-    secondary: PaletteColorChannel;
-    error: PaletteColorChannel;
-    info: PaletteColorChannel;
-    success: PaletteColorChannel;
-    text: PaletteTextChannel;
-    dividerChannel: string;
-    action: PaletteActionChannel;
-    Alert: PaletteAlert;
-    AppBar: PaletteAppBar;
-    Avatar: PaletteAvatar;
-    Chip: PaletteChip;
-    FilledInput: PaletteFilledInput;
-    LinearProgress: PaletteLinearProgress;
-    Skeleton: PaletteSkeleton;
-    Slider: PaletteSlider;
-    SnackbarContent: PaletteSnackbarContent;
-    SpeedDialAction: PaletteSpeedDialAction;
-    StepConnector: PaletteStepConnector;
-    StepContent: PaletteStepContent;
-    Switch: PaletteSwitch;
-    TableCell: PaletteTableCell;
-    Tooltip: PaletteTooltip;
-  };
+  palette: Palette & CssVarsPalette;
   opacity: Opacity;
   overlays: Overlays;
 }
@@ -261,7 +263,13 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * @default 'mui'
    */
   cssVarPrefix?: string;
-  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
 }
 
@@ -286,8 +294,10 @@ interface ThemeVars {
 // shut off automatic exporting for the `ThemeVars` above
 export {};
 
-export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, ColorSystem {
-  components?: Components<Omit<CssVarsTheme, 'components'>>;
+/**
+ * Theme properties generated by extendTheme and CssVarsProvider
+ */
+export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Record<SupportedColorScheme, ColorSystem>;
   cssVarPrefix: string;
   vars: ThemeVars;
@@ -307,4 +317,4 @@ export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, Col
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): CssVarsTheme;
+): Omit<Theme, 'palette'> & CssVarsTheme;

packages/mui-material/src/themeCssVarsAugmentation/index.d.ts

@@ -1,22 +1,10 @@
 import type {
   CssVarsTheme,
-  ColorSystem,
+  CssVarsPalette,
   PaletteCommonChannel,
   PaletteColorChannel,
   PaletteTextChannel,
   PaletteActionChannel,
-  PaletteAppBar,
-  PaletteAvatar,
-  PaletteChip,
-  PaletteFilledInput,
-  PaletteLinearProgress,
-  PaletteSlider,
-  PaletteSnackbarContent,
-  PaletteStepConnector,
-  PaletteStepContent,
-  PaletteSwitch,
-  PaletteTableCell,
-  PaletteTooltip,
 } from '../styles/experimental_extendTheme';
 
 /**
@@ -25,29 +13,10 @@ import type {
  */
 declare module '@mui/material/styles' {
   // The palette must be extended in each node.
-  interface Theme extends Omit<ColorSystem, 'palette'> {
-    prefix: string;
-    vars: CssVarsTheme['vars'];
-    getCssVar: CssVarsTheme['getCssVar'];
-    getColorSchemeSelector: CssVarsTheme['getColorSchemeSelector'];
-  }
+  interface Theme extends Omit<CssVarsTheme, 'palette'> {}
 
   // The extended Palette should be in sync with `extendTheme`
-  interface Palette {
-    dividerChannel: string;
-    AppBar: PaletteAppBar;
-    Avatar: PaletteAvatar;
-    Chip: PaletteChip;
-    FilledInput: PaletteFilledInput;
-    LinearProgress: PaletteLinearProgress;
-    Slider: PaletteSlider;
-    SnackbarContent: PaletteSnackbarContent;
-    StepConnector: PaletteStepConnector;
-    StepContent: PaletteStepContent;
-    Switch: PaletteSwitch;
-    TableCell: PaletteTableCell;
-    Tooltip: PaletteTooltip;
-  }
+  interface Palette extends CssVarsPalette {}
 }
 
 declare module '@mui/material/styles/createPalette' {

packages/mui-system/src/cssVars/createCssVarsProvider.d.ts

@@ -54,11 +54,14 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
   shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
 }
 
-export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeInput> {
+export interface CreateCssVarsProviderResult<ColorScheme extends string> {
   CssVarsProvider: (
     props: React.PropsWithChildren<
       Partial<CssVarsProviderConfig<ColorScheme>> & {
-        theme?: ThemeInput;
+        theme?: {
+          cssVarPrefix?: string;
+          colorSchemes: Record<ColorScheme, Record<string, any>>;
+        };
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document
@@ -86,10 +89,7 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 
-export default function createCssVarsProvider<
-  ColorScheme extends string,
-  ThemeInput extends { colorSchemes?: Partial<Record<ColorScheme, any>> },
->(
+export default function createCssVarsProvider<ColorScheme extends string>(
   options: CssVarsProviderConfig<ColorScheme> & {
     /**
      * Design system default theme
@@ -125,7 +125,7 @@ export default function createCssVarsProvider<
      */
     resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
   },
-): CreateCssVarsProviderResult<ColorScheme, ThemeInput>;
+): CreateCssVarsProviderResult<ColorScheme>;
 
 // disable automatic export
 export {};