mui / mui/material-ui

[data grid] unify palette usage

Open
#47,116 5 comments 0 reactions 1 assignee View on GitHub

@Divyasree00 is already working on this.

Since Feb 11, 2026.

customization: theme design: ui scope: data grid scope: system type: enhancement
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Palette value usage is not really uniform in the data grid in its current form.

Palette → Grey
  • Grey palette values are not really used in the DataGrid.
  • Example: grey700 affects ColumnMenu tooltips, but cells use the browser default tooltip styling.
  • Borders, text, and icons are not linked to Grey tokens at all.

👉 Code Example 1.1

Palette → Actions (Naming & Behavior)
  • Many icons use actions -> active as their default color fill.
  • selected changes some component background like chip background rather than indicating a selected icons, cells or something like this.
  • Hover colors differ:
    • MenuListItems → predictable hover colors
    • DataGrid rows → less predictable hover colors because its a calculated color out of the hover value (thats how material works).

👉 Code Example 1.2

Wish (Request):

A consistent, well-documented theming structure with a transparent token hierarchy — whether based on Material 3 color tokens or the W3C alias token approach.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.