[DataGrid] Fix background colors when CSSVarsProvider is used
#12901
Conversation
cherniavskii
added
bug 🐛
|
Deploy preview: https://deploy-preview-12901--material-ui-x.netlify.app/ |
|
|
||
| const removeOpacity = (color: string) => `rgb(from ${color} r g b / 1)`; | ||
| function blendCssVars(background: string, overlay: string, opacity: number) { | ||
| return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`; |
There was a problem hiding this comment.
Wasn't sure if we could use color-mix. What are our supported browser versions?
There was a problem hiding this comment.
I wanted to validate this approach.
color-mix requires iOS >= 16.2, while we currently support >= 15.4. Same for Safari on MacOS. Other browsers seem to match what we have in our browserslist.
Do you have other ideas for solving this issue?
There was a problem hiding this comment.
No, this is the only thing that could work with CSS variables.
|
|
||
| const removeOpacity = (color: string) => `rgb(from ${color} r g b / 1)`; | ||
| function blendCssVars(background: string, overlay: string, opacity: number) { | ||
| return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`; |
There was a problem hiding this comment.
@KenanYusuf What do you think about this approach?
There was a problem hiding this comment.
@cherniavskii I left a comment here regarding color-mix #14550 (comment)
I think it's a great alternative and does exactly what we need besides the couple of versions of Safari that do not support it.
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
There was a problem hiding this comment.
Tested with the additional hover/selected states in #14550 and it is working well.
Preview: https://codesandbox.io/p/sandbox/distracted-hugle-df8d2w
Fixes #12855