Customize color shadow by property or variant

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The same shadow size can not be customized by color.

This means that if I want a boxShadow of elevation 4, for example, in blue for a component and in red for another I have to override the boxShadow style at all, without using theme.shadows.

the only solution so far, right now, it is to override two different elevations using the same size but with different color:

// reference to @mui/material/styles/shadows.js
const shadows = [
    'none',
  createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
  createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
  createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0),
  createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0, "yellow"), 
  createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0, "red"), // same size of shadows[4], but with different color 
....
];

I do not think it should be the right way for doing that.

My suggestion is to export a color manipulator (similar to alpha) for using the same size but with different color:

<Stack boxShadow={(theme) => shadowColor(theme.shadows(4), "red")}>

I have read other (closed) issues related to this (like this) but I have not found an exhaustive answer

Examples 🌈

No response

Motivation 🔦

No response

Start with the shadow definitions referenced at @mui/material/styles/shadows.js and review the linked issue 11386 for existing context. Determine whether the requested API should customize a shadow's color while preserving its elevation, and consider how completion would be verified.