sync okaidia with latest

mui · Oct 23, 2022 · a3e9f19 · a3e9f19
1 parent 599cb89
commit a3e9f19
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 93 deletions.
diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js
@@ -286,7 +286,7 @@ function createRender(context) {
 
       return `<div class="MuiCode-root"><pre><code class="language-${escape(lang, true)}">${
         escaped ? code : escape(code, true)
-      }</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">Copy <span class="MuiCode-copyKeypress"><span>(Or</span> $keyC<span>)</span></span></button></div>\n`;
+      }</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">Copy <span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n`;
     };
 
     const markedOptions = {

diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -674,7 +674,7 @@ function AboutContent() {
           </Grid>
         </Box>
       </Container>
-      <MuiThemeProvider theme={brandingDarkTheme}>
+      <ThemeProvider theme={brandingDarkTheme}>
         <Box sx={{ bgcolor: 'primaryDark.700' }}>
           <Container sx={{ py: { xs: 4, sm: 8 } }}>
             <Typography
@@ -722,7 +722,7 @@ function AboutContent() {
             </Box>
           </Container>
         </Box>
-      </MuiThemeProvider>
+      </ThemeProvider>
       <Container sx={{ py: { xs: 4, md: 8 } }}>
         <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
           How can you support us?

diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css
@@ -1,68 +1,88 @@
 /**
- * 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;
   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;
 }
+*/
 
 .token.punctuation {
   color: #f8f8f2;
 }
 
-.namespace {
+.token.namespace {
   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,
@@ -110,25 +130,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,

diff --git 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 (
     <ThemeProvider theme={modeProp ? () => theme : theme}>
       {modeProp ? null : <NextNProgressBar />}

diff --git 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
@@ -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
@@ -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
@@ -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/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
@@ -64,7 +64,7 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) {
           >
             {copied ? 'Copied' : 'Copy'}&nbsp;
             <span className="MuiCode-copyKeypress">
-              <span>(Or</span> {key}C<span>)</span>
+              <span>(or</span> {key}C<span>)</span>
             </span>
           </button>
         )}

diff --git 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();