tonalOffset as object crashed when used with cssVariables

[synedra-mpe]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/xsaqnx?file=Demo.tsx (forked from https://mui.com/material-ui/customization/palette/#tonal-offset)
2. See "color.startsWith is not a function error"

Current behavior

App crashes with error:
Error in /turbo_modules/@mui/[email protected]/node/styles/createThemeWithVars.js (35:24)
color.startsWith is not a function

Expected behavior

Show the the same output as in https://mui.com/material-ui/customization/palette/#tonal-offset but also have css variables.

Context

Make custom palette with given primary color and make use of object tonalOffset and cssVariables: true.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.11 Fedora Linux 41 (Workstation Edition)
  Binaries:
    Node: 20.12.2 - ~/devel/repository/tool/linux/script/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.85
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.7 
    @mui/icons-material: ^6.1.7 => 6.1.7 
    @mui/lab: 6.0.0-beta.15 => 6.0.0-beta.15 
    @mui/material: ^6.1.7 => 6.1.7 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system:  6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.7 
    @types/react:  18.2.42 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 

Search keywords: tonalOffset cssVariables palette customizateion

[github-actions]

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

@synedra-mpe How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.