From c763f33bce2197565b75450d87e3d25213dea8c2 Mon Sep 17 00:00:00 2001
From: nisarg chudasama <nisargchudasama63@gmail.com>
Date: Sun, 8 Sep 2024 23:07:11 -0400
Subject: [PATCH 1/4] Slider twitch issue resolved

---
 docs/data/material/customization/color/ColorTool.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index ca540d50670659..902bf3a81b6d69 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -210,6 +210,9 @@ function ColorTool() {
     );
   };
 
+  const COLOR_WIDTH = 156;
+  const SLIDER_WIDTH_CALC = 'calc(100% - 80px)';
+
   const colorPicker = (intent) => {
     const intentInput = state[`${intent}Input`];
     const intentShade = state[`${intent}Shade`];
@@ -229,7 +232,7 @@ function ColorTool() {
         <Box sx={{ display: 'flex', alignItems: 'center', mt: 2, mb: 2 }}>
           <Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
           <Slider
-            sx={{ width: 'calc(100% - 80px)', ml: 3, mr: 3 }}
+            sx={{ width: SLIDER_WIDTH_CALC, ml: 3, mr: 3 }}
             value={intentShade}
             min={0}
             max={13}
@@ -237,7 +240,9 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <div style={{ width: `${COLOR_WIDTH}px` }}>
+            <Typography>{shades[intentShade]}</Typography>
+          </div>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {
@@ -308,4 +313,4 @@ function ColorTool() {
   );
 }
 
-export default ColorTool;
+export default ColorTool;
\ No newline at end of file

From 6cbc59f0cf0710c27cfafd4b1d454772e8426b88 Mon Sep 17 00:00:00 2001
From: nisarg chudasama <nisargchudasama63@gmail.com>
Date: Sun, 8 Sep 2024 23:14:08 -0400
Subject: [PATCH 2/4] prettier issue fixed

---
 docs/data/material/customization/color/ColorTool.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 902bf3a81b6d69..e14d461e81b6ed 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -313,4 +313,4 @@ function ColorTool() {
   );
 }
 
-export default ColorTool;
\ No newline at end of file
+export default ColorTool;

From 59e10c3b82685b4661957abc9314cb842a1c7005 Mon Sep 17 00:00:00 2001
From: nisarg-chudasama <nisarg_chudasama@trendmicro.com>
Date: Sat, 14 Sep 2024 10:25:11 -0400
Subject: [PATCH 3/4] Slider twitch issue updated

---
 docs/data/material/customization/color/ColorTool.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 195486f0293d03..a7d626cac8d38c 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -210,9 +210,6 @@ function ColorTool() {
     );
   };
 
-  const COLOR_WIDTH = 156;
-  const SLIDER_WIDTH_CALC = 'calc(100% - 80px)';
-
   const colorPicker = (intent) => {
     const intentInput = state[`${intent}Input`];
     const intentShade = state[`${intent}Shade`];
@@ -232,7 +229,7 @@ function ColorTool() {
         <Box sx={{ display: 'flex', alignItems: 'center', mt: 2, mb: 2 }}>
           <Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
           <Slider
-            sx={{ width: SLIDER_WIDTH_CALC, ml: 3, mr: 3 }}
+            sx={{ width: 'calc(100%-80px)', ml: 3, mr: 3 }}
             value={intentShade}
             min={0}
             max={13}
@@ -240,9 +237,7 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <div style={{ width: `${COLOR_WIDTH}px` }}>
-            <Typography>{shades[intentShade]}</Typography>
-          </div>
+          <Typography minWidth={40}>{shades[intentShade]}</Typography>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {

From dd0ae0738b03d33e2b77df64b8eece3a777b6a3f Mon Sep 17 00:00:00 2001
From: nisarg-chudasama <nisarg_chudasama@trendmicro.com>
Date: Sat, 14 Sep 2024 10:40:42 -0400
Subject: [PATCH 4/4] minor change

---
 docs/data/material/customization/color/ColorTool.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index a7d626cac8d38c..f50e08975f7b9c 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -229,7 +229,7 @@ function ColorTool() {
         <Box sx={{ display: 'flex', alignItems: 'center', mt: 2, mb: 2 }}>
           <Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
           <Slider
-            sx={{ width: 'calc(100%-80px)', ml: 3, mr: 3 }}
+            sx={{ width: 'calc(100% - 80px)', ml: 3, mr: 3 }}
             value={intentShade}
             min={0}
             max={13}