CSS Variables and custom colors: can't access property "main" #46549

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-ym4w3uq7?file=src%2FApp.tsx

Current behavior

A crash in Button/Button.js:

   "--variant-textColor": (theme.vars || theme).palette[color].main,

Uncaught TypeError: can't access property "main", (intermediate value).palette[color] is undefined

Expected behavior

A purple button.

Context

I'm trying to use custom palette colors and CSS variables but I can't figure out how from the documentation.

My previous ticket got closed with this comment:

You don't need a baseTheme. Do this instead:

const theme = createTheme({
  cssVariables: true,
  palette: {
    purple: baseTheme.palette.augmentColor({
      color: { main: '#7f007f' },
      name: 'purple',
    }),
  },
});

If you add the palette to the 2nd argument, it will replace the default palette and that's why the error occur because the default Button is trying to access the primary color but there is no more primary palette.

But there are a few issues with that suggestion:

• It uses baseTheme itself as there's no other way to access augmentColor
• If there were settings in baseTheme this discards them
• Without cssVariables: true my example works and the palette is deep-merged correctly.

Given that the theme merging works without cssVariables: true, what's the correct pattern with cssVariables: true?

Your environment

This is the Stackblitz container on Firefox.

Search keywords: can't access property "main" cssvariables custom colors

Start with the linked StackBlitz reproduction and the failing lookup in Button/Button.js. Compare how the custom palette is merged with and without cssVariables: true, including the documented augmentColor pattern. Done means the purple button renders without the palette[color] crash while the default palette remains available.