From edcb46b8e685282a1730f21bf8440687f6adde58 Mon Sep 17 00:00:00 2001
From: Victor Zanivan Monteiro <victorzanivan@gmail.com>
Date: Thu, 26 Oct 2023 13:35:51 -0300
Subject: [PATCH] [joy-ui][Progress] Revamp Linear and Circular progress
 variants (#39492)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
---
 .../data/joy/components/alert/AlertInvertedColors.js | 12 ++++++------
 .../joy/components/alert/AlertInvertedColors.tsx     | 12 ++++++------
 .../src/CircularProgress/CircularProgress.tsx        |  9 +++++++++
 .../mui-joy/src/LinearProgress/LinearProgress.tsx    |  8 ++++++++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/docs/data/joy/components/alert/AlertInvertedColors.js b/docs/data/joy/components/alert/AlertInvertedColors.js
index 430c673439be1b..a90dc2acb4fc39 100644
--- a/docs/data/joy/components/alert/AlertInvertedColors.js
+++ b/docs/data/joy/components/alert/AlertInvertedColors.js
@@ -55,16 +55,16 @@ export default function AlertInvertedColors() {
           </Typography>
         </div>
         <LinearProgress
-          variant="soft"
+          variant="solid"
+          color="success"
           value={40}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             bottom: 0,
             left: 0,
             right: 0,
-            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
-            '--LinearProgress-radius': '0px',
-          })}
+            borderRadius: 0,
+          }}
         />
       </Alert>
       <Alert
@@ -72,7 +72,7 @@ export default function AlertInvertedColors() {
         color="danger"
         invertedColors
         startDecorator={
-          <CircularProgress size="lg">
+          <CircularProgress size="lg" color="danger">
             <Warning />
           </CircularProgress>
         }
diff --git a/docs/data/joy/components/alert/AlertInvertedColors.tsx b/docs/data/joy/components/alert/AlertInvertedColors.tsx
index 430c673439be1b..a90dc2acb4fc39 100644
--- a/docs/data/joy/components/alert/AlertInvertedColors.tsx
+++ b/docs/data/joy/components/alert/AlertInvertedColors.tsx
@@ -55,16 +55,16 @@ export default function AlertInvertedColors() {
           </Typography>
         </div>
         <LinearProgress
-          variant="soft"
+          variant="solid"
+          color="success"
           value={40}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             bottom: 0,
             left: 0,
             right: 0,
-            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
-            '--LinearProgress-radius': '0px',
-          })}
+            borderRadius: 0,
+          }}
         />
       </Alert>
       <Alert
@@ -72,7 +72,7 @@ export default function AlertInvertedColors() {
         color="danger"
         invertedColors
         startDecorator={
-          <CircularProgress size="lg">
+          <CircularProgress size="lg" color="danger">
             <Warning />
           </CircularProgress>
         }
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index 7b71e59c98ab72..e2c98d71f3dc33 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -128,6 +128,15 @@ const CircularProgressRoot = styled('span', {
         ...rest,
       },
     }),
+    ...(ownerState.variant === 'soft' && {
+      '--CircularProgress-trackColor': theme.variants.soft.neutral.backgroundColor,
+      '--CircularProgress-progressColor': theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
+    ...(ownerState.variant === 'solid' && {
+      '--CircularProgress-trackColor':
+        theme.variants.softHover?.[ownerState.color!].backgroundColor,
+      '--CircularProgress-progressColor': theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
   };
 });
 
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index ee7d2d03f8ec9b..caee207b2e8455 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -113,6 +113,14 @@ const LinearProgressRoot = styled('div', {
       color: 'inherit',
       position: 'absolute', // required to make `left` animation works.
     },
+    ...(ownerState.variant === 'soft' && {
+      backgroundColor: theme.variants.soft.neutral.backgroundColor,
+      color: theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
+    ...(ownerState.variant === 'solid' && {
+      backgroundColor: theme.variants.softHover?.[ownerState.color!].backgroundColor,
+      color: theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
   }),
   ({ ownerState }) =>
     ownerState.determinate