[docs] Markdown redesign polish

docs/src/modules/brandingTheme.ts

@@ -215,7 +215,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
         fontWeight: 800,
         lineHeight: 44 / 36,
-        color: mode === 'dark' ? grey[300] : blue[900],
+        color: mode === 'dark' ? grey[200] : blueDark[700],
       },
       h3: {
         fontSize: defaultTheme.typography.pxToRem(36),

docs/src/modules/components/AppLayoutDocs.js

@@ -47,7 +47,7 @@ const StyledAppContainer = styled(AppContainer, {
       },
       ...(!disableToc && {
         [theme.breakpoints.up('sm')]: {
-          width: `calc(100% - ${TOC_WIDTH}px)`,
+          maxWidth: '900px',
         },
       }),
     }),

docs/src/modules/components/AppNavDrawer.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import NextLink from 'next/link';
 import { styled } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
@@ -8,6 +9,7 @@ import Divider from '@material-ui/core/Divider';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Box from '@material-ui/core/Box';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
+import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
 import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
 import Link from 'docs/src/modules/components/Link';
@@ -60,19 +62,9 @@ const ToolbarDiv = styled('div')(({ theme }) => {
     paddingLeft: theme.spacing(3),
     display: 'flex',
     flexGrow: 1,
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  };
-});
-
-const TitleLink = styled(Link)(({ theme }) => {
-  return {
-    color: theme.palette.text.secondary,
-    marginBottom: theme.spacing(0.5),
-    '&:hover': {
-      color: theme.palette.primary.main,
-    },
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
   };
 });
 
@@ -172,16 +164,18 @@ function AppNavDrawer(props) {
       <React.Fragment>
         <ToolbarIE11>
           <ToolbarDiv>
-            <TitleLink href="/" underline="hover" onClick={onClose} variant="h6" color="inherit">
-              Material-UI
-            </TitleLink>
+            <NextLink href="/" passHref onClick={onClose}>
+              <Box component="a" aria-label="Goto homepage" sx={{ lineHeight: 0, mr: 2 }}>
+                <SvgMuiLogo width={32} />
+              </Box>
+            </NextLink>
             {process.env.LIB_VERSION ? (
               <Link
-                color="text.secondary"
                 underline="hover"
                 variant="caption"
                 href={`https://material-ui.com${languagePrefix}/versions/`}
                 onClick={onClose}
+                sx={{ color: (theme) => (theme.palette.mode === 'dark' ? 'grey.500' : 'grey.800') }}
               >
                 {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */}
                 {`v${process.env.LIB_VERSION}`}

docs/src/modules/components/AppTableOfContents.js

@@ -47,8 +47,9 @@ const NavItem = styled(Link, {
 })(({ active, secondary, theme }) => {
   const activeStyles = {
     borderLeftColor:
-      theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
-    color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800],
+      theme.palette.mode === 'light' ? theme.palette.primary[200] : theme.palette.primary[700],
+    color: theme.palette.mode === 'dark' ? theme.palette.primary[400] : theme.palette.primary[500],
+    fontWeight: 600
   };
 
   return {
@@ -58,8 +59,8 @@ const NavItem = styled(Link, {
     boxSizing: 'border-box',
     '&:hover': {
       borderLeftColor:
-        theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
-      color: theme.palette.grey[700],
+        theme.palette.mode === 'light' ? theme.palette.primary[200] : theme.palette.primary[700],
+      color: theme.palette.mode === 'light' ? theme.palette.primary[500] : theme.palette.primary[400],
     },
     ...(!active && {
       color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[900],

docs/src/modules/components/DiamondSponsors.js

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
 import { useTheme, styled } from '@material-ui/core/styles';
-import AddIcon from '@material-ui/icons/Add';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const Root = styled('div')(({ theme }) => ({
-  '& a': {
-    display: 'block',
-    marginBottom: theme.spacing(1),
-  },
   '& img': {
     display: 'inline-block',
   },
 }));
 
 const Placeholder = styled('a')(({ theme }) => ({
-  width: 125,
-  height: 35,
+  width: 40,
+  height: 40,
+  fontWeight: 600,
   alignItems: 'center',
   justifyContent: 'center',
+  textDecoration: 'none',
   borderRadius: theme.shape.borderRadius,
-  color: theme.palette.divider,
+  color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800],
   border: `1px dashed ${theme.palette.divider}`,
   transition: theme.transitions.create(['color', 'border-color']),
   '&&': {
@@ -40,53 +39,68 @@ export default function DiamondSponsors(props) {
 
   return (
     <Root>
-      <Typography variant="caption" color="text.secondary" display="block" gutterBottom>
+      <Typography variant="caption" color="primary.main" display="block" gutterBottom>
         {t('diamondSponsors')}
       </Typography>
-      <a
-        data-ga-event-category="sponsor"
-        data-ga-event-action={spot}
-        data-ga-event-label="octopus"
-        href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
-        rel="noopener noreferrer sponsored"
-        target="_blank"
-        style={{ width: 125, height: 35 }}
-      >
-        <img
-          width="125"
-          height="35"
-          src={`/static/sponsors/octopus-${theme.palette.mode}.png`}
-          alt="octopus"
-          title="Repeatable, reliable deployments"
-          loading="lazy"
-        />
-      </a>
-      <a
-        data-ga-event-category="sponsor"
-        data-ga-event-action={spot}
-        data-ga-event-label="doit"
-        href="https://www.doit-intl.com/?utm_source=materialui&utm_medium=referral"
-        rel="noopener noreferrer sponsored"
-        target="_blank"
-        style={{ width: 125, height: 35 }}
-      >
-        <img
-          width="125"
-          height="35"
-          src={`/static/sponsors/doit-intl.png`}
-          alt="doit-intl"
-          title="Management Platform for Google Cloud and AWS"
-          loading="lazy"
-        />
-      </a>
-      <Placeholder
-        aria-label={t('diamondSponsors')}
-        rel="noopener noreferrer"
-        target="_blank"
-        href="/discover-more/backers/#diamond"
-      >
-        <AddIcon />
-      </Placeholder>
+      <Grid container direction="row" alignItems="center" gap={2}>
+        <Box
+          component="a"
+          data-ga-event-category="sponsor"
+          data-ga-event-action={spot}
+          data-ga-event-label="octopus"
+          href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
+          rel="noopener noreferrer sponsored"
+          target="_blank"
+          style={{ width: 40, height: 40 }}
+        >
+          <img
+            width="40"
+            height="40"
+            src="/static/sponsors/octopus.png"
+            alt="octopus"
+            title="Repeatable, reliable deployments"
+            loading="lazy"
+          />
+        </Box>
+        <Box
+          component="a"
+          data-ga-event-category="sponsor"
+          data-ga-event-action={spot}
+          data-ga-event-label="doit"
+          href="https://www.doit-intl.com/?utm_source=materialui&utm_medium=referral"
+          rel="noopener noreferrer sponsored"
+          target="_blank"
+          sx={{
+            width: 40,
+            height: 40,
+            pt: '10px',
+            pl: '5px',
+            border: `1px solid ${
+              theme.palette.mode === 'dark'
+                ? theme.palette.primaryDark[700]
+                : theme.palette.grey[300]
+            }`,
+            borderRadius: 0.5,
+          }}
+        >
+          <img
+            width="30"
+            height="15"
+            src={`/static/sponsors/doit.png`}
+            alt="doit-intl"
+            title="Management Platform for Google Cloud and AWS"
+            loading="lazy"
+          />
+        </Box>
+        <Placeholder
+          aria-label={t('diamondSponsors')}
+          rel="noopener noreferrer"
+          target="_blank"
+          href="/discover-more/backers/#diamond"
+        >
+          +1
+        </Placeholder>
+      </Grid>
     </Root>
   );
 }

docs/src/modules/components/MarkdownElement.js

@@ -31,7 +31,8 @@ const Root = styled('div')(({ theme }) => ({
     direction: 'ltr',
     lineHeight: 1.4,
     display: 'inline-block',
-    fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+    fontFamily: '"IBM Plex Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+    fontWeight: 600,
     WebkitFontSmoothing: 'subpixel-antialiased',
     padding: '0 5px',
     color: theme.palette.text.primary,
@@ -48,6 +49,8 @@ const Root = styled('div')(({ theme }) => ({
   // code blocks
   '& pre code': {
     fontSize: '.9em',
+    fontFamily: '"IBM Plex Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+    fontWeight: 500
   },
   '& .token.operator': {
     background: 'transparent',
@@ -57,7 +60,7 @@ const Root = styled('div')(({ theme }) => ({
     fontSize: 40,
     fontFamily: ['"PlusJakartaSans-ExtraBold"'].join(','),
     margin: '16px 0',
-    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.primary[900],
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.primaryDark[900],
     fontWeight: 800,
   },
   '& .description': {
@@ -69,7 +72,7 @@ const Root = styled('div')(({ theme }) => ({
     fontSize: 30,
     margin: '40px 0 10px',
     fontWeight: 500,
-    color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900],
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.primaryDark[700],
   },
   '& h3': {
     ...theme.typography.h6,