button css wrong when i use css varibles

[hhniao]

Steps to reproduce

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

how to do before you fixed it?

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

[oliviertassinari]

Duplicate of #43540