button css wrong when i use css varibles

[hhniao]

Steps to reproduce

the outlined button hover style wrong https://codesandbox.io/p/sandbox/reverent-babbage-66yztk

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: ".demo-disable-transition-%s",
  },
  palette: {
    mode: "light",
    primary: {
      light: "var(--primary-light)",
      main: "var(--primary)",
      dark: "var(--primary-hover)",
      contrastText: "var(--primary-foreground)",

      // light: "#338cf5",
      // main: "#0070f3",
      // dark: "#004eaa",
      // contrastText: "#ffffff",
    },
  },
  colorSchemes: { dark: true },
});

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: css varibles button hover

[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.

[!NOTE] We value your feedback @hhniao! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[aarongarciah]

When enabling cssVars in the theme, we automatically generate color channel tokens (see docs). For this to work, colors must be defined in one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). We actually warn in dev when none of these formats is followed (source). We skip the warning in some cases: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/createThemeWithVars.js#L424-L441

@siriwatknp can you share the reasoning to skip this warning when defining custom palettes?

[siriwatknp]

@siriwatknp can you share the reasoning to skip this warning when defining custom palettes?

Because they are custom, so it can be in any structure. The warning could be seen as a false alert if your custom palette is not meant to be used with component color prop.

I think the ideal way is to let user explicitly create a palette from a function like it's created internally.