-webkit-text-fill-color not working with MUI theme variable

[angeloron]

Steps to reproduce

Steps:

1. Use ThemeProvider and CssBaseline
2. Try to use a Theme variable such as 'text.primary'

Current behavior

It will display 'text.primary' as the value

Expected behavior

In my case it should display "#FFFFFF" just like it does for the background-color in that example.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.0.0 - ~\AppData\Roaming\npm\npm.CMD
    pnpm: 9.14.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (130.0.2849.56) -- I used Edge
  npmPackages:
    @emotion/react: ^11 => 11.13.3
    @emotion/styled: ^11 => 11.13.0
    @mui/base:  5.0.0-beta.61
    @mui/core-downloads-tracker:  6.1.6
    @mui/icons-material: ^6 => 6.1.6
    @mui/lab:  6.0.0-beta.14
    @mui/material: ^6 => 6.1.6
    @mui/material-nextjs: ^6 => 6.1.6
    @mui/private-theming:  6.1.6
    @mui/styled-engine:  6.1.6
    @mui/system:  6.1.6
    @mui/types:  7.2.19
    @mui/utils:  6.1.6
    @mui/x-date-pickers: ^7.23.3 => 7.23.3
    @mui/x-internals:  7.23.0
    @toolpad/core: 0.9.0 => 0.9.0
    @toolpad/utils:  0.9.0
    @types/react: ^18 => 18.3.12
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.6.3

Search keywords: -webkit-text-fill-color theme