[RFC][CssVarsProvider] Ability to change shadow color on each color scheme

What's the problem? 🤔

Current experimental_extendTheme will accpet Partial<Record<SupportedColorScheme, ColorSystemOptions>> which is:

export interface ColorSystem {
  palette: Palette & CssVarsPalette;
  opacity: Opacity;
  overlays: Overlays;
}

But we need to set each shadow color on each color scheme light and dark (or another).

What are the requirements? ❓

Nothing

What are our options? 💡

Never thought

Proposed solution 🟢

Change type of ColorSystem to:

export interface ColorSystem {
  palette: Palette & CssVarsPalette;
  opacity: Opacity;
  overlays: Overlays;
  shadows: Theme['shadows'];
}

And thus we need to make change to generate processes?

Default approach for this was, setting shadows with theme palette mode like:

shadows: mode === 'light' ? lightShadows : darkShadows // Also component's approach is same

But this approach will not work

Resources and benchmarks 🔗

No response