Add support for CSS `color-mix()` in theme palette

[chimericdream]

Summary 💡

I wanted to use CSS's color-mix function for my theme palette colors to simplify the process of creating all of the main/light/dark variants. However, it appears that the decomposeColor function doesn't yet support this.

Examples 🌈

const DARKEN_PERCENT = 33;
const LIGHTEN_PERCENT = 33;

const makeColor = (color: string, contrast: string) => ({
    main: color,
    light: `color-mix(in hsl, ${color} ${LIGHTEN_PERCENT}%, #fff)`,
    dark: `color-mix(in hsl, ${color} ${DARKEN_PERCENT}%, #000)`,
    contrastText: contrast,
});

export const theme = createTheme({
    palette: {
        mode: 'dark',
        primary: makeColor(..., '#fff'),
        secondary: makeColor(..., '#000'),
        error: makeColor(..., '#000'),
        warning: makeColor(..., '#000'),
        info: makeColor(..., '#000'),
        success: makeColor(..., '#fff'),
    },
    ...
});

Motivation 🔦

Allowing us to use the native color-mix CSS function simplifies the creation of new themes.

[siriwatknp]

Good point!

[JorensM]

Hello, may I take this?

[arronhunt]

@chimericdream I wouldn't mind taking this on since I've been working on another PR to fix some color functions. Out of curiosity though, wouldn't MUI's darken and lighten helpers work for this use case?

import { darken, lighten } from '@mui/system';

const DARKEN_PERCENT = 33;
const LIGHTEN_PERCENT = 33;

const makeColor = (color: string, contrast: string) => ({
    main: color,
    light: lighten(color, LIGHTEN_PERCENT / 100),
    dark: darken(color, DARKEN_PERCENT / 100),
    contrastText: contrast,
});

[chimericdream]

@arronhunt they probably would, at least for my example above. However, it still wouldn't be possible to blend arbitrary colors, which is where color-mix can get really powerful.