[docs] Redesign on markdown page

docs/src/modules/brandingTheme.ts

@@ -110,7 +110,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
   ({
     palette: {
       primary: blue,
-      divider: mode === 'dark' ? blueDark[400] : grey[200],
+      divider: mode === 'dark' ? blueDark[700] : grey[200],
       primaryDark: blueDark,
       mode,
       ...(mode === 'dark' && {

docs/src/modules/components/AppTableOfContents.js

@@ -13,12 +13,12 @@ const Nav = styled('nav')(({ theme }) => {
     top: 70,
     // Fix IE11 position sticky issue.
     marginTop: 70,
-    width: 175,
+    width: 200,
     flexShrink: 0,
     position: 'sticky',
     height: 'calc(100vh - 70px)',
     overflowY: 'auto',
-    padding: theme.spacing(2, 2, 2, 0),
+    padding: theme.spacing(2, 5, 2, 0),
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'block',
@@ -29,7 +29,10 @@ const Nav = styled('nav')(({ theme }) => {
 const NavLabel = styled(Typography)(({ theme }) => {
   return {
     marginTop: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
+    paddingLeft: theme.spacing(1.5),
+    fontSize: '.75rem',
+    fontWeight: 600,
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[500],
   };
 });
 
@@ -45,17 +48,22 @@ const NavItem = styled(Link, {
   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],
   };
 
   return {
     fontSize: '.8125rem',
-    padding: theme.spacing(0.5, 0, 0.5, secondary ? 2.5 : '5px'),
-    borderLeft: `3px solid transparent`,
+    padding: theme.spacing(0.5, 0, 1, secondary ? 3 : '10px'),
+    borderLeft: `2px solid transparent`,
     boxSizing: 'border-box',
     '&:hover': {
       borderLeftColor:
-        theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
+        theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+      color: theme.palette.grey[700],
     },
+    ...(!active && {
+      color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[900],
+    }),
     // TODO: We probably want `aria-current="location"` instead.
     // If so, are we sure "current" and "active" states should have the same styles?
     ...(active && activeStyles),
@@ -193,7 +201,6 @@ export default function AppTableOfContents(props) {
   const itemLink = (item, secondary) => (
     <NavItem
       display="block"
-      color={activeState === item.hash ? 'textPrimary' : 'textSecondary'}
       href={`${activePage.linkProps?.as ?? activePage.pathname}#${item.hash}`}
       underline="none"
       onClick={handleClick(item.hash)}

docs/src/modules/components/Demo.js

@@ -76,7 +76,6 @@ const Root = styled('div')(({ theme }) => ({
   marginLeft: theme.spacing(-2),
   marginRight: theme.spacing(-2),
   [theme.breakpoints.up('sm')]: {
-    padding: theme.spacing(0, 1),
     marginLeft: 0,
     marginRight: 0,
   },
@@ -90,7 +89,18 @@ const DemoRoot = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   [theme.breakpoints.up('sm')]: {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 10,
+    ...(bg === 'outlined' && {
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+    }),
+    /* Make no difference between the demo and the markdown. */
+    ...(bg === 'inline' && {
+      padding: theme.spacing(3),
+    }),
+    ...(hiddenToolbar && {
+      paddingTop: theme.spacing(3),
+    }),
   },
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
@@ -99,28 +109,14 @@ const DemoRoot = styled('div', {
     border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    [theme.breakpoints.up('sm')]: {
-      borderLeftWidth: 1,
-      borderRightWidth: 1,
-    },
   }),
   /* Prepare the background to display an inner elevation. */
   ...(bg === true && {
     padding: theme.spacing(3),
     backgroundColor: theme.palette.mode === 'dark' ? '#333' : theme.palette.grey[100],
   }),
-  /* Make no difference between the demo and the markdown. */
-  ...(bg === 'inline' && {
-    // Maintain alignment with the markdown text
-    [theme.breakpoints.down('sm')]: {
-      padding: theme.spacing(3),
-    },
-  }),
   ...(hiddenToolbar && {
     paddingTop: theme.spacing(2),
-    [theme.breakpoints.up('sm')]: {
-      paddingTop: theme.spacing(3),
-    },
   }),
 }));
 const Code = styled(HighlightedCode)(({ theme }) => ({

docs/src/modules/components/DemoToolbar.js

@@ -10,15 +10,15 @@ import Fade from '@material-ui/core/Fade';
 import ToggleButton from '@material-ui/core/ToggleButton';
 import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@material-ui/docs';
-import CodeIcon from '@material-ui/icons/Code';
+import CodeRoundedIcon from '@material-ui/icons/CodeRounded';
 import SvgIcon from '@material-ui/core/SvgIcon';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
+import ContentCopyRoundedIcon from '@material-ui/icons/ContentCopyRounded';
 import Snackbar from '@material-ui/core/Snackbar';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Tooltip from '@material-ui/core/Tooltip';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import RefreshRoundedIcon from '@material-ui/icons/RefreshRounded';
 import ResetFocusIcon from '@material-ui/icons/CenterFocusWeak';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
 import { getCookie } from 'docs/src/modules/utils/helpers';
@@ -47,13 +47,13 @@ const Root = styled('div')(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
     display: 'flex',
     top: 0,
+    height: theme.spacing(8),
     ...(theme.direction === 'rtl' && {
       left: theme.spacing(1),
     }),
     ...(theme.direction !== 'rtl' && {
       right: theme.spacing(1),
     }),
-    height: theme.spacing(6),
   },
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -477,18 +477,32 @@ export default function DemoToolbar(props) {
             onChange={handleCodeLanguageClick}
           >
             <ToggleButton
-              sx={{ padding: '4px 9px' }}
+              sx={{
+                padding: '5px 10px',
+                borderRadius: 0.5,
+                borderColor: (theme) =>
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.primaryDark[700]
+                    : theme.palette.grey[200],
+              }}
               value={CODE_VARIANTS.JS}
               aria-label={t('showJSSource')}
               data-ga-event-category="demo"
               data-ga-event-action="source-js"
               data-ga-event-label={demoOptions.demo}
               {...getControlProps(0)}
             >
-              <JavaScriptIcon />
+              <JavaScriptIcon sx={{ fontSize: 20 }} />
             </ToggleButton>
             <ToggleButton
-              sx={{ padding: '4px 9px' }}
+              sx={{
+                padding: '5px 10px',
+                borderRadius: 0.5,
+                borderColor: (theme) =>
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.primaryDark[700]
+                    : theme.palette.grey[200],
+              }}
               value={CODE_VARIANTS.TS}
               disabled={!hasTSVariant}
               aria-label={t('showTSSource')}
@@ -497,7 +511,7 @@ export default function DemoToolbar(props) {
               data-ga-event-label={demoOptions.demo}
               {...getControlProps(1)}
             >
-              <TypeScriptIcon />
+              <TypeScriptIcon sx={{ fontSize: 20 }} />
             </ToggleButton>
           </ToggleButtonGroup>
         </Fade>
@@ -518,7 +532,15 @@ export default function DemoToolbar(props) {
               color={demoHovered ? 'primary' : 'default'}
               {...getControlProps(2)}
             >
-              <CodeIcon fontSize="small" />
+              <CodeRoundedIcon
+                sx={{
+                  fontSize: 17,
+                  color: (theme) =>
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.grey[500]
+                      : theme.palette.grey[800],
+                }}
+              />
             </IconButton>
           </ToggleCodeTooltip>
           {demoOptions.hideEditButton ? null : (
@@ -532,7 +554,16 @@ export default function DemoToolbar(props) {
                   onClick={handleCodeSandboxClick}
                   {...getControlProps(3)}
                 >
-                  <SvgIcon fontSize="small" viewBox="0 0 1024 1024">
+                  <SvgIcon
+                    sx={{
+                      fontSize: 17,
+                      color: (theme) =>
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.grey[500]
+                          : theme.palette.grey[800],
+                    }}
+                    viewBox="0 0 1024 1024"
+                  >
                     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
                   </SvgIcon>
                 </IconButton>
@@ -546,7 +577,16 @@ export default function DemoToolbar(props) {
                   onClick={handleStackBlitzClick}
                   {...getControlProps(4)}
                 >
-                  <SvgIcon fontSize="small" viewBox="0 0 19 28">
+                  <SvgIcon
+                    sx={{
+                      fontSize: 17,
+                      color: (theme) =>
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.grey[500]
+                          : theme.palette.grey[800],
+                    }}
+                    viewBox="0 0 19 28"
+                  >
                     <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
                   </SvgIcon>
                 </IconButton>
@@ -562,7 +602,15 @@ export default function DemoToolbar(props) {
               onClick={handleCopyClick}
               {...getControlProps(5)}
             >
-              <FileCopyIcon fontSize="small" />
+              <ContentCopyRoundedIcon
+                sx={{
+                  fontSize: 17,
+                  color: (theme) =>
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.grey[500]
+                      : theme.palette.grey[800],
+                }}
+              />
             </IconButton>
           </DemoTooltip>
           <DemoTooltip title={t('resetFocus')} placement="bottom">
@@ -574,7 +622,15 @@ export default function DemoToolbar(props) {
               onClick={handleResetFocusClick}
               {...getControlProps(6)}
             >
-              <ResetFocusIcon fontSize="small" />
+              <ResetFocusIcon
+                sx={{
+                  fontSize: 17,
+                  color: (theme) =>
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.grey[500]
+                      : theme.palette.grey[800],
+                }}
+              />
             </IconButton>
           </DemoTooltip>
           <DemoTooltip title={t('resetDemo')} placement="bottom">
@@ -587,7 +643,15 @@ export default function DemoToolbar(props) {
               onClick={onResetDemoClick}
               {...getControlProps(7)}
             >
-              <RefreshIcon fontSize="small" />
+              <RefreshRoundedIcon
+                sx={{
+                  fontSize: 17,
+                  color: (theme) =>
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.grey[500]
+                      : theme.palette.grey[800],
+                }}
+              />
             </IconButton>
           </DemoTooltip>
           <IconButton
@@ -598,7 +662,13 @@ export default function DemoToolbar(props) {
             aria-haspopup="true"
             {...getControlProps(8)}
           >
-            <MoreVertIcon fontSize="small" />
+            <MoreVertIcon
+              sx={{
+                fontSize: 17,
+                color: (theme) =>
+                  theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800],
+              }}
+            />
           </IconButton>
         </div>
       </Root>