From 49106a44b0590f87e26ba6b0d948b56fba451fde Mon Sep 17 00:00:00 2001
From: cipherlogs <73669345+0x78logs@users.noreply.github.com>
Date: Sat, 9 Mar 2024 16:00:14 +0100
Subject: [PATCH] [joy-ui][docs] Remove Unnecessary Styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. `--ListItem-gap`: removed the gap for each list item. Since every list item only has one child, the gap isn’t useless.
2. `--ListItemDecorator-size`: got rid of this style because no decorator was used, and it’s not needed.
---
 .../joy/main-features/color-inversion/ColorInversionFooter.js | 4 ++--
 .../main-features/color-inversion/ColorInversionFooter.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
index d03ce54207cfd2..3f72c40e1308c6 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
@@ -103,7 +103,7 @@ export default function ColorInversionFooter() {
           size="sm"
           orientation="horizontal"
           wrap
-          sx={{ flexGrow: 0, '--ListItem-radius': '8px', '--ListItem-gap': '0px' }}
+          sx={{ flexGrow: 0, '--ListItem-radius': '8px' }}
         >
           <ListItem nested sx={{ width: { xs: '50%', md: 140 } }}>
             <ListSubheader sx={{ fontWeight: 'xl' }}>Sitemap</ListSubheader>
@@ -121,7 +121,7 @@ export default function ColorInversionFooter() {
           </ListItem>
           <ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
             <ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
-            <List sx={{ '--ListItemDecorator-size': '32px' }}>
+            <List>
               <ListItem>
                 <ListItemButton>Joy UI</ListItemButton>
               </ListItem>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
index 8818b639c1d0b1..ffdbc3273eee22 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
@@ -108,7 +108,7 @@ export default function ColorInversionFooter() {
           size="sm"
           orientation="horizontal"
           wrap
-          sx={{ flexGrow: 0, '--ListItem-radius': '8px', '--ListItem-gap': '0px' }}
+          sx={{ flexGrow: 0, '--ListItem-radius': '8px' }}
         >
           <ListItem nested sx={{ width: { xs: '50%', md: 140 } }}>
             <ListSubheader sx={{ fontWeight: 'xl' }}>Sitemap</ListSubheader>
@@ -126,7 +126,7 @@ export default function ColorInversionFooter() {
           </ListItem>
           <ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
             <ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
-            <List sx={{ '--ListItemDecorator-size': '32px' }}>
+            <List>
               <ListItem>
                 <ListItemButton>Joy UI</ListItemButton>
               </ListItem>