From 48bec68ef0b261a9f8d72e15654a2adff79605bc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Nov 2022 15:28:25 +0700 Subject: [PATCH 1/6] fix styling issues --- docs/src/modules/components/DemoEditor.tsx | 5 +++-- docs/src/modules/components/MarkdownElement.js | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 49f51845f16660..4d8f87285e3df5 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -32,6 +32,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({ ...theme.typography.body2, + letterSpacing: '0.01071em', // must sync with MarkdownElement.js#L42, otherwise the text will overlap when highlight the code. fontSize: theme.typography.pxToRem(13), fontFamily: theme.typography.fontFamilyCode, fontWeight: 400, @@ -42,8 +43,8 @@ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({ minWidth: '100%', '& pre': { // The scroll container needs to be the parent of the editor - maxHeight: 'initial', - maxWidth: 'initial', + maxHeight: 'initial !important', + maxWidth: 'initial !important', }, '& textarea': { outline: 'none', diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index af6eac766b0f8f..ecea6609060ec2 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -408,6 +408,9 @@ const Root = styled('div')( }), { ':where(.mode-dark) &': { + '& :not(pre) > code': { + color: '#fff', + }, '& strong': { color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`, }, @@ -505,6 +508,7 @@ const Root = styled('div')( color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`, }, '& kbd.key': { + color: '#fff', backgroundColor: `var(--muidocs-palette-primaryDark-900, ${darkTheme.palette.primaryDark[900]})`, border: `1px solid var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, boxShadow: `inset 0 -1px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`, From 7d80855019b964bcbf9ec56a6ea2550d6bdc1c02 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Nov 2022 16:04:40 +0700 Subject: [PATCH 2/6] revert --- docs/src/modules/components/DemoEditor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 4d8f87285e3df5..06730c04fc4a16 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -43,8 +43,8 @@ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({ minWidth: '100%', '& pre': { // The scroll container needs to be the parent of the editor - maxHeight: 'initial !important', - maxWidth: 'initial !important', + maxHeight: 'initial', + maxWidth: 'initial', }, '& textarea': { outline: 'none', From 5b909b2305ab10eaace1f5d2754d8ac45ebb9a22 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Nov 2022 16:32:25 +0700 Subject: [PATCH 3/6] Trigger Build From f8beae5f78aea321f157055e83e6a26a38fbb7f9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 14 Nov 2022 13:10:30 +0700 Subject: [PATCH 4/6] add comment --- docs/src/modules/components/MarkdownElement.js | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index a4469fe113098d..b877ef28438312 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -413,6 +413,7 @@ const Root = styled('div')( { ':where(.mode-dark) &': { '& :not(pre) > code': { + // inline code block color: '#fff', }, '& strong': { From ed94af6c71089aad2872f853cef1e58dd4dbfbf0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 14 Nov 2022 13:15:55 +0700 Subject: [PATCH 5/6] remove the letter-spacing --- docs/src/modules/components/MarkdownElement.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index b877ef28438312..b1802eb0c492cc 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -39,7 +39,6 @@ const Root = styled('div')( ...lightTheme.typography.body2, fontFamily: lightTheme.typography.fontFamilyCode, fontWeight: 400, - letterSpacing: '0.01071em', WebkitFontSmoothing: 'subpixel-antialiased', }, '& pre > code': { From 8404d655d505df191b4a1955fb02afb5e203e0d5 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 14 Nov 2022 14:20:29 +0700 Subject: [PATCH 6/6] remove letter-spacing --- docs/src/modules/components/DemoEditor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 38df1203a74cf8..dc7b7444050a16 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -38,7 +38,6 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({ ...theme.typography.body2, - letterSpacing: '0.01071em', // must sync with MarkdownElement.js#L42, otherwise the text will overlap when highlight the code. fontSize: theme.typography.pxToRem(13), fontFamily: theme.typography.fontFamilyCode, fontWeight: 400,