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.

[siriwatknp]

@chimericdream Check this out! https://stackblitz.com/edit/9gzfgfql?file=src%2FDemo.tsx

It's currently a WIP PR: https://github.com/mui/material-ui/pull/43942/, you can participate by giving it a like to pushing to the finishing line.

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,
});

const theme = createTheme({
  cssVariables: {
    nativeColorSyntax: true, // ⚡️ new feature!
  },
  palette: {
    primary: makeColor('red', '#fff'),
    info: {
      main: 'oklch(0.7 0.1 81)',
    },
  },
});

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.