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] Fix Safari code font size #34859

Merged
merged 1 commit into from
Oct 31, 2022
Merged

[docs] Fix Safari code font size #34859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
78 changes: 50 additions & 28 deletions docs/public/static/styles/prism-okaidia.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,92 @@
/**
* https://unpkg.com/prismjs/themes/prism-okaidia.css
*
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/

/* inline code */
code {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}

code[class*='language-'] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
code[class*='language-'],
pre[class*='language-'] {
Copy link
Member Author

@oliviertassinari oliviertassinari Oct 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have synced the top of this CSS file with https://unpkg.com/prismjs/themes/prism-okaidia.css. I have also commented what is not necessary.

/* color: #f8f8f2; */
/* background: none; */
/* text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
/* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */
/* font-size: 1em; */
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
/* -moz-tab-size: 4; */
/* -o-tab-size: 4; */
/* tab-size: 4; */

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Code blocks */
/*
pre[class*='language-'] {
padding: 1em;
margin: 0.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: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
*/

/*
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: #8292a2;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PrismJS/prism#2292

}
*/

.token.punctuation {
color: #f8f8f2;
}

.namespace {
.token.namespace {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PrismJS/prism#2161

opacity: 0.7;
}

/*
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
*/

/*
.token.boolean,
.token.number {
color: #ae81ff;
}
*/

.token.selector,
.token.attr-name,
Expand Down Expand Up @@ -110,25 +134,23 @@ code[class*='language-'] {
cursor: help;
}

/* Overrides to reach AA, copied from https://reactjs.org */

code[class*='language-'] {
text-shadow: none;
}

/**
* Overrides to reach AA, copied from https://reactjs.org, on top of the
* source from https://unpkg.com/prismjs/themes/prism-okaidia.css that are above.
*/
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: rgb(178, 178, 178);
color: #b2b2b2;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: rgb(252, 146, 158);
color: #fc929e;
}

.token.boolean,
Expand Down
3 changes: 0 additions & 3 deletions docs/src/components/home/AdvancedShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1733,9 +1733,6 @@ export default function DataTable() {
'&::-webkit-scrollbar': {
display: 'none',
},
'& code[class*="language-"]': {
fontSize: 'inherit',
},
},
}}
>
Expand Down
3 changes: 0 additions & 3 deletions docs/src/components/home/CoreShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,9 +240,6 @@ export default function CoreShowcase() {
'&::-webkit-scrollbar': {
display: 'none',
},
'& code[class*="language-"]': {
fontSize: 'inherit',
},
},
}}
>
Expand Down
6 changes: 5 additions & 1 deletion docs/src/components/markdown/MarkdownElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const Root = styled('div')(({ theme }) => ({
color: theme.palette.text.primary,
'& pre': {
backgroundColor: theme.palette.primaryDark[800],
color: '#f8f8f2', // fallback color until Prism's theme is loaded
direction: 'ltr',
overflow: 'auto',
margin: 0,
Expand All @@ -20,12 +21,15 @@ const Root = styled('div')(({ theme }) => ({
maxWidth: 'calc(100vw - 32px - 16px)',
},
},
'& code[class*="language-"]': {
'& code': {
// Avoid layout jump after hydration (style injected by prism)
...theme.typography.caption,
fontFamily: theme.typography.fontFamilyCode,
fontWeight: 400,
WebkitFontSmoothing: 'subpixel-antialiased',
// Reset for Safari
// https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
fontSize: '1em',
},
}));

Expand Down
32 changes: 15 additions & 17 deletions docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { alpha, darken, styled } from '@mui/material/styles';
import { blue, blueDark } from 'docs/src/modules/brandingTheme';
import { blue, blueDark, brandingDarkTheme } from 'docs/src/modules/brandingTheme';

const Root = styled('div')(({ theme }) => ({
...theme.typography.body1,
Expand All @@ -15,40 +15,38 @@ const Root = styled('div')(({ theme }) => ({
margin: theme.spacing(2, 'auto'),
padding: theme.spacing(2),
backgroundColor: blueDark[800],
color: '#f8f8f2', // fallback color until Prism's theme is loaded
colorScheme: 'dark',
direction: 'ltr',
borderRadius: theme.shape.borderRadius,
border: '1px solid',
borderColor: blueDark[700],
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
fontSize: theme.typography.pxToRem(13),
maxWidth: 'calc(100vw - 32px)',
maxHeight: '400px',
[theme.breakpoints.up('md')]: {
maxWidth: 'calc(100vw - 32px - 16px)',
},
},
'& code, & code[class*="language-"]': {
direction: 'ltr',
display: 'inline-block',
'& code': {
...theme.typography.body2,
fontSize: theme.typography.pxToRem(13),
fontFamily: theme.typography.fontFamilyCode,
fontFamily: brandingDarkTheme.typography.fontFamilyCode,
fontWeight: 400,
WebkitFontSmoothing: 'subpixel-antialiased',
padding: '0 5px',
borderRadius: 5,
// Reset for Safari
// https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
fontSize: '1em',
Comment on lines +38 to +40
Copy link
Member Author

@oliviertassinari oliviertassinari Oct 30, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix for Safari font size is to not apply the custom font size on the <code> but on the <pre> element.

},
// inline code
'& code': {
// inline code block
'& :not(pre) > code': {
Copy link
Member Author

@oliviertassinari oliviertassinari Oct 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use :not(pre) in the selector to avoid the need to reset the styles for code blocks. This selector more accurately selects inline code and ONLY. For example, it matches 1. but doesn't 2.

  1. A foo B
 <Foo />

display: 'inline-block',
padding: '0 5px',
color: theme.palette.text.primary,
backgroundColor: alpha(theme.palette.primary.light, 0.15),
},
// block code
'& code[class*="language-"]': {
color: '#fff',
padding: 0,
backgroundColor: blueDark[800],
borderRadius: 5,
fontSize: theme.typography.pxToRem(13),
},
'& h1': {
...theme.typography.h3,
Expand Down Expand Up @@ -426,7 +424,7 @@ const Root = styled('div')(({ theme }) => ({
top: theme.spacing(1),
right: theme.spacing(1),
fontFamily: 'inherit',
fontSize: '0.813rem',
fontSize: theme.typography.pxToRem(13),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The correct API

fontWeight: 500,
padding: theme.spacing(0.5, 1),
borderRadius: 4,
Expand Down
3 changes: 0 additions & 3 deletions docs/src/modules/components/TopLayoutBlog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,6 @@ const styles = ({ theme }) => ({
'& strong': {
color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.grey[900],
},
'& pre': {
fontSize: theme.typography.pxToRem(16),
},
Comment on lines -141 to -143
Copy link
Member Author

@oliviertassinari oliviertassinari Oct 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has no impacts, e.g. https://mui.com/blog/date-pickers-stable-v5/#integrated-localization. It's dead code.

'& summary': {
padding: 8,
fontSize: theme.typography.pxToRem(14),
Expand Down