@mui/material 5.8.7 → 5.9.0

package/styles/experimental_extendTheme.d.ts

@@ -231,6 +231,7 @@ export interface CssVarsPalette {
   error: PaletteColorChannel;
   info: PaletteColorChannel;
   success: PaletteColorChannel;
+  warning: PaletteColorChannel;
   text: PaletteTextChannel;
   dividerChannel: string;
   action: PaletteActionChannel;
@@ -274,7 +275,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
 }
 
 // should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
-interface ThemeVars {
+export interface ThemeVars {
   palette: Omit<
     ColorSystem['palette'],
     | 'colorScheme'
@@ -287,13 +288,92 @@ interface ThemeVars {
   opacity: Opacity;
   overlays: Overlays;
   shadows: Shadows;
-  zIndex: ZIndex;
   shape: Theme['shape'];
+  zIndex: ZIndex;
 }
 
-// shut off automatic exporting for the `ThemeVars` above
+type Split<T, K extends keyof T = keyof T> = K extends string | number
+  ? { [k in K]: Exclude<T[K], undefined> }
+  : never;
+
+type ConcatDeep<T> = T extends Record<string | number, infer V>
+  ? keyof T extends string | number
+    ? V extends string | number
+      ? keyof T
+      : keyof V extends string | number
+      ? `${keyof T}-${ConcatDeep<Split<V>>}`
+      : never
+    : never
+  : never;
+
+/**
+ * Does not work for these cases:
+ * - { borderRadius: string | number } // the value can't be a union
+ * - { shadows: [string, string, ..., string] } // the value can't be an array
+ */
+type NormalizeVars<T> = ConcatDeep<Split<T>>;
+
+// shut off automatic exporting for the Generics above
 export {};
 
+export interface ThemeCssVarOverrides {}
+
+export type ThemeCssVar = OverridableStringUnion<
+  | NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>>
+  | 'shape-borderRadius'
+  | 'shadows-0'
+  | 'shadows-1'
+  | 'shadows-2'
+  | 'shadows-3'
+  | 'shadows-4'
+  | 'shadows-5'
+  | 'shadows-6'
+  | 'shadows-7'
+  | 'shadows-8'
+  | 'shadows-9'
+  | 'shadows-10'
+  | 'shadows-11'
+  | 'shadows-12'
+  | 'shadows-13'
+  | 'shadows-14'
+  | 'shadows-15'
+  | 'shadows-16'
+  | 'shadows-17'
+  | 'shadows-18'
+  | 'shadows-19'
+  | 'shadows-20'
+  | 'shadows-21'
+  | 'shadows-22'
+  | 'shadows-23'
+  | 'shadows-24'
+  | 'overlays-0'
+  | 'overlays-1'
+  | 'overlays-2'
+  | 'overlays-3'
+  | 'overlays-4'
+  | 'overlays-5'
+  | 'overlays-6'
+  | 'overlays-7'
+  | 'overlays-8'
+  | 'overlays-9'
+  | 'overlays-10'
+  | 'overlays-11'
+  | 'overlays-12'
+  | 'overlays-13'
+  | 'overlays-14'
+  | 'overlays-15'
+  | 'overlays-16'
+  | 'overlays-17'
+  | 'overlays-18'
+  | 'overlays-19'
+  | 'overlays-20'
+  | 'overlays-21'
+  | 'overlays-22'
+  | 'overlays-23'
+  | 'overlays-24',
+  ThemeCssVarOverrides
+>;
+
 /**
  * Theme properties generated by extendTheme and CssVarsProvider
  */
@@ -301,10 +381,7 @@ export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Record<SupportedColorScheme, ColorSystem>;
   cssVarPrefix: string;
   vars: ThemeVars;
-  getCssVar: <CustomVar extends string = never>(
-    field: string | CustomVar,
-    ...vars: Array<string | CustomVar>
-  ) => string;
+  getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
 }
 

package/styles/index.d.ts

@@ -6,7 +6,10 @@ export {
   Theme,
 } from './createTheme';
 export { default as adaptV4Theme, DeprecatedThemeOptions } from './adaptV4Theme';
+export { Shadows } from './shadows';
+export { ZIndex } from './zIndex';
 export {
+  CommonColors,
   Palette,
   PaletteColor,
   PaletteColorOptions,
@@ -97,8 +100,11 @@ export { default as experimental_extendTheme } from './experimental_extendTheme'
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,
+  ColorSystem,
+  CssVarsPalette,
   Opacity,
   Overlays,
+  PaletteAlert,
   PaletteActionChannel,
   PaletteAppBar,
   PaletteAvatar,
@@ -107,8 +113,10 @@ export type {
   PaletteCommonChannel,
   PaletteFilledInput,
   PaletteLinearProgress,
+  PaletteSkeleton,
   PaletteSlider,
   PaletteSnackbarContent,
+  PaletteSpeedDialAction,
   PaletteStepConnector,
   PaletteStepContent,
   PaletteSwitch,
@@ -117,4 +125,7 @@ export type {
   PaletteTooltip,
   CssVarsThemeOptions,
   CssVarsTheme,
+  ThemeVars,
+  ThemeCssVar,
+  ThemeCssVarOverrides,
 } from './experimental_extendTheme';

package/styles/overrides.d.ts

@@ -44,6 +44,7 @@ import { FormGroupClassKey } from '../FormGroup';
 import { FormHelperTextClassKey } from '../FormHelperText';
 import { FormLabelClassKey } from '../FormLabel';
 import { GridClassKey } from '../Grid';
+import { Grid2Slot } from '../Unstable_Grid2';
 import { IconButtonClassKey } from '../IconButton';
 import { IconClassKey } from '../Icon';
 import { ImageListClassKey } from '../ImageList';
@@ -133,7 +134,7 @@ export type ComponentsOverrides<Theme = unknown> = {
     OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme>
   >;
 } & {
-  MuiCssBaseline?: CSSObject | string;
+  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation);
 };
 
 export interface ComponentNameToClassKey {
@@ -181,6 +182,7 @@ export interface ComponentNameToClassKey {
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
   MuiGrid: GridClassKey;
+  MuiGrid2: Grid2Slot;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
   MuiImageList: ImageListClassKey;

package/styles/props.d.ts

@@ -43,6 +43,7 @@ import { FormGroupProps } from '../FormGroup';
 import { FormHelperTextProps } from '../FormHelperText';
 import { FormLabelProps } from '../FormLabel';
 import { GridProps } from '../Grid';
+import { Grid2Props } from '../Unstable_Grid2';
 import { IconButtonProps } from '../IconButton';
 import { IconProps } from '../Icon';
 import { ImageListProps } from '../ImageList';
@@ -167,6 +168,7 @@ export interface ComponentsPropsList {
   MuiFormHelperText: FormHelperTextProps;
   MuiFormLabel: FormLabelProps;
   MuiGrid: GridProps;
+  MuiGrid2: Grid2Props;
   MuiImageList: ImageListProps;
   MuiImageListItem: ImageListItemProps;
   MuiImageListItemBar: ImageListItemBarProps;

package/themeCssVarsAugmentation/index.d.ts

@@ -15,16 +15,12 @@ declare module '@mui/material/styles' {
   // The palette must be extended in each node.
   interface Theme extends Omit<CssVarsTheme, 'palette'> {}
 
-  // The extended Palette should be in sync with `extendTheme`
-  interface Palette extends CssVarsPalette {}
-}
-
-declare module '@mui/material/styles/createPalette' {
+  // Extend the type that will be used in palette
   interface CommonColors extends PaletteCommonChannel {}
-
   interface PaletteColor extends PaletteColorChannel {}
-
   interface TypeText extends PaletteTextChannel {}
-
   interface TypeAction extends PaletteActionChannel {}
+
+  // The extended Palette should be in sync with `extendTheme`
+  interface Palette extends CssVarsPalette {}
 }