[docs-infra] Add spacing and contrast improvements (#41191)

mui · Feb 21, 2024 · a78985c · a78985c
1 parent 61a0148
commit a78985c
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 181 deletions.
diff --git 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
@@ -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
@@ -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',