Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Uniformize the code's font family #28582

Merged
merged 8 commits into from
Sep 28, 2021
Merged

[docs] Uniformize the code's font family #28582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
93fa0db
[docs] Uniformize the code typography
oliviertassinari Sep 24, 2021
c3b69c1
ignore screenshot
oliviertassinari Sep 25, 2021
8b7f236
use body2 variant for inline code instead of caption
danilo-leal Sep 27, 2021
c7d5e30
use Consolas
danilo-leal Sep 27, 2021
1a55ae3
remove IBM Plex Mono import
danilo-leal Sep 27, 2021
c655e8c
delete IBM Plex Mono
danilo-leal Sep 27, 2021
726b9f9
Jun feedback, revert
oliviertassinari Sep 28, 2021
440266c
clarity
oliviertassinari Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
}}
/>
</Head>
Expand Down
Binary file removed docs/public/static/fonts/IBMPlexMono-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/fonts/IBMPlexMono-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/fonts/IBMPlexMono-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/fonts/IBMPlexMono-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/fonts/IBMPlexMono-SemiBold.woff
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/fonts/IBMPlexMono-SemiBold.woff2
View file
Open in desktop
Binary file not shown.
33 changes: 9 additions & 24 deletions docs/public/static/styles/prism-okaidia.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}

Expand Down
193 changes: 1 addition & 192 deletions docs/src/components/markdown/MarkdownElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 = {
Expand Down
20 changes: 11 additions & 9 deletions docs/src/modules/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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:
Expand All @@ -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: {
Expand Down
6 changes: 4 additions & 2 deletions docs/src/modules/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ const Root = styled('div')(({ theme }) => ({
marginRight: 0,
},
}));

const DemoRoot = styled('div', {
shouldForwardProp: (prop) => prop !== 'hiddenToolbar' && prop !== 'bg',
})(({ theme, hiddenToolbar, bg }) => ({
Expand Down Expand Up @@ -119,6 +120,7 @@ const DemoRoot = styled('div', {
paddingTop: theme.spacing(2),
}),
}));

const Code = styled(HighlightedCode)(({ theme }) => ({
padding: 0,
marginBottom: theme.spacing(1),
Expand All @@ -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,
Expand Down
Loading