[docs] text-secondary CSS variable does not work with Tailwind v4

[mloffer]

Steps to reproduce

Steps:

1. Open this link to live example (from the official docs): https://play.tailwindcss.com/f1ZIr0qSNG
2. Inspect the computed text color of either body copy (light or dark mode) using className="text-text-secondary".
   e.g. Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

Current behavior

The computed color is a plain rgb (no alpha) color: rgb(0,0,0) in light mode, rgb(255,255,255) in dark mode.

Expected behavior

The computed colors should resolve to the same colors as in the default theme found at palette.text.secondary, which are rgba(0, 0, 0, 0.6) and rgba(255, 255, 255, 0.7), respectively.

https://mui.com/material-ui/customization/default-theme/

Context

I am running across this issue in my nextjs application, but it seemed easier to use the official documentation to demonstrate the issue.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 24.11.1 - /home/mloffer/.nvm/versions/node/v24.11.1/bin/node
    npm: 11.6.2 - /home/mloffer/.nvm/versions/node/v24.11.1/bin/npm
    pnpm: 10.29.3 - /home/mloffer/.nvm/versions/node/v24.11.1/bin/pnpm
  Browsers:
    Chrome: 145.0.7632.109
    Firefox: Not Found
  npmPackages:
    typescript: catalog: => 5.9.3

Search keywords: tailwind text-secondary CSS variable

[linear]

MAT-1776

[ZeeshanTamboli]

This looks like a docs bug in the Tailwind v4 theme snippet: https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/#extend-material-ui-classes.
palette.text.secondary includes alpha, but the docs currently map it through --mui-palette-text-secondaryChannel, so text-text-secondary becomes opaque.
We should map text colors to the full CSS vars instead:

--color-text-primary: var(--mui-palette-text-primary);
--color-text-secondary: var(--mui-palette-text-secondary);
--color-text-disabled: var(--mui-palette-text-disabled);

We should also update vars for solid palette colors and directly use the theme palette vars and not use the *Channel tokens.

@mloffer Would you like to create a PR?