How can you support us?
diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css
index b424419aeb65fe..02cef3d4029b17 100644
--- a/docs/public/static/styles/prism-okaidia.css
+++ b/docs/public/static/styles/prism-okaidia.css
@@ -1,24 +1,16 @@
/**
- * 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-'] {
+ /* 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;
@@ -26,9 +18,9 @@ code[class*='language-'] {
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;
@@ -36,21 +28,46 @@ code[class*='language-'] {
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;
}
+*/
.token.punctuation {
color: #f8f8f2;
}
-.namespace {
+.token.namespace {
opacity: 0.7;
}
+/*
.token.property,
.token.tag,
.token.constant,
@@ -58,11 +75,14 @@ code[class*='language-'] {
.token.deleted {
color: #f92672;
}
+*/
+/*
.token.boolean,
.token.number {
color: #ae81ff;
}
+*/
.token.selector,
.token.attr-name,
@@ -110,17 +130,15 @@ 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,
@@ -128,7 +146,7 @@ code[class*='language-'] {
.token.constant,
.token.symbol,
.token.deleted {
- color: rgb(252, 146, 158);
+ color: #fc929e;
}
.token.boolean,
diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
index 872f0658357cb9..9686fb1b124385 100644
--- a/docs/src/BrandingProvider.tsx
+++ b/docs/src/BrandingProvider.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
import SkipLink from 'docs/src/modules/components/SkipLink';
@@ -17,14 +17,8 @@ export default function BrandingProvider(props: BrandingProviderProps) {
const { children, mode: modeProp } = props;
const upperTheme = useTheme();
const mode = modeProp || upperTheme.palette.mode;
- const theme = React.useMemo(
- () =>
- createTheme({
- ...getDesignTokens(mode),
- ...getThemedComponents(),
- }),
- [mode],
- );
+ const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+
return (
theme : theme}>
{modeProp ? null : }
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index 4b4d90e9ebec66..80bb0eadec85e1 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1733,9 +1733,6 @@ export default function DataTable() {
'&::-webkit-scrollbar': {
display: 'none',
},
- '& code[class*="language-"]': {
- fontSize: 'inherit',
- },
},
}}
>
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index f36f6a81cec888..f2f8bacfc9432f 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -240,9 +240,6 @@ export default function CoreShowcase() {
'&::-webkit-scrollbar': {
display: 'none',
},
- '& code[class*="language-"]': {
- fontSize: 'inherit',
- },
},
}}
>
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
index 1d48e627a46699..4432aa87ddce38 100644
--- a/docs/src/components/markdown/MarkdownElement.tsx
+++ b/docs/src/components/markdown/MarkdownElement.tsx
@@ -11,7 +11,8 @@ const Root = styled('div')(({ theme }) => ({
color: theme.palette.text.primary,
'& pre': {
backgroundColor: theme.palette.primaryDark[800],
- direction: 'ltr',
+ color: '#f8f8f2', // fallback color until Prism's theme is loaded
+ direction: 'ltr /*! @noflip */',
overflow: 'auto',
margin: 0,
WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
@@ -20,12 +21,16 @@ const Root = styled('div')(({ theme }) => ({
maxWidth: 'calc(100vw - 32px - 16px)',
},
},
- '& code[class*="language-"]': {
+ '& code': {
+ display: 'inline-block',
// 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',
},
}));
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index e99bac0f0256ad..af90a88a53b2de 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -1,4 +1,3 @@
-import { deepmerge } from '@mui/utils';
import { CSSObject } from '@mui/system';
import type {} from '@mui/material/themeCssVarsAugmentation';
import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
@@ -225,14 +224,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
spacing: 10,
typography: {
fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
- fontFamilyCode: [
- 'Consolas',
- 'Menlo',
- 'Monaco',
- 'Andale Mono',
- 'Ubuntu Mono',
- 'monospace',
- ].join(','),
+ fontFamilyCode: ['Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace'].join(','),
fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
fontFamilySystem: systemFont.join(','),
fontWeightSemiBold: 600,
@@ -904,5 +896,12 @@ export function getThemedComponents(): ThemeOptions {
};
}
-const darkTheme = createTheme(getDesignTokens('dark'));
-export const brandingDarkTheme = deepmerge(darkTheme, getThemedComponents());
+export const brandingDarkTheme = createTheme({
+ ...getDesignTokens('dark'),
+ ...getThemedComponents(),
+});
+
+export const brandingLightTheme = createTheme({
+ ...getDesignTokens('light'),
+ ...getThemedComponents(),
+});
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index 726e8cd6774b25..2202051a18d4be 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -57,12 +57,6 @@ const FeedbackGrid = styled(Grid)(({ theme }) => {
};
});
-const FeedbackMessage = styled(Typography)(({ theme }) => {
- return {
- margin: theme.spacing(0, 2),
- };
-});
-
/**
* @typedef {import('docs/src/pages').MuiPage} MuiPage
* @typedef {import('docs/src/pages').OrderedMuiPage} OrderedMuiPage
@@ -340,14 +334,15 @@ export default function AppLayoutDocsFooter() {
alignItems="center"
aria-labelledby="feedback-message"
>
-
{t('feedbackMessage')}
-
+
diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
index 4a701c7df42b4a..080789b3b8ef8d 100644
--- a/docs/src/modules/components/HighlightedCode.js
+++ b/docs/src/modules/components/HighlightedCode.js
@@ -64,7 +64,7 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) {
>
{copied ? 'Copied' : 'Copy'}
- (Or {key}C)
+ (or {key}C)
)}
diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js
index 95b890ba1c4f4d..685b814833ab67 100644
--- a/docs/src/modules/components/HighlightedCode.test.js
+++ b/docs/src/modules/components/HighlightedCode.test.js
@@ -2,8 +2,8 @@ import * as React from 'react';
import { expect } from 'chai';
import { createRenderer } from 'test/utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { getDesignTokens } from '../brandingTheme';
-import HighlightedCode from './HighlightedCode';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { getDesignTokens } from 'docs/src/modules/brandingTheme';
describe('HighlightedCode', () => {
const { render } = createRenderer();
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index ed4ccadb95f946..0490313dde8a80 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -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, brandingLightTheme } from 'docs/src/modules/brandingTheme';
const Root = styled('div')(({ theme }) => ({
...theme.typography.body1,
@@ -15,40 +15,39 @@ 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',
+ direction: 'ltr /*! @noflip */',
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',
+ '& code': {
display: 'inline-block',
...theme.typography.body2,
- fontSize: theme.typography.pxToRem(13),
- fontFamily: theme.typography.fontFamilyCode,
+ // Reset for Safari
+ // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+ fontSize: '1em',
+ fontFamily: brandingLightTheme.typography.fontFamilyCode,
fontWeight: 400,
WebkitFontSmoothing: 'subpixel-antialiased',
- padding: '0 5px',
- borderRadius: 5,
},
- // inline code
- '& code': {
+ // inline code block
+ '& :not(pre) > code': {
+ 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,
@@ -96,12 +95,7 @@ const Root = styled('div')(({ theme }) => ({
color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[900],
},
'& ul': {
- ...(theme.direction === 'rtl' && {
- paddingRight: 30,
- }),
- ...(theme.direction !== 'rtl' && {
- paddingLeft: 30,
- }),
+ paddingLeft: 30,
},
'& h1, & h2, & h3, & h4': {
'& code': {
@@ -402,13 +396,13 @@ const Root = styled('div')(({ theme }) => ({
'& details': {
marginBottom: theme.spacing(1.5),
padding: theme.spacing(0.5, 0, 0.5, 1),
- '& summary': {
- cursor: 'pointer',
- },
'& pre': {
marginTop: theme.spacing(1),
},
},
+ '& summary': {
+ cursor: 'pointer',
+ },
'& .MuiCode-root': {
position: 'relative',
'&:hover': {
@@ -424,9 +418,9 @@ const Root = styled('div')(({ theme }) => ({
cursor: 'pointer',
position: 'absolute',
top: theme.spacing(1),
- right: theme.spacing(1),
+ right: `${theme.spacing(1)} /*! @noflip */`,
fontFamily: 'inherit',
- fontSize: '0.813rem',
+ fontSize: theme.typography.pxToRem(13),
fontWeight: 500,
padding: theme.spacing(0.5, 1),
borderRadius: 4,
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 33098cb2e82dde..bf8de254e41dbb 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -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),
- },
'& summary': {
padding: 8,
fontSize: theme.typography.pxToRem(14),
diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx
index 8949517d462658..68a6b1c32dffd4 100644
--- a/docs/src/modules/utils/CodeCopy.tsx
+++ b/docs/src/modules/utils/CodeCopy.tsx
@@ -15,7 +15,7 @@ const CodeBlockContext = React.createContext...
*
*/
-export const useCodeCopy = () => {
+export function useCodeCopy() {
const rootNode = React.useContext(CodeBlockContext);
return {
onMouseEnter: (event: React.MouseEvent) => {
@@ -36,7 +36,7 @@ export const useCodeCopy = () => {
}
},
};
-};
+}
function InitCodeCopy() {
const rootNode = React.useContext(CodeBlockContext);