From a78985c978df9ca9d2123247ff44babc68f9d4e4 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:32:30 -0300
Subject: [PATCH] [docs-infra] Add spacing and contrast improvements (#41191)

---
 docs/src/modules/components/AppNavDrawer.js   |  10 +-
 .../modules/components/AppNavDrawerItem.js    |  37 +--
 .../modules/components/AppTableOfContents.js  |   2 +-
 .../src/modules/components/DiamondSponsors.js | 249 ++++++++----------
 .../src/modules/components/MarkdownElement.js |  19 +-
 5 files changed, 136 insertions(+), 181 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 32ad7954cee8ff..8ab8f44280d169 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -64,19 +64,15 @@ function ProductDrawerButton(props) {
         onClick={handleClick}
         endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
         sx={(theme) => ({
-          py: 0.1,
           minWidth: 0,
+          p: '1px 8px',
           fontSize: theme.typography.pxToRem(13),
           fontWeight: theme.typography.fontWeightMedium,
           color: (theme.vars || theme).palette.primary[600],
           '& svg': {
-            ml: -0.6,
             width: 18,
             height: 18,
           },
-          '& > span': {
-            ml: '4px',
-          },
           ...theme.applyDarkStyles({
             color: (theme.vars || theme).palette.primary[300],
           }),
@@ -114,7 +110,7 @@ function ProductIdentifier(props) {
     <Box sx={{ flexGrow: 1 }}>
       <Typography
         sx={(theme) => ({
-          ml: 1.5,
+          ml: 1,
           color: (theme.vars || theme).palette.grey[600],
           fontSize: theme.typography.pxToRem(11),
           fontWeight: 700,
@@ -402,7 +398,7 @@ export default function AppNavDrawer(props) {
               aria-label={t('goToHome')}
               sx={{
                 pr: '12px',
-                mr: '4px',
+                mr: '8px',
                 borderRight: '1px solid',
                 borderColor: 'divider',
               }}
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 82b436a56e5b14..2c47e632a635a4 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -62,7 +62,7 @@ const Item = styled(
       ...(subheader && {
         marginTop: theme.spacing(1),
         textTransform: 'uppercase',
-        letterSpacing: '.08rem',
+        letterSpacing: '.1rem',
         fontWeight: theme.typography.fontWeightBold,
         fontSize: theme.typography.pxToRem(11),
         '&::before': {
@@ -101,26 +101,14 @@ const Item = styled(
         color: (theme.vars || theme).palette.primary[600],
         backgroundColor: (theme.vars || theme).palette.primary[50],
         '&:hover': {
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
-            : alpha(
-                theme.palette.primary.main,
-                theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-              ),
+          backgroundColor: alpha(theme.palette.primary[100], 0.8),
+          color: (theme.vars || theme).palette.primary[700],
           '@media (hover: none)': {
             backgroundColor: theme.vars
               ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
               : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
           },
         },
-        '&.Mui-focusVisible': {
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
-            : alpha(
-                theme.palette.primary.main,
-                theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-              ),
-        },
         '&::before': {
           background: (theme.vars || theme).palette.primary[400],
         },
@@ -138,19 +126,16 @@ const Item = styled(
           },
         },
       }),
-      '&.Mui-focusVisible': {
-        backgroundColor: (theme.vars || theme).palette.divider,
-      },
       [theme.breakpoints.up('md')]: {
         paddingTop: 4,
         paddingBottom: 4,
       },
       '& .ItemButtonIcon': {
-        marginRight: '5px',
+        marginRight: '6px',
         color: (theme.vars || theme).palette.primary.main,
       },
       '&:hover .ItemButtonIcon': {
-        color: (theme.vars || theme).palette.text.primary,
+        color: (theme.vars || theme).palette.primary.light,
         '@media (hover: none)': {
           color: (theme.vars || theme).palette.primary.main,
         },
@@ -164,6 +149,10 @@ const Item = styled(
       '&.app-drawer-active': {
         color: (theme.vars || theme).palette.primary[300],
         backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+          color: (theme.vars || theme).palette.primary[200],
+        },
         '&::before': {
           background: (theme.vars || theme).palette.primary[400],
         },
@@ -211,7 +200,7 @@ const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })
 
 export const sxChip = (color) => [
   (theme) => ({
-    ml: 1.5,
+    ml: 1,
     fontSize: theme.typography.pxToRem(10),
     fontWeight: 'semiBold',
     textTransform: 'uppercase',
@@ -220,18 +209,18 @@ export const sxChip = (color) => [
     border: 1,
     borderColor: (theme.vars || theme).palette[color][300],
     bgcolor: alpha(theme.palette[color][100], 0.5),
-    color: (theme.vars || theme).palette[color][700],
+    color: (theme.vars || theme).palette[color][900],
     '&:hover': {
       bgcolor: alpha(theme.palette[color][100], 0.5),
     },
     '& .MuiChip-label': {
-      px: 0.6,
+      px: '4px',
     },
   }),
   (theme) =>
     theme.applyDarkStyles({
       borderColor: alpha(theme.palette[color][800], 0.5),
-      bgcolor: alpha(theme.palette[color][800], 0.5),
+      bgcolor: alpha(theme.palette[color][900], 0.5),
       color: (theme.vars || theme).palette[color][300],
       '&:hover': {
         bgcolor: alpha(theme.palette[color][900], 0.5),
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index cf685a681782e6..2d67d429f5d21c 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -15,7 +15,7 @@ import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 const Nav = styled('nav')(({ theme }) => ({
   top: 'var(--MuiDocs-header-height)',
   marginTop: 'var(--MuiDocs-header-height)',
-  paddingLeft: 2, // Fix truncated focus outline style
+  paddingLeft: 6, // Fix truncated focus outline style
   position: 'sticky',
   height: 'calc(100vh - var(--MuiDocs-header-height))',
   overflowY: 'auto',
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 7488776b44d2a6..8e4b9d7d0f47ab 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -2,11 +2,9 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import { useTranslate } from '@mui/docs/i18n';
 import { Link } from '@mui/docs/Link';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const NativeLink = styled('a')(({ theme }) => ({
   boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
@@ -26,6 +24,10 @@ const NativeLink = styled('a')(({ theme }) => ({
   '&:hover': {
     backgroundColor: (theme.vars || theme).palette.grey[50],
   },
+  '&:focus-visible': {
+    outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
+    outlineOffset: '2px',
+  },
   '& img': {
     display: 'inline-block',
   },
@@ -44,147 +46,116 @@ export default function DiamondSponsors() {
   const t = useTranslate();
 
   return (
-    <Stack
-      spacing={0.5}
-      direction="column"
-      sx={{
-        mt: 1.5,
-        pt: 1.5,
-        borderTop: '1px solid',
-        borderColor: 'divider',
-      }}
-    >
-      <Button
-        component="a"
-        href="/material-ui/discover-more/backers/"
+    <Stack direction="column" mt={2} spacing={1} useFlexGap>
+      <NativeLink
+        data-ga-event-category="sponsor"
+        data-ga-event-action="docs-premium"
+        data-ga-event-label="octopus.com"
+        href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
+        rel="noopener sponsored"
+        target="_blank"
+      >
+        <Box
+          component="img"
+          height="25px"
+          width="116px"
+          src="/static/sponsors/octopus-light.svg"
+          alt="octopus"
+          title="Repeatable, reliable deployments"
+          loading="lazy"
+          sx={(theme) =>
+            theme.applyDarkStyles({
+              content: `url(/static/sponsors/octopus-dark.svg)`,
+            })
+          }
+        />
+      </NativeLink>
+      <NativeLink
+        data-ga-event-category="sponsor"
+        data-ga-event-action="docs-premium"
+        data-ga-event-label="doit.com"
+        href="https://www.doit.com/flexsave/?utm_source=materialui&utm_medium=referral"
+        rel="noopener sponsored"
         target="_blank"
-        rel="noopener nofollow"
-        size="small"
-        startIcon={<DiamondOutlinedIcon />}
-        sx={{
-          width: 'fit-content',
-          fontSize: (theme) => theme.typography.pxToRem(12.5),
-          '& svg': {
-            marginRight: 0.5,
-            width: 16,
-            height: 16,
-          },
-        }}
       >
-        {t('diamondSponsors')}
-      </Button>
-      <Stack spacing={1}>
-        <NativeLink
-          data-ga-event-category="sponsor"
-          data-ga-event-action="docs-premium"
-          data-ga-event-label="octopus.com"
-          href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
-          rel="noopener sponsored"
-          target="_blank"
-        >
-          <Box
-            component="img"
-            height="25px"
-            width="116px"
-            src="/static/sponsors/octopus-light.svg"
-            alt="octopus"
-            title="Repeatable, reliable deployments"
-            loading="lazy"
-            sx={(theme) =>
-              theme.applyDarkStyles({
-                content: `url(/static/sponsors/octopus-dark.svg)`,
-              })
-            }
-          />
-        </NativeLink>
-        <NativeLink
-          data-ga-event-category="sponsor"
-          data-ga-event-action="docs-premium"
-          data-ga-event-label="doit.com"
-          href="https://www.doit.com/flexsave/?utm_source=materialui&utm_medium=referral"
-          rel="noopener sponsored"
-          target="_blank"
-        >
-          <Box
-            component="img"
-            height="29px"
-            width="70px"
-            src="/static/sponsors/doit-light.svg"
-            alt="doit"
-            title="Management Platform for Google Cloud and AWS"
-            loading="lazy"
-            sx={(theme) =>
-              theme.applyDarkStyles({
-                content: `url(/static/sponsors/doit-dark.svg)`,
-              })
-            }
-          />
-        </NativeLink>
-        <NativeLink
-          data-ga-event-category="sponsor"
-          data-ga-event-action="docs-premium"
-          data-ga-event-label="marblism.com"
-          href="https://www.marblism.com/?utm_source=mui"
-          rel="noopener sponsored"
-          target="_blank"
-        >
-          <Box
-            component="img"
-            height="27px"
-            width="90px"
-            src="/static/sponsors/marblism-light.svg"
-            alt="marblism"
-            title="AI web app generation"
-            loading="lazy"
-            sx={(theme) =>
-              theme.applyDarkStyles({
-                content: `url(/static/sponsors/marblism-dark.svg)`,
-              })
-            }
-          />
-        </NativeLink>
-        <Link
-          href="/material-ui/discover-more/backers/#diamond-sponsors"
-          sx={(theme) => ({
-            width: '100%',
-            p: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 1,
-            border: '1px dashed',
-            transition: theme.transitions.create(['color', 'border-color', 'background-color']),
-            backgroundColor: alpha(theme.palette.primary[50], 0.5),
-            borderColor: (theme.vars || theme).palette.primary[200],
+        <Box
+          component="img"
+          height="29px"
+          width="70px"
+          src="/static/sponsors/doit-light.svg"
+          alt="doit"
+          title="Management Platform for Google Cloud and AWS"
+          loading="lazy"
+          sx={(theme) =>
+            theme.applyDarkStyles({
+              content: `url(/static/sponsors/doit-dark.svg)`,
+            })
+          }
+        />
+      </NativeLink>
+      <NativeLink
+        data-ga-event-category="sponsor"
+        data-ga-event-action="docs-premium"
+        data-ga-event-label="marblism.com"
+        href="https://www.marblism.com/?utm_source=mui"
+        rel="noopener sponsored"
+        target="_blank"
+      >
+        <Box
+          component="img"
+          height="27px"
+          width="90px"
+          src="/static/sponsors/marblism-light.svg"
+          alt="marblism"
+          title="AI web app generation"
+          loading="lazy"
+          sx={(theme) =>
+            theme.applyDarkStyles({
+              content: `url(/static/sponsors/marblism-dark.svg)`,
+            })
+          }
+        />
+      </NativeLink>
+      <Link
+        href="/material-ui/discover-more/backers/#diamond-sponsors"
+        sx={(theme) => ({
+          p: 1.5,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 1,
+          border: '1px dashed',
+          transition: theme.transitions.create(['color', 'border-color', 'background-color']),
+          backgroundColor: alpha(theme.palette.primary[50], 0.5),
+          borderColor: (theme.vars || theme).palette.grey[200],
+          boxShadow: `inset 0 1px 1px ${
+            (theme.vars || theme).palette.grey[50]
+          }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.5)}`,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.primary[100], 0.5),
+            borderColor: (theme.vars || theme).palette.primary[300],
+          },
+          ...theme.applyDarkStyles({
+            backgroundColor: alpha(theme.palette.primary[700], 0.1),
+            borderColor: alpha(theme.palette.primary[400], 0.2),
             boxShadow: `inset 0 1px 1px ${
-              (theme.vars || theme).palette.grey[50]
-            }, 0 1px 2px ${alpha(theme.palette.primary[100], 0.8)}`,
+              (theme.vars || theme).palette.primaryDark[800]
+            }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
             '&:hover': {
-              backgroundColor: alpha(theme.palette.primary[100], 0.5),
-              borderColor: (theme.vars || theme).palette.primary[300],
+              backgroundColor: alpha(theme.palette.primary[700], 0.2),
+              borderColor: (theme.vars || theme).palette.primary[400],
             },
-            ...theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.primary[400], 0.05),
-              borderColor: alpha(theme.palette.primary[300], 0.3),
-              boxShadow: `inset 0 1px 1px ${
-                (theme.vars || theme).palette.primaryDark[800]
-              }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[400], 0.1),
-                borderColor: (theme.vars || theme).palette.primary[400],
-              },
-            }),
-          })}
-        >
-          <Typography variant="caption" fontWeight="semiBold" textAlign="center">
-            {t('becomeADiamondSponsor')}
-          </Typography>
-          {/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
-            {t('diamondSponsorVacancies')}
-          </Typography> */}
-        </Link>
-      </Stack>
+          }),
+        })}
+      >
+        <Typography variant="caption" fontWeight="semiBold" textAlign="center">
+          {t('becomeADiamondSponsor')}
+        </Typography>
+        {/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
+              {t('diamondSponsorVacancies')}
+            </Typography> */}
+      </Link>
     </Stack>
   );
 }
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 360384a31abc8a..4cb01ecf1d3e29 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -12,6 +12,10 @@ const Root = styled('div')(
     ...lightTheme.typography.body1,
     lineHeight: 1.6, // Increased compared to the 1.5 default to make the docs easier to read.
     color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    '& :focus-visible': {
+      outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`,
+      outlineOffset: 2,
+    },
     '& strong': {
       color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
     },
@@ -152,7 +156,7 @@ const Root = styled('div')(
         marginLeft: 4,
         height: 26,
         width: 26,
-        backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
+        backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
         color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
         border: '1px solid',
         borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
@@ -542,11 +546,6 @@ const Root = styled('div')(
           display: 'block',
         },
       },
-      '&:focus-visible': {
-        outline: '2px solid',
-        outlineOffset: 2,
-        outlineColor: lightTheme.palette.primaryDark[500],
-      },
     },
     '& .MuiCode-copyKeypress': {
       pointerEvents: 'none',
@@ -605,7 +604,7 @@ const Root = styled('div')(
         '&:hover .anchor-link, & .comment-link': {
           color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
           borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
-          backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
+          backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
           '&:hover': {
             borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
             backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
@@ -648,13 +647,13 @@ const Root = styled('div')(
         borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
         '& > code': {
           height: 'fit-content',
-          backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`,
-          borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`,
+          backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
+          borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`,
         },
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
           backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
-          borderColor: alpha(lightTheme.palette.error[600], 0.3),
+          borderColor: alpha(darkTheme.palette.error[600], 0.3),
           '& strong': {
             color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
           },