Support Shadows overrides

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Shadows should be configurable and extensible the same way as the colour palette

Examples 🌈

declare module '@mui/material/styles/createShadow' {
  interface DepthRange {
       0: string,
       1: string,
       2: string,
       3: string,
       4: string
  }

  interface Shadow {
      neutral: DepthRange ,
      downward: DepthRange ,
      upward: DepthRange 
  }
}

<Box sx={{ boxShadow: 'neutral.0' }}>…
<Box sx={{ boxShadow: 'downward.3' }}>…
<Box sx={{ boxShadow: 'upward.4' }}>…
<Box sx={{ boxShadow: 'neutral.3' }}>…

Motivation 🔦

Make MUI a more customizable extensible UI framework

[theHasanas]

Any updates on this issue?

A very simple patch that worked for me was changing the file at @mui/material/styles/shadows.d.ts like this:

export interface Shadows {
  0: 'none';
  1: string;
  2: string;
  3: string;
  4: string;
  5: string;
  6: string;
  7: string;
  8: string;
  9: string;
  10: string;
  11: string;
  12: string;
  13: string;
  14: string;
  15: string;
  16: string;
  17: string;
  18: string;
  19: string;
  20: string;
  21: string;
  22: string;
  23: string;
  24: string;
};
declare const shadows: Shadows;
export default shadows;

I was then able to augment the interface and extend the theme.

[siriwatknp]

@mnajdova Thanks, me and @danilo-leal will take this into account for the new design system.