[docs] Redesign on markdown page

docs/src/modules/components/AppTableOfContents.js

@@ -7,18 +7,19 @@ import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { fontWeight } from '@material-ui/system';
 
 const Nav = styled('nav')(({ theme }) => {
   return {
     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 +30,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 +49,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 +202,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/DemoSandboxed.js

@@ -12,6 +12,7 @@ import { useTheme, styled, createTheme, ThemeProvider } from '@material-ui/core/
 import rtl from 'jss-rtl';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
+import darkScrollbar from '@material-ui/core/darkScrollbar';
 
 function FramedDemo(props) {
   const { children, document } = props;
@@ -119,7 +120,22 @@ DemoFrame.propTypes = {
 
 // Use the default MUI theme for the demos
 const theme = createTheme();
-const darkModeTheme = createTheme({ palette: { mode: 'dark' } });
+const darkModeTheme = createTheme({
+  palette: { mode: 'dark' },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: darkScrollbar(),
+      },
+    },
+  },
+});
+
+const getTheme = (outerTheme) => {
+  const resultTheme = outerTheme?.palette?.mode === 'dark' ? darkModeTheme : theme;
+  resultTheme.direction = outerTheme?.direction;
+  return resultTheme;
+};
 
 /**
  * Isolates the demo component as best as possible. Additional props are spread
@@ -135,9 +151,7 @@ function DemoSandboxed(props) {
   return (
     <DemoErrorBoundary name={name} onResetDemoClick={onResetDemoClick} t={t}>
       <Sandbox {...sandboxProps}>
-        <ThemeProvider
-          theme={(outerTheme) => (outerTheme?.palette?.mode === 'dark' ? darkModeTheme : theme)}
-        >
+        <ThemeProvider theme={(outerTheme) => getTheme(outerTheme)}>
           <Component />
         </ThemeProvider>
       </Sandbox>

docs/src/modules/components/DemoToolbar.js

@@ -11,15 +11,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';
@@ -49,7 +49,7 @@ const Root = styled('div')(({ theme }) => ({
     flip: false,
     top: 0,
     right: theme.spacing(1),
-    height: theme.spacing(6),
+    height: theme.spacing(8),
   },
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -461,18 +461,18 @@ export default function DemoToolbar(props) {
             onChange={handleCodeLanguageClick}
           >
             <ToggleButton
-              sx={{ padding: '4px 9px' }}
+              sx={{ padding: '5px 10px', borderRadius: 0.5, borderColor: 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.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200]  }}
               value={CODE_VARIANTS.TS}
               disabled={!hasTSVariant}
               aria-label={t('showTSSource')}
@@ -481,7 +481,7 @@ export default function DemoToolbar(props) {
               data-ga-event-label={demoOptions.demo}
               {...getControlProps(1)}
             >
-              <TypeScriptIcon />
+              <TypeScriptIcon sx={{fontSize: 20}} />
             </ToggleButton>
           </ToggleButtonGroup>
         </Fade>
@@ -503,7 +503,7 @@ export default function DemoToolbar(props) {
               color={demoHovered ? 'primary' : 'default'}
               {...getControlProps(2)}
             >
-              <CodeIcon fontSize="small" />
+              <CodeRoundedIcon sx={{fontSize: 17, color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]}} />
             </IconButton>
           </DemoTooltip>
           {demoOptions.hideEditButton ? null : (
@@ -517,7 +517,7 @@ export default function DemoToolbar(props) {
                   onClick={handleCodeSandboxClick}
                   {...getControlProps(3)}
                 >
-                  <SvgIcon fontSize="small" viewBox="0 0 1024 1024">
+                  <SvgIcon sx={{fontSize: 17, color: 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>
@@ -531,7 +531,7 @@ export default function DemoToolbar(props) {
                   onClick={handleStackBlitzClick}
                   {...getControlProps(4)}
                 >
-                  <SvgIcon fontSize="small" viewBox="0 0 19 28">
+                  <SvgIcon sx={{fontSize: 17, color: 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>
@@ -547,7 +547,7 @@ export default function DemoToolbar(props) {
               onClick={handleCopyClick}
               {...getControlProps(5)}
             >
-              <FileCopyIcon fontSize="small" />
+              <ContentCopyRoundedIcon sx={{fontSize: 17, color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]}} />
             </IconButton>
           </DemoTooltip>
           <DemoTooltip title={t('resetFocus')} placement="bottom">
@@ -559,7 +559,7 @@ export default function DemoToolbar(props) {
               onClick={handleResetFocusClick}
               {...getControlProps(6)}
             >
-              <ResetFocusIcon fontSize="small" />
+              <ResetFocusIcon sx={{fontSize: 17, color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]}} />
             </IconButton>
           </DemoTooltip>
           <DemoTooltip title={t('resetDemo')} placement="bottom">
@@ -572,7 +572,7 @@ export default function DemoToolbar(props) {
               onClick={onResetDemoClick}
               {...getControlProps(7)}
             >
-              <RefreshIcon fontSize="small" />
+              <RefreshRoundedIcon sx={{fontSize: 17, color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]}} />
             </IconButton>
           </DemoTooltip>
           <IconButton
@@ -583,7 +583,7 @@ export default function DemoToolbar(props) {
             aria-haspopup="true"
             {...getControlProps(8)}
           >
-            <MoreVertIcon fontSize="small" />
+            <MoreVertIcon sx={{fontSize: 17, color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]}} />
           </IconButton>
           <Menu
             id="demo-menu-more"

docs/src/modules/components/MarkdownElement.js

@@ -12,11 +12,13 @@ const Root = styled('div')(({ theme }) => ({
     position: 'absolute',
   },
   '& pre': {
-    margin: theme.spacing(3, 'auto'),
+    margin: theme.spacing(2, 'auto'),
     padding: theme.spacing(2),
-    backgroundColor: '#272c34',
+    backgroundColor: "#001E3C",
     direction: 'ltr',
     borderRadius: theme.shape.borderRadius,
+    border: '1px solid',
+    borderColor: "#132F4C",
     overflow: 'auto',
     WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
     maxWidth: 'calc(100vw - 32px)',
@@ -31,17 +33,14 @@ const Root = styled('div')(({ theme }) => ({
     display: 'inline-block',
     fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
     WebkitFontSmoothing: 'subpixel-antialiased',
-    padding: '0 3px',
+    padding: '0 5px',
     color: theme.palette.text.primary,
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? 'rgba(255, 229, 100, 0.2)'
-        : alpha(theme.palette.primary.main, 0.08),
-    fontSize: '.85em',
-    borderRadius: 2,
+    backgroundColor: alpha(theme.palette.primary.light, 0.15),
+    fontSize: '.8125em',
+    borderRadius: theme.shape.borderRadius,
   },
   '& code[class*="language-"]': {
-    backgroundColor: '#272c34',
+    backgroundColor: "#001E3C",
     color: '#fff',
     // Avoid layout jump after hydration (style injected by prism)
     lineHeight: 1.5,
@@ -56,32 +55,42 @@ const Root = styled('div')(({ theme }) => ({
   '& h1': {
     ...theme.typography.h3,
     fontSize: 40,
+    fontFamily: ['"PlusJakartaSans"'].join(','),
     margin: '16px 0',
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.primary[900],
+    fontWeight: 800,
   },
   '& .description': {
     ...theme.typography.h5,
     margin: '0 0 40px',
   },
   '& h2': {
-    ...theme.typography.h4,
+    ...theme.typography.h5,
     fontSize: 30,
-    margin: '40px 0 16px',
+    margin: '40px 0 10px',
+    fontWeight: 500,
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[900],
   },
   '& h3': {
-    ...theme.typography.h5,
-    margin: '40px 0 16px',
+    ...theme.typography.h6,
+    margin: '20px 0 10px',
+    fontWeight: 500,
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[900],
   },
   '& h4': {
     ...theme.typography.h6,
     margin: '32px 0 16px',
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[900],
   },
   '& h5': {
     ...theme.typography.subtitle2,
     margin: '32px 0 16px',
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[900],
   },
   '& p, & ul, & ol': {
     marginTop: 0,
     marginBottom: 16,
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[900],
   },
   '& ul': {
     paddingLeft: 30,
@@ -162,12 +171,13 @@ const Root = styled('div')(({ theme }) => ({
     padding: 16,
   },
   '& blockquote': {
-    borderLeft: '5px solid #ffe564',
-    backgroundColor: 'rgba(255,229,100,0.2)',
-    padding: '4px 24px',
-    margin: '24px 0',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.mode === 'dark' ? alpha(theme.palette.warning.main, 0.2) : theme.palette.warning[100],
+    padding: '10px 20px',
+    margin: '20px 0',
     '& p': {
       marginTop: '16px',
+      color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900],
     },
   },
   '& a, & a code': {
@@ -182,7 +192,7 @@ const Root = styled('div')(({ theme }) => ({
   '& a code': {
     color:
       theme.palette.mode === 'dark'
-        ? theme.palette.primary.main
+        ? theme.palette.primary.light
         : darken(theme.palette.primary.main, 0.04),
   },
   '& img, video': {

docs/src/modules/components/ThemeContext.js

@@ -220,7 +220,14 @@ export function ThemeProvider(props) {
         components: {
           MuiCssBaseline: {
             styleOverrides: {
-              body: paletteMode === 'dark' ? darkScrollbar() : null,
+              body:
+                paletteMode === 'dark'
+                  ? darkScrollbar({
+                      track: brandingDesignTokens.palette.primaryDark[900],
+                      thumb: brandingDesignTokens.palette.primaryDark[700],
+                      active: brandingDesignTokens.palette.primaryDark[200],
+                    })
+                  : null,
             },
           },
         },