diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 3779c0aa5d3eea..2c9509a18e098d 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -110,7 +110,7 @@ export default class MyDocument extends Document { // use https://cssminifier.com/ to minify // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ - __html: `@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/IBMPlexMono-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexMono-Regular.woff) format('woff'),url(/static/fonts/IBMPlexMono-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/IBMPlexMono-SemiBold.woff2) format('woff2'),url(/static/fonts/IBMPlexMono-SemiBold.woff) format('woff'),url(/static/fonts/IBMPlexMono-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}`, + __html: `@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}`, }} /> diff --git a/docs/public/static/fonts/IBMPlexMono-Regular.ttf b/docs/public/static/fonts/IBMPlexMono-Regular.ttf deleted file mode 100644 index 90325c80bdb509..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-Regular.ttf and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexMono-Regular.woff b/docs/public/static/fonts/IBMPlexMono-Regular.woff deleted file mode 100644 index a3d3f8cd8f242c..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-Regular.woff and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexMono-Regular.woff2 b/docs/public/static/fonts/IBMPlexMono-Regular.woff2 deleted file mode 100644 index e6853af25602ff..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-Regular.woff2 and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexMono-SemiBold.ttf b/docs/public/static/fonts/IBMPlexMono-SemiBold.ttf deleted file mode 100644 index dd0817417e9f70..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-SemiBold.ttf and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexMono-SemiBold.woff b/docs/public/static/fonts/IBMPlexMono-SemiBold.woff deleted file mode 100644 index 498fd21524b434..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-SemiBold.woff and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexMono-SemiBold.woff2 b/docs/public/static/fonts/IBMPlexMono-SemiBold.woff2 deleted file mode 100644 index 7d272221ee4dac..00000000000000 Binary files a/docs/public/static/fonts/IBMPlexMono-SemiBold.woff2 and /dev/null differ diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css index 230c99474da750..0f7f8fc89fc2f0 100644 --- a/docs/public/static/styles/prism-okaidia.css +++ b/docs/public/static/styles/prism-okaidia.css @@ -6,8 +6,14 @@ * @author ocodia */ -code[class*="language-"], -pre[class*="language-"] { +/* inline code */ +code { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +code[class*="language-"] { color: #f8f8f2; background: none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); @@ -30,26 +36,6 @@ pre[class*="language-"] { hyphens: none; } -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #272822; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - .token.comment, .token.prolog, .token.doctype, @@ -126,8 +112,7 @@ pre[class*="language-"] { /* Overrides to reach AA, copied from https://reactjs.org */ -code[class*="language-"], -pre[class*="language-"] { +code[class*="language-"] { text-shadow: none; } diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx index 0a8e071477f84f..1d48e627a46699 100644 --- a/docs/src/components/markdown/MarkdownElement.tsx +++ b/docs/src/components/markdown/MarkdownElement.tsx @@ -8,13 +8,7 @@ import { const Root = styled('div')(({ theme }) => ({ ...theme.typography.caption, - fontWeight: 500, color: theme.palette.text.primary, - // wordBreak: 'break-word', - // '& .anchor-link': { - // marginTop: -96, // Offset for the anchor. - // position: 'absolute', - // }, '& pre': { backgroundColor: theme.palette.primaryDark[800], direction: 'ltr', @@ -26,198 +20,13 @@ const Root = styled('div')(({ theme }) => ({ maxWidth: 'calc(100vw - 32px - 16px)', }, }, - // // inline code - // '& code': { - // direction: 'ltr', - // lineHeight: 1.4, - // display: 'inline-block', - // fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', - // WebkitFontSmoothing: 'subpixel-antialiased', - // padding: '0 3px', - // 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, - // }, '& code[class*="language-"]': { // Avoid layout jump after hydration (style injected by prism) ...theme.typography.caption, - fontWeight: 500, fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, WebkitFontSmoothing: 'subpixel-antialiased', }, - // // code blocks - // '& pre code': { - // fontSize: '.9em', - // }, - // '& .token.operator': { - // background: 'transparent', - // }, - // '& h1': { - // ...theme.typography.h3, - // fontSize: 40, - // margin: '16px 0', - // }, - // '& .description': { - // ...theme.typography.h5, - // margin: '0 0 40px', - // }, - // '& h2': { - // ...theme.typography.h4, - // fontSize: 30, - // margin: '40px 0 16px', - // }, - // '& h3': { - // ...theme.typography.h5, - // margin: '40px 0 16px', - // }, - // '& h4': { - // ...theme.typography.h6, - // margin: '32px 0 16px', - // }, - // '& h5': { - // ...theme.typography.subtitle2, - // margin: '32px 0 16px', - // }, - // '& p, & ul, & ol': { - // marginTop: 0, - // marginBottom: 16, - // }, - // '& ul': { - // paddingLeft: 30, - // }, - // '& h1, & h2, & h3, & h4': { - // '& code': { - // fontSize: 'inherit', - // lineHeight: 'inherit', - // // Remove scroll on small screens. - // wordBreak: 'break-all', - // }, - // '& .anchor-link-style': { - // // To prevent the link to get the focus. - // display: 'none', - // }, - // '& a:not(.anchor-link-style):hover': { - // color: 'currentColor', - // borderBottom: '1px solid currentColor', - // textDecoration: 'none', - // }, - // '&:hover .anchor-link-style': { - // display: 'inline-block', - // padding: '0 8px', - // color: theme.palette.text.secondary, - // '&:hover': { - // color: theme.palette.text.primary, - // }, - // '& svg': { - // width: '0.7em', - // height: '0.7em', - // fill: 'currentColor', - // }, - // }, - // }, - // '& table': { - // // Trade display table for scroll overflow - // display: 'block', - // wordBreak: 'normal', - // width: '100%', - // overflowX: 'auto', - // WebkitOverflowScrolling: 'touch', // iOS momentum scrolling. - // borderCollapse: 'collapse', - // marginBottom: '16px', - // borderSpacing: 0, - // overflow: 'hidden', - // '& .prop-name': { - // fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', - // }, - // '& .required': { - // color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5', - // }, - // '& .optional': { - // color: theme.palette.type === 'light' ? '#080065' : '#a5b3ff', - // }, - // '& .prop-type': { - // fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', - // color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec', - // }, - // '& .prop-default': { - // fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', - // borderBottom: `1px dotted ${theme.palette.divider}`, - // }, - // }, - // '& td': { - // ...theme.typography.body2, - // borderBottom: `1px solid ${theme.palette.divider}`, - // padding: 16, - // color: theme.palette.text.primary, - // }, - // '& td code': { - // lineHeight: 1.6, - // }, - // '& th': { - // lineHeight: theme.typography.pxToRem(24), - // fontWeight: theme.typography.fontWeightMedium, - // color: theme.palette.text.primary, - // whiteSpace: 'pre', - // borderBottom: `1px solid ${theme.palette.divider}`, - // padding: 16, - // }, - // '& blockquote': { - // borderLeft: '5px solid #ffe564', - // backgroundColor: 'rgba(255,229,100,0.2)', - // padding: '4px 24px', - // margin: '24px 0', - // '& p': { - // marginTop: '16px', - // }, - // }, - // '& a, & a code': { - // // Style taken from the Link component - // color: theme.palette.primary.main, - // textDecoration: 'underline', - // textDecorationColor: alpha(theme.palette.primary.main, 0.4), - // '&:hover': { - // textDecorationColor: 'inherit', - // }, - // }, - // '& a code': { - // color: - // theme.palette.mode === 'dark' - // ? theme.palette.primary.main - // : darken(theme.palette.primary.main, 0.04), - // }, - // '& img, video': { - // maxWidth: '100%', - // }, - // '& img': { - // // Avoid layout jump - // display: 'inline-block', - // }, - // '& hr': { - // height: 1, - // margin: theme.spacing(6, 0), - // border: 0, - // flexShrink: 0, - // backgroundColor: theme.palette.divider, - // }, - // '& kbd.key': { - // // Style taken from GitHub - // padding: '4px 5px', - // display: 'inline-block', - // whiteSpace: 'nowrap', - // margin: '0 1px', - // font: '11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace', - // lineHeight: '10px', - // color: theme.palette.text.primary, - // verticalAlign: 'middle', - // backgroundColor: theme.palette.mode === 'dark' ? 'transparent' : '#fafbfc', - // border: `1px solid ${theme.palette.mode === 'dark' ? '#6e7681' : '#d1d5da'}`, - // borderRadius: 6, - // boxShadow: `inset 0 -1px 0 ${theme.palette.mode === 'dark' ? '#6e7681' : '#d1d5da'}`, - // }, })); type MarkdownElementProps = { diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 9425f8179ddf76..b4285a7c12d391 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -189,7 +189,14 @@ export const getDesignTokens = (mode: 'light' | 'dark') => spacing: 10, typography: { fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), - fontFamilyCode: ['"IBM Plex Mono"', ...systemFont].join(','), + fontFamilyCode: [ + 'Consolas', + 'Menlo', + 'Monaco', + 'Andale Mono', + 'Ubuntu Mono', + 'monospace', + ].join(','), fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','), fontFamilySystem: systemFont.join(','), fontWeightExtraBold: 800, @@ -299,7 +306,10 @@ export function getThemedComponents(theme: Theme) { theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[50], + ...theme.typography.body2, fontFamily: theme.typography.fontFamilyCode, + fontWeight: 600, + WebkitFontSmoothing: 'subpixel-antialiased', '&:hover, &.Mui-focusVisible': { borderColor: theme.palette.primary.main, backgroundColor: @@ -322,14 +332,6 @@ export function getThemedComponents(theme: Theme) { }, }, }, - { - props: { variant: 'code', size: 'large' }, - style: { - ...theme.typography.body2, - fontFamily: theme.typography.fontFamilyCode, - fontWeight: theme.typography.fontWeightBold, - }, - }, ], }, MuiContainer: { diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index b23303f9db3db2..71b4b86904a9fc 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -79,6 +79,7 @@ const Root = styled('div')(({ theme }) => ({ marginRight: 0, }, })); + const DemoRoot = styled('div', { shouldForwardProp: (prop) => prop !== 'hiddenToolbar' && prop !== 'bg', })(({ theme, hiddenToolbar, bg }) => ({ @@ -119,6 +120,7 @@ const DemoRoot = styled('div', { paddingTop: theme.spacing(2), }), })); + const Code = styled(HighlightedCode)(({ theme }) => ({ padding: 0, marginBottom: theme.spacing(1), @@ -127,16 +129,16 @@ const Code = styled(HighlightedCode)(({ theme }) => ({ marginTop: theme.spacing(0), }, '& pre': { - overflow: 'auto', - lineHeight: 1.5, margin: '0 auto', maxHeight: 'min(68vh, 1000px)', }, })); + const AnchorLink = styled('div')({ marginTop: -64, // height of toolbar position: 'absolute', }); + const InitialFocus = styled(IconButton)(({ theme }) => ({ position: 'absolute', top: 0, diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 17fa35625dd9cb..e733c6bfc81d27 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -28,35 +28,26 @@ const Root = styled('div')(({ theme }) => ({ maxWidth: 'calc(100vw - 32px - 16px)', }, }, - // inline code - '& code': { + '& code, & code[class*="language-"]': { direction: 'ltr', - lineHeight: 1.4, - letterSpacing: 0.2, display: 'inline-block', - fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', - fontWeight: 500, + ...theme.typography.body2, + fontSize: theme.typography.pxToRem(13), + fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, WebkitFontSmoothing: 'subpixel-antialiased', padding: '0 5px', + borderRadius: 5, + }, + // inline code + '& code': { color: theme.palette.text.primary, backgroundColor: alpha(theme.palette.primary.light, 0.15), - fontSize: theme.typography.pxToRem(13), - borderRadius: 5, }, + // block code '& code[class*="language-"]': { - backgroundColor: blueDark[800], color: '#fff', - // Avoid layout jump after hydration (style injected by prism) - lineHeight: 1.5, - }, - // code blocks - '& pre code': { - fontSize: theme.typography.pxToRem(13), - fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', - fontWeight: 500, - }, - '& .token.operator': { - background: 'transparent', + backgroundColor: blueDark[800], }, '& h1': { ...theme.typography.h3, @@ -141,7 +132,7 @@ const Root = styled('div')(({ theme }) => ({ }, '& h2 code': { fontSize: theme.typography.pxToRem(27), - fontWeight: 'bold', + fontWeight: theme.fontWeightBold, color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : blueDark[700], }, '& table': { @@ -154,8 +145,11 @@ const Root = styled('div')(({ theme }) => ({ borderCollapse: 'collapse', marginBottom: '20px', borderSpacing: 0, - '& .prop-name': { - fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', + '& .prop-name, & .prop-type, & .prop-default': { + fontWeight: 400, + fontFamily: theme.typography.fontFamilyCode, + WebkitFontSmoothing: 'subpixel-antialiased', + fontSize: theme.typography.pxToRem(13), }, '& .required': { color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5', @@ -164,11 +158,9 @@ const Root = styled('div')(({ theme }) => ({ color: theme.palette.type === 'light' ? '#080065' : '#a5b3ff', }, '& .prop-type': { - fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec', }, '& .prop-default': { - fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', borderBottom: `1px dotted ${theme.palette.divider}`, }, }, diff --git a/test/regressions/index.js b/test/regressions/index.js index c725586b21d78a..8652ec4ad4839d 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -111,6 +111,7 @@ const blacklist = [ 'docs-components-snackbars/SimpleSnackbar.png', // Needs interaction 'docs-components-snackbars/TransitionsSnackbar.png', // Needs interaction 'docs-components-speed-dial', // Needs interaction + 'docs-components-stack/InteractiveStack.png', // Redundant 'docs-components-steppers/HorizontalNonLinearStepper.png', // Redundant 'docs-components-steppers/SwipeableTextMobileStepper.png', // Flaky image loading 'docs-components-steppers/TextMobileStepper.png', // Flaky image loading