From 7daeb20784a55c2a2c30baeb18e8a10c9666d1f3 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Wed, 24 Apr 2024 22:44:10 +0200 Subject: [PATCH] blend css vars --- .../components/containers/GridRootStyles.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index 0d5e88de51f60..db01490e36c20 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -153,15 +153,11 @@ export const GridRootStyles = styled('div', { t.palette.action.selectedOpacity + t.palette.action.hoverOpacity, ); - const pinnedHoverBackground = t.vars - ? hoverColor - : blend(pinnedBackground, hoverColor, hoverOpacity); - const pinnedSelectedBackground = t.vars - ? selectedBackground - : blend(pinnedBackground, selectedBackground, selectedOpacity); - const pinnedSelectedHoverBackground = t.vars - ? hoverColor - : blend(pinnedSelectedBackground, hoverColor, hoverOpacity); + const blendFn = t.vars ? blendCssVars : blend; + + const pinnedHoverBackground = blendFn(pinnedBackground, hoverColor, hoverOpacity); + const pinnedSelectedBackground = blendFn(pinnedBackground, selectedBackground, selectedOpacity); + const pinnedSelectedHoverBackground = blendFn(pinnedSelectedBackground, hoverColor, hoverOpacity); const selectedStyles = { backgroundColor: selectedBackground, @@ -678,3 +674,8 @@ function blend(background: string, overlay: string, opacity: number, gamma: numb values: rgb as any, }); } + +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%))`; +}