Revert start of PigmentCSS support

mui · Aug 21, 2024 · 0b2a17a · 0b2a17a
1 parent be69a13
commit 0b2a17a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 55 deletions.
diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
@@ -22,15 +22,7 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
     useResponsiveChartContainerProProps(props, ref);
 
   return (
-    <ResizableContainer
-      {...resizableChartContainerProps}
-      style={
-        {
-          '--width': resizableChartContainerProps.ownerState.width,
-          '--height': resizableChartContainerProps.ownerState.height,
-        } as React.CSSProperties
-      }
-    >
+    <ResizableContainer {...resizableChartContainerProps}>
       {hasIntrinsicSize ? <ChartContainerPro {...chartContainerProProps} /> : null}
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ResizableContainer>

diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -41,7 +41,9 @@ export const ChartsAxisHighlightPath = styled('path', {
   pointerEvents: 'none',
   variants: [
     {
-      props: ({ ownerState }) => ownerState.axisHighlight === 'band',
+      props: {
+        axisHighlight: 'band',
+      },
       style: {
         fill: 'white',
         fillOpacity: 0.1,
@@ -51,7 +53,9 @@ export const ChartsAxisHighlightPath = styled('path', {
       },
     },
     {
-      props: ({ ownerState }) => ownerState.axisHighlight === 'line',
+      props: {
+        axisHighlight: 'line',
+      },
       style: {
         strokeDasharray: '5 2',
         stroke: '#ffffff',

diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -25,9 +25,9 @@ export interface GaugeContainerProps
 const ResizableContainer = styled('div', {
   name: 'MuiGauge',
   slot: 'Container',
-})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ theme }) => ({
-  width: 'var(--width, 100%)',
-  height: 'var(--height, 100%)',
+})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ ownerState, theme }) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -77,12 +77,6 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
       aria-valuenow={value === null ? undefined : value}
       aria-valuemin={valueMin}
       aria-valuemax={valueMax}
-      style={
-        {
-          '--width': inWidth,
-          '--height': inHeight,
-        } as React.CSSProperties
-      }
       {...other}
     >
       {width && height ? (

diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx
@@ -43,11 +43,11 @@ const HighlightElement = styled('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: LineHighlightElementOwnerState }>({
-  transform: `translate(var(--x)px, var(--y)px)`,
-  transformOrigin: `var(--x)px var(--y)px`,
-  fill: 'var(--color)',
-});
+})<{ ownerState: LineHighlightElementOwnerState }>(({ ownerState }) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color,
+}));
 
 export type LineHighlightElementProps = LineHighlightElementOwnerState &
   Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>;
@@ -82,14 +82,6 @@ function LineHighlightElement(props: LineHighlightElementProps) {
       cx={0}
       cy={0}
       r={other.r === undefined ? 5 : other.r}
-      style={
-        {
-          ...other.style,
-          '--x': x,
-          '--y': y,
-          '--color': color,
-        } as React.CSSProperties
-      }
       {...other}
     />
   );

diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -54,9 +54,9 @@ const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: MarkElementOwnerState }>(({ theme }) => ({
+})<{ ownerState: MarkElementOwnerState }>(({ ownerState, theme }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  stroke: 'var(--color)',
+  stroke: ownerState.color,
   strokeWidth: 2,
 }));
 
@@ -120,13 +120,10 @@ function MarkElement(props: MarkElementProps) {
   return (
     <MarkElementPath
       {...other}
-      style={
-        {
-          transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-          transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
-          '--color': color,
-        } as unknown as React.CSSProperties
-      }
+      style={{
+        transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+        transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
+      }}
       ownerState={ownerState}
       className={classes.root}
       d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}

diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
@@ -9,9 +9,9 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 export const ResizableContainer = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container',
-})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>({
-  width: 'var(--width, 100%)',
-  height: 'var(--height, 100%)',
+})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>(({ ownerState }) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -23,4 +23,4 @@ export const ResizableContainer = styled('div', {
     width: '100%',
     height: '100%',
   },
-});
+}));
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -24,15 +24,7 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai
     useResponsiveChartContainerProps(props, ref);
 
   return (
-    <ResizableContainer
-      {...resizableChartContainerProps}
-      style={
-        {
-          '--width': resizableChartContainerProps.ownerState.width,
-          '--height': resizableChartContainerProps.ownerState.height,
-        } as React.CSSProperties
-      }
-    >
+    <ResizableContainer {...resizableChartContainerProps}>
       {hasIntrinsicSize ? <ChartContainer {...chartContainerProps} /> : null}
     </ResizableContainer>
   );