fix: migrate from rgba channel tokens to color-mix for MUI native colors#697
Merged
fix: migrate from rgba channel tokens to color-mix for MUI native colors#697
Conversation
MUI v7.3.10 (PR #47765) stopped generating *Channel CSS variables when
nativeColor: true is set, breaking all rgba(${...Channel} / alpha)
patterns across the codebase resulting in transparent backgrounds.
Replace all occurrences with color-mix(in srgb, color alpha%, transparent)
as recommended by MUI's native color migration guide. Also bump @mui/*
packages to ^7.3.10 and @mui/lab to 7.0.1-beta.24.
Made-with: Cursor
|
Hey! This is your new endpoint: https://50933d99.widget-fixmigrate.pages.dev |
1 similar comment
|
Hey! This is your new endpoint: https://50933d99.widget-fixmigrate.pages.dev |
effie-ms
approved these changes
Apr 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Which Linear task is linked to this PR?
N/A — discovered regression from MUI v7.3.10 update.
Why was it implemented this way?
MUI v7.3.10 included PR #47765 which stopped generating
*ChannelCSS variables (e.g.,--lifi-palette-primary-mainChannel) whennativeColor: trueis set. This broke allrgba(${...Channel} / alpha)patterns across the codebase, resulting in transparent/missing backgrounds on buttons, tabs, cards, and other components.The fix follows MUI's official native color migration guide by replacing all
rgba()+ channel token patterns withcolor-mix(in srgb, color alpha%, transparent).Changes:
rgba(${...Channel} / alpha)→color-mix(in srgb, ${...} alpha%, transparent)across 38 style files in@lifi/widget,@lifi/wallet-management, andwidget-playground@mui/material,@mui/system,@mui/icons-materialto^7.3.10@mui/material-nextjsto^7.3.10@mui/labto7.0.1-beta.24Visual showcase (Screenshots or Videos)
Before (v7.3.10 without fix): transparent backgrounds on text buttons, navigation tabs, tertiary buttons, settings icons.
After: all backgrounds render correctly with proper
color-mix()values in both light and dark modes.Checklist before requesting a review