From b94554f82f5e6e7754833a09d41c0a7f952b4675 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 23 Oct 2022 00:14:08 +0200 Subject: [PATCH] sync okaidia with latest --- docs/public/static/styles/prism-okaidia.css | 78 ++++++++++++------- docs/src/components/home/AdvancedShowcase.tsx | 3 - docs/src/components/home/CoreShowcase.tsx | 3 - .../components/markdown/MarkdownElement.tsx | 6 +- .../src/modules/components/MarkdownElement.js | 32 ++++---- docs/src/modules/components/TopLayoutBlog.js | 3 - 6 files changed, 70 insertions(+), 55 deletions(-) diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css index b424419aeb65fe..13783c48963b1c 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,50 @@ 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 +79,14 @@ code[class*='language-'] { .token.deleted { color: #f92672; } +*/ +/* .token.boolean, .token.number { color: #ae81ff; } +*/ .token.selector, .token.attr-name, @@ -110,17 +134,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 +150,7 @@ code[class*='language-'] { .token.constant, .token.symbol, .token.deleted { - color: rgb(252, 146, 158); + color: #fc929e; } .token.boolean, 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..624ff15f5ca2d5 100644 --- a/docs/src/components/markdown/MarkdownElement.tsx +++ b/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', }, })); diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 16bacf8232331c..c153ee8477371d 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, brandingDarkTheme } from 'docs/src/modules/brandingTheme'; const Root = styled('div')(({ theme }) => ({ ...theme.typography.body1, @@ -15,6 +15,7 @@ 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, @@ -22,33 +23,30 @@ const Root = styled('div')(({ theme }) => ({ 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, + // Reset for Safari + // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102 + fontSize: '1em', + fontFamily: brandingDarkTheme.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, @@ -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, diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index d4bac63cb72d88..d0afcfed994fdf 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),