diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
index 6e62b499a68e9a..d03ce54207cfd2 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
@@ -41,8 +41,8 @@ export default function ColorInversionFooter() {
           onClick={() => {
             const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
         >
           <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
index 9fcf01b495e0f0..8818b639c1d0b1 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
@@ -46,8 +46,8 @@ export default function ColorInversionFooter() {
               'success',
               'warning',
             ];
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
         >
           <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
index c597ed65e26d8e..edc60a69a57f3f 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
@@ -45,8 +45,8 @@ export default function ColorInversionHeader() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
index d4d1b4be11f1af..b42268abb8e738 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
@@ -50,8 +50,8 @@ export default function ColorInversionHeader() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
index c9e38ebb35603b..6b7d09f473cf0e 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
@@ -73,8 +73,8 @@ export default function ColorInversionMarketing() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
index b7ddeb29a20708..90e93c26a075d4 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
@@ -78,8 +78,8 @@ export default function ColorInversionMarketing() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
index 57596bd9a5438d..30ab1e7a924819 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
@@ -177,8 +177,8 @@ export default function ColorInversionNavigation() {
           onClick={() => {
             const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
           sx={{ mt: 'auto', height: '40px' }}
         >
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
index 9bbfc84c38a28d..c41c4aed4e09cb 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
@@ -182,8 +182,8 @@ export default function ColorInversionNavigation() {
               'success',
               'warning',
             ];
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
           sx={{ mt: 'auto', height: '40px' }}
         >
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js
index df1cf7be0cd4ad..7d8b603c3e2dc9 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js
@@ -35,8 +35,8 @@ export default function ColorInversionPopup() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         Change the color
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx
index 1b3c9909fdaa98..99684b40da625b 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx
@@ -40,8 +40,8 @@ export default function ColorInversionPopup() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         Change the color