From b0051fd85cbb9685e6c1f33e7f80c66df9448eca Mon Sep 17 00:00:00 2001
From: Nashyn <ns458128@dal.ca>
Date: Fri, 3 May 2024 20:16:33 -0300
Subject: [PATCH 1/4] Slider twitch issue fixed

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

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index ca540d50670659..1ef3fb3c109b7a 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -237,7 +237,9 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
+          <div style={{width: '156px'}}>
           <Typography>{shades[intentShade]}</Typography>
+          </div>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {

From bd89d86ec82cfe0cbf258083e955276ccb8283c5 Mon Sep 17 00:00:00 2001
From: Nashyn <ns458128@dal.ca>
Date: Fri, 3 May 2024 20:32:24 -0300
Subject: [PATCH 2/4] twitch issue solved

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

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 1ef3fb3c109b7a..0d2d25affbd7fd 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -237,8 +237,8 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <div style={{width: '156px'}}>
-          <Typography>{shades[intentShade]}</Typography>
+          <div style={{ width: '156px' }}>
+            <Typography>{shades[intentShade]}</Typography>
           </div>
         </Box>
         <Box sx={{ width: 192 }}>

From 7d453061124d2f55ed67dffc9dc207bf24ecb399 Mon Sep 17 00:00:00 2001
From: Nashyn <ns458128@dal.ca>
Date: Mon, 13 May 2024 20:26:08 -0300
Subject: [PATCH 3/4] magic number fix

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

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 0d2d25affbd7fd..0f3c03b026f5c7 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -210,11 +210,14 @@ 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`];
     const color = state[`${intent}`];
-
+  
     return (
       <Grid item xs={12} sm={6} md={4}>
         <Typography component="label" gutterBottom htmlFor={intent} variant="h6">
@@ -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,7 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <div style={{ width: '156px' }}>
+          <div style={{ width: `${COLOR_WIDTH}px` }}>
             <Typography>{shades[intentShade]}</Typography>
           </div>
         </Box>
@@ -248,7 +251,7 @@ function ColorTool() {
                 ? shades[state.primaryShade]
                 : shades[state.secondaryShade];
             const backgroundColor = colors[hue][shade];
-
+  
             return (
               <Tooltip placement="right" title={hue} key={hue}>
                 <TooltipRadio

From b5ce5b01c7d12af55451a5004e57314633cab59d Mon Sep 17 00:00:00 2001
From: Nashyn <ns458128@dal.ca>
Date: Mon, 13 May 2024 20:42:40 -0300
Subject: [PATCH 4/4] Fix Prettier code style issues in ColorTool.js

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

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 0f3c03b026f5c7..e14d461e81b6ed 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -212,12 +212,12 @@ 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`];
     const color = state[`${intent}`];
-  
+
     return (
       <Grid item xs={12} sm={6} md={4}>
         <Typography component="label" gutterBottom htmlFor={intent} variant="h6">
@@ -251,7 +251,7 @@ function ColorTool() {
                 ? shades[state.primaryShade]
                 : shades[state.secondaryShade];
             const backgroundColor = colors[hue][shade];
-  
+
             return (
               <Tooltip placement="right" title={hue} key={hue}>
                 <TooltipRadio