[table cell][theme] cssVariables + nativeColor: TableCell border color from palette.divider is almost white (wrong rgba)

[SihenZhang]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/vitejs-vite-ujmwmxmu?file=src%2FApp.tsx
2. Confirm the label shows “Current theme: cssVariables only”.
3. Observe the table cell borders (especially the horizontal row dividers): they are visible (light gray).
4. Click “SWITCH THEME” to toggle to “cssVariables + nativeColor”.
5. Observe that the table borders become much lighter / almost invisible after switching.

Current behavior

When cssVariables is enabled with nativeColor: true, the generated border color for TableCell (based on palette.divider) becomes almost white and is barely visible.

In the reproduction, the computed border color is:

Actual: rgba(250, 250, 250, 0.89)

Expected behavior

The TableCell border color should be the same as (or equivalent to) the non-nativeColor path, which results in a clearly visible light gray border:

Expected: rgba(224, 224, 224, 1)

Context

I am trying to use CSS variables with nativeColor: true to leverage native color functions and keep styling consistent. However, table borders become nearly invisible because the divider-based border color is computed incorrectly when nativeColor is enabled.

From what I found, the root cause seems to be a mismatch in how palette.divider is processed:

• palette.divider is rgba(0, 0, 0, 0.12).
• When nativeColor is disabled, MUI effectively sets the alpha to 1 first and then applies lighten, producing the expected border color.
  

  material-ui/packages/mui-system/src/colorManipulator/colorManipulator.js

  Lines 245 to 259 in 099a07d

  	export function alpha(color, value) {
  	color = decomposeColor(color);
  	value = clampWrapper(value);
  	if (color.type === 'rgb' || color.type === 'hsl') {
  	color.type += 'a';
  	}
  	if (color.type === 'color') {
  	color.values[3] = `/${value}`;
  	} else {
  	color.values[3] = value;
  	}
  	return recomposeColor(color);
  	}

• When nativeColor is enabled, MUI uses color-mix() to mix the divider color with transparent at 0%. This does not change the color at all, so the alpha remains 0.12, and then lighten is applied. The result becomes nearly white and incorrect for borders.
  

  material-ui/packages/mui-material/src/styles/createThemeWithVars.js

  Lines 224 to 239 in 099a07d

  	function colorMix(method, color, coefficient) {
  	if (colorSpace) {
  	let mixer;
  	if (method === safeAlpha) {
  	mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
  	}
  	if (method === safeDarken) {
  	mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
  	}
  	if (method === safeLighten) {
  	mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
  	}
  	return `color-mix(in ${colorSpace}, ${color}, ${mixer})`;
  	}
  	return method(color, coefficient);
  	}

This makes table borders hard to see and hurts accessibility/visual clarity.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26200
  Binaries:
    Node: 24.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.5.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 144.0.7559.133
    Edge: Chromium (141.0.3537.71)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.1 => 11.14.1
    @mui/icons-material: ^7.3.7 => 7.3.7
    @mui/material: ^7.3.7 => 7.3.7
    @mui/x-data-grid: ^8.27.0 => 8.27.0
    @types/react: ^19.2.13 => 19.2.13
    react: ^19.2.4 => 19.2.4
    react-dom: ^19.2.4 => 19.2.4
    typescript: ^5.9.3 => 5.9.3

Search keywords: cssVariables nativeColor TableCell border borderColor

[linear]

MAT-1760

[ZeeshanTamboli]

It's a bug. Looks like we need to apply the alpha first then put it in color-mix.