[docs] Fix Safari code font size

docs/public/static/styles/prism-okaidia.css

@@ -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-'] {
+  /* 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 +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,

docs/src/components/home/AdvancedShowcase.tsx

@@ -1733,9 +1733,6 @@ export default function DataTable() {
               '&::-webkit-scrollbar': {
                 display: 'none',
               },
-              '& code[class*="language-"]': {
-                fontSize: 'inherit',
-              },
             },
           }}
         >

docs/src/components/home/CoreShowcase.tsx

@@ -240,9 +240,6 @@ export default function CoreShowcase() {
                 '&::-webkit-scrollbar': {
                   display: 'none',
                 },
-                '& code[class*="language-"]': {
-                  fontSize: 'inherit',
-                },
               },
             }}
           >

docs/src/components/markdown/MarkdownElement.tsx

@@ -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,
@@ -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',
   },
 }));
 

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, brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 
 const Root = styled('div')(({ theme }) => ({
   ...theme.typography.body1,
@@ -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',
   },
-  // 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,
@@ -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),
     fontWeight: 500,
     padding: theme.spacing(0.5, 1),
     borderRadius: 4,

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),