[docs] Markdown redesign polish

docs/src/components/header/ThemeModeToggle.tsx

@@ -18,7 +18,7 @@ const ThemeModeToggle = (props: { checked: boolean; onChange: (checked: boolean)
           bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'transparent'),
           borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
           '& svg': {
-            fontSize: 18,
+            fontSize: (theme) => theme.typography.pxToRem(18),
           },
         }}
       >

docs/src/components/home/AdvancedShowcase.tsx

@@ -2029,7 +2029,7 @@ export default function DataTable() {
                 boxShadow: '0px 4px 20px rgb(61 71 82 / 25%)',
                 borderRadius: '10px',
                 '& .MuiMenuItem-root': {
-                  fontSize: 12,
+                  fontSize: '0.75rem',
                 },
               },
             }}
@@ -2066,6 +2066,9 @@ export default function DataTable() {
               '&::-webkit-scrollbar': {
                 display: 'none',
               },
+              '& code[class*="language-"]': {
+                fontSize: 'inherit',
+              },
             },
           }}
         >

docs/src/components/home/CoreShowcase.tsx

@@ -66,8 +66,8 @@ const FlashCode = styled('div', {
   position: 'absolute',
   left: 0,
   right: 0,
-  top: startLine * 18,
-  height: (endLine - startLine + 1) * 18,
+  top: `calc(0.75rem * 1.5 * ${startLine})`,
+  height: `calc(0.75rem * 1.5 * ${endLine - startLine + 1})`,
   transition: '0.3s',
   ...theme.typography.caption,
   backgroundColor: alpha(theme.palette.primary.main, 0.2),
@@ -226,8 +226,8 @@ export default function CoreShowcase() {
               noWrap
               sx={{ opacity: 0.5 }}
             >
-              <TouchAppRounded sx={{ fontSize: 14, verticalAlign: 'text-bottom' }} /> Hover the
-              component to highlight the code.
+              <TouchAppRounded sx={{ fontSize: '0.875rem', verticalAlign: 'text-bottom' }} /> Hover
+              the component to highlight the code.
             </Typography>
           </Box>
           <ThemeProvider theme={theme}>
@@ -287,6 +287,9 @@ export default function CoreShowcase() {
                 '&::-webkit-scrollbar': {
                   display: 'none',
                 },
+                '& code[class*="language-"]': {
+                  fontSize: 'inherit',
+                },
               },
             }}
           >

docs/src/components/home/MaterialDesignComponents.tsx

@@ -258,12 +258,12 @@ function buildTheme(theme: Theme): ThemeOptions {
           },
           iconSizeSmall: {
             '& > *:nth-of-type(1)': {
-              fontSize: 14,
+              fontSize: '0.875rem',
             },
           },
           iconSizeMedium: {
             '& > *:nth-of-type(1)': {
-              fontSize: 16,
+              fontSize: '1rem',
             },
           },
         },
@@ -299,7 +299,7 @@ function buildTheme(theme: Theme): ThemeOptions {
             paddingTop: 1,
             paddingBottom: 0,
             '& > *': {
-              fontSize: 18,
+              fontSize: '1.125rem',
             },
           },
         },
@@ -382,7 +382,7 @@ function buildTheme(theme: Theme): ThemeOptions {
           root: {
             padding: theme.spacing(1, 2),
             '& svg': {
-              fontSize: 18,
+              fontSize: '1.125rem',
               color:
                 theme.palette.mode === 'dark'
                   ? theme.palette.primary[500]

docs/src/components/home/References.tsx

@@ -32,11 +32,11 @@ const References = ({
           minHeight: 42, // a hack to reduce CLS (layout shift)
           mt: 4,
           mx: 'auto',
-          maxWidth: 450,
+          maxWidth: 400,
         }}
       >
-        From startups to Fortune 500s, the world's best product teams leverage MUI to build
-        their UIs.
+        From startups to Fortune 500s, the world's best product teams use MUI to build their
+        UIs.
       </Typography>
     </Container>
   );

docs/src/components/pricing/PricingTable.tsx

@@ -661,6 +661,7 @@ const RowCategory = (props: BoxProps) => (
     {...props}
     sx={{
       typography: 'caption',
+      display: 'block',
       fontWeight: 500,
       bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
       py: 1,

docs/src/components/showcase/NotificationCard.tsx

@@ -108,7 +108,7 @@ export default function NotificationCard() {
             variants: [
               {
                 props: { variant: 'notification' },
-                style: { color: '#fff', fontSize: 12, height: 18 },
+                style: { color: '#fff', fontSize: '0.75rem', height: 18 },
               },
             ],
           },

docs/src/components/showcase/ThemeChip.tsx

@@ -55,7 +55,7 @@ export default function ThemeChip() {
             styleOverrides: {
               label: {
                 marginBottom: '1px',
-                fontSize: 14,
+                fontSize: '0.875rem',
                 lineHeight: 1.5,
                 fontWeight: 600,
               },

docs/src/modules/branding/CommunitySayCard.tsx

@@ -60,9 +60,9 @@ export default function CommunitySayCard(props: CommunitySayCardProps) {
         >
           <img loading="lazy" src={avatar} width="48" height="48" alt={`${name} avatar`} />
         </Avatar>
-        <Box sx={{ fontSize: 16, lineHeight: '24px' }}>
+        <Box sx={{ fontSize: '1rem', lineHeight: '24px' }}>
           <Typography sx={{ fontWeight: 'bold' }}>{name}</Typography>
-          <Typography sx={{ fontSize: 16 }}>{id}</Typography>
+          <Typography sx={{ fontSize: '1rem' }}>{id}</Typography>
         </Box>
       </Box>
     </Box>

docs/src/modules/brandingTheme.ts

@@ -1,5 +1,5 @@
-import { deepmerge } from '@material-ui/utils';
 import { createTheme, ThemeOptions, Theme } from '@material-ui/core/styles';
+import { deepmerge } from '@material-ui/utils';
 
 declare module '@material-ui/core/styles/createPalette' {
   interface ColorRange {
@@ -68,7 +68,7 @@ const blue = {
   800: '#004C99',
   900: '#003A75',
 };
-const blueDark = {
+export const blueDark = {
   50: '#E2EDF8',
   100: '#CEE0F3',
   200: '#91B9E3',
@@ -404,6 +404,8 @@ export function getThemedComponents(theme: Theme) {
       MuiPaper: {
         styleOverrides: {
           root: {
+            backgroundColor:
+              theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff',
             '&[href]': {
               textDecorationLine: 'none',
             },
@@ -444,7 +446,7 @@ export function getThemedComponents(theme: Theme) {
         styleOverrides: {
           root: {
             backgroundColor:
-              theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] : '#fff',
+              theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff',
           },
         },
       },
@@ -465,7 +467,7 @@ export function getThemedComponents(theme: Theme) {
               backgroundColor:
                 theme.palette.mode === 'dark'
                   ? theme.palette.primary[800]
-                  : theme.palette.primaryDark[50],
+                  : theme.palette.primary[50],
             },
           },
         },

docs/src/modules/components/AppContainer.js

@@ -4,16 +4,16 @@ import Container from '@material-ui/core/Container';
 
 const StyledContainer = styled(Container)(({ theme }) => {
   return {
-    paddingTop: 80 + 16,
+    paddingTop: 80 + 20,
     [theme.breakpoints.up('md')]: {
       // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
-      // 120ch ≈ 960px (theme.breakpoints.values.md) using 16px Roboto
+      // 94ch ≈ 902px (theme.breakpoints.values.md) using 16px IBM Plex Sans
       // TODO Does it make sense to create breakpoints based on `ch`?
-      maxWidth: '120ch',
+      maxWidth: '94ch',
     },
     [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing(6),
-      paddingRight: theme.spacing(6),
+      paddingLeft: theme.spacing(8),
+      paddingRight: theme.spacing(8),
     },
   };
 });

docs/src/modules/components/AppFrame.js

@@ -150,6 +150,7 @@ const GrowingDiv = styled('div')({
 const LanguageSpan = styled('span')(({ theme }) => {
   return {
     display: 'none',
+    fontWeight: theme.typography.fontWeightMedium,
     [theme.breakpoints.up('md')]: {
       display: 'block',
     },
@@ -252,6 +253,7 @@ function AppFrame(props) {
           </NavIconButton>
           <GrowingDiv />
           <Stack direction="row" gap={2.5}>
+            <DeferredAppSearch />
             <Tooltip title={t('appFrame.changeLanguage')} enterDelay={300}>
               <Button {...languageButtonProps} sx={{ display: { xs: 'none', md: 'flex' } }}>
                 <LanguageSpan sx={{ display: { xs: 'none', md: 'block' } }}>
@@ -314,7 +316,6 @@ function AppFrame(props) {
                 </MenuItem>
               </Menu>
             </NoSsr>
-            <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>
               <IconButton
                 component="a"

docs/src/modules/components/AppLayoutDocs.js

@@ -13,7 +13,7 @@ import AdManager from 'docs/src/modules/components/AdManager';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
 
-const TOC_WIDTH = 175;
+const TOC_WIDTH = 210;
 const NAV_WIDTH = 240;
 
 const Main = styled('main', {
@@ -50,13 +50,20 @@ const StyledAppContainer = styled(AppContainer, {
           width: `calc(100% - ${TOC_WIDTH}px)`,
         },
       }),
+      ...(!disableToc && {
+        [theme.breakpoints.up('lg')]: {
+          paddingLeft: '60px',
+          paddingRight: '60px',
+        },
+      }),
     }),
   };
 });
 
 const ActionsDiv = styled('div')({
   position: 'absolute',
-  right: 16,
+  right: 20,
+  top: 120,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-end',

docs/src/modules/components/AppLayoutDocsFooter.js

@@ -40,15 +40,18 @@ const PaginationDiv = styled('div')(({ theme }) => {
 const PageLinkButton = styled(Button)(({ theme }) => {
   return {
     textTransform: 'none',
-    fontWeight: theme.typography.fontWeightRegular,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[500],
   };
 });
 
 const FeedbackGrid = styled(Grid)(({ theme }) => {
   return {
     width: 'auto',
+    color: theme.palette.text.secondary,
     [theme.breakpoints.down('sm')]: {
       order: 3,
+      marginTop: 40,
       width: '100%',
     },
   };
@@ -253,7 +256,7 @@ export default function AppLayoutDocsFooter() {
                   component={Link}
                   noLinkStyle
                   href={prevPage.pathname}
-                  size="large"
+                  size="medium"
                   startIcon={<ChevronLeftIcon />}
                 >
                   {pageToTitleI18n(prevPage, t)}
@@ -272,19 +275,19 @@ export default function AppLayoutDocsFooter() {
                   align="center"
                   component="div"
                   id="feedback-message"
-                  variant="subtitle1"
+                  variant="body2"
                 >
                   {t('feedbackMessage')}
                 </FeedbackMessage>
                 <div>
                   <Tooltip title={t('feedbackYes')}>
                     <IconButton onClick={handleClickThumb(1)} aria-pressed={rating === 1}>
-                      <ThumbUpIcon color={rating === 1 ? 'primary' : undefined} />
+                      <ThumbUpIcon fontSize="small" color={rating === 1 ? 'primary' : undefined} />
                     </IconButton>
                   </Tooltip>
                   <Tooltip title={t('feedbackNo')}>
                     <IconButton onClick={handleClickThumb(0)} aria-pressed={rating === 0}>
-                      <ThumbDownIcon color={rating === 0 ? 'error' : undefined} />
+                      <ThumbDownIcon fontSize="small" color={rating === 0 ? 'error' : undefined} />
                     </IconButton>
                   </Tooltip>
                 </div>
@@ -294,7 +297,7 @@ export default function AppLayoutDocsFooter() {
                   component={Link}
                   noLinkStyle
                   href={nextPage.pathname}
-                  size="large"
+                  size="medium"
                   endIcon={<ChevronRightIcon />}
                 >
                   {pageToTitleI18n(nextPage, t)}