[joy-ui][docs] Optimize side navigation's relative contrast

The right sidebar has been updated to the ‘solid’ variant for improved interaction with IconButtons.
It is now darker than the left sidebar, creating better relative contrast and lifting the left
sidebar higher on the screen. Additionally, the styles are consistent whether in light or dark mode,
addressing previous issue where the right sidebar appeared higher/lower based on the color
scheme.

docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js

@@ -35,7 +35,7 @@ export default function ColorInversionNavigation() {
         sx={{
           p: 2,
           ...(color !== 'neutral' && {
-            bgcolor: `${color}.800`,
+            bgcolor: `${color}.700`,
           }),
         }}
       >
@@ -131,17 +131,15 @@ export default function ColorInversionNavigation() {
         </Card>
       </Sheet>
       <Sheet
-        variant="soft"
+        variant="solid"
         color="neutral"
         invertedColors
         sx={(theme) => ({
           p: 2,
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          ...(color !== 'neutral' && {
-            bgcolor: `${color}.900`,
-          }),
+          bgcolor: `${color}.900`,
           '& button': {
             borderRadius: '50%',
             padding: 0,

docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx

@@ -35,7 +35,7 @@ export default function ColorInversionNavigation() {
         sx={{
           p: 2,
           ...(color !== 'neutral' && {
-            bgcolor: `${color}.800`,
+            bgcolor: `${color}.700`,
           }),
         }}
       >
@@ -139,9 +139,7 @@ export default function ColorInversionNavigation() {
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          ...(color !== 'neutral' && {
-            bgcolor: `${color}.900`,
-          }),
+          bgcolor: `${color}.900`,
           '& button': {
             borderRadius: '50%',
             padding: 0,