[Material UI] Add channel colors if possible

[siriwatknp]

close #35159

Problem

https://codesandbox.io/s/determined-fermat-mikfcs?file=/src/App.tsx

The extendTheme creates channel colors if it sees palette.*.main, so it breaks if I do this with custom palette:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        gradient: {
          main: 'linear-gradient(...)', // it tries to create channel color which throws an error because the value is not a valid color.
          ...
        }
      }
    }
  }
})

This is definitely confusing for developers and there is no workaround unless they change from primary to another name.

Solution

Display warning instead of throwing errors.

For dependent tokens

These tokens are used to calculate channel colors, so the warning is displayed if it cannot parse the value:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        divider: 'green',
      },
    },
  },
}),

// MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

For independent tokens

These tokens are not used by others, so they can be replaced with any CSS color, e.g. gradient or refer to another CSS variable.

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        Alert: {
          errorColor: 'green', // ✅
        },
      },
    },
  },
})

Custom palettes

Like in #35159, the gradient is created with the same structure of MUI primary palette but that's not the intention of the developers, so the errors are silent:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        gradient: {
          primary: 'linear-gradient(#000, transparent)', ✅
        },
      },
    },
  },
})

https://codesandbox.io/s/awesome-chihiro-uo3ddh?file=/src/App.tsx

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35178--material-ui.netlify.app/

@material-ui/core: parsed: +0.26% , gzip: +0.16%
@material-ui/system: parsed: +0.63% , gzip: +0.42%

Details of bundle changes

Generated by 🚫 dangerJS against 73c11f3

[siriwatknp]

only apply the key if defaultValue exists.

// before
setColor(object, 'a', undefined); // { a: undefined }

// after
setColor(object, 'a', undefined); // {}

[siriwatknp]

@mnajdova Please review again. In summary, instead of throwing errors, the warning is displayed for specific tokens that are used for channel color generation.

[mnajdova]

Can we extract this in a separate function? Instead of invoking silent(() => darken()) we could just invoke darken(), which will behind the scene do this. Same for the other color manipulators. We could even export these functions from the color manipulators directly by using some prefix, like safeDarken or something similar. My worry is that if we add new color tokens we may forget to use the silent function.

[siriwatknp]

Something like this?

// colorManipulator.js
export const colorChannel = ...;
export const safeColorChannel = (color, warning) => {
  try {
    return colorChannel(color);
  } catch (error) {
    if (warning && process.env.NODE_ENV !== 'production') {
      console.warn(warning);
    }
    return undefined;
  }
}

// experimental_extendTheme.js
setColor(
  palette[color],
  'activeChannel',
  colorChannelSafe(colors.active, 'MUI: The value of "palette.action.active" should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'),
);

[siriwatknp]

@mnajdova In case you missed the notification.

[mnajdova]

Exactly yes, sorry for not responding sooner.

[siriwatknp]

@mnajdova I mark them as private_ to align with our intention.

[mnajdova]

Looks good