[colorManipulator] Replace colorManipulator with CSS Relative Color Syntax (RCS)

[oliviertassinari]

Summary

The codebase rely on logic like

https://github.com/mui/material-ui/blob/85a3b55d22570881db6ac1b99181ef79c18fc58d/packages/mui-system/src/colorManipulator/colorManipulator.js#L240

which comes with bundle size. However, CSS Relative Color Syntax (RCS) https://lea.verou.me/specs/#relative-colors-rcs is coming. We will be able to rely on it. This should save bundle size and improve the customization experience as it will be clearer in the Browser devtool inspector tool where the color is coming from.

Examples

--color-lighterer: oklch(from var(--color) calc(l + 0.2) c h);
--color-alpha-50: oklab(from var(--color) l a b / 50%);

On the colorspace we want to use, oklch looks like a solid option: https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/. It has a limit though: https://github.com/w3c/csswg-drafts/issues/9449, to be careful.

To see how this fit with color-mix(.

---

If this is successful, we could also look doing the same for the color contrast utils. Actually, we might even need to consider both problems at the same time. https://lea.verou.me/blog/2024/contrast-color/ is a great dive into the topic. A must read (e.g. APAC vs. legal requirement).

Motivation

Is likely part of solving #40104, and #37901.

Search keywords: -

[siriwatknp]

Nice, in my POC the color-mix() works great. With RCS, the getContrastText could be removed!

I will find a time to create another POC after v6 stable. I'd love to have:

createTheme({
  colorSpace: 'oklch',
  palette: {
    primary: {
      main: 'var(--external-color)',
    }
  }
})