From 300b89ead9bcdee82294032d56116631909c1acd 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/packages/markdown/parseMarkdown.js | 2 +- docs/pages/about.tsx | 6 +- docs/public/static/styles/prism-okaidia.css | 74 ++++++++++++------- docs/src/BrandingProvider.tsx | 14 +--- docs/src/components/home/AdvancedShowcase.tsx | 3 - docs/src/components/home/CoreShowcase.tsx | 3 - .../components/markdown/MarkdownElement.tsx | 9 ++- docs/src/modules/brandingTheme.ts | 21 +++--- .../src/modules/components/HighlightedCode.js | 2 +- .../components/HighlightedCode.test.js | 4 +- .../src/modules/components/MarkdownElement.js | 48 ++++++------ docs/src/modules/components/TopLayoutBlog.js | 3 - docs/src/modules/utils/CodeCopy.tsx | 4 +- 13 files changed, 97 insertions(+), 96 deletions(-) diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index 63094b71c813bc..89ab9041b2e778 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -286,7 +286,7 @@ function createRender(context) { return `
${
         escaped ? code : escape(code, true)
-      }
\n`; + }\n`; }; const markedOptions = { diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx index 2c22f53df7b09a..bbd6bef2ebe33a 100644 --- 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() { - + - + 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/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);