refactor(v2): make code blocks styles standalone

facebook · Feb 28, 2021 · 0ab998f · 0ab998f
1 parent 12afb9e
commit 0ab998f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 26 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -9,16 +9,16 @@
   position: relative;
   /*rtl:ignore*/
   direction: ltr;
+  margin-bottom: var(--ifm-leading);
 }
 
 .codeBlockTitle {
   border-top-left-radius: var(--ifm-global-radius);
   border-top-right-radius: var(--ifm-global-radius);
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: bold;
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
-  width: 100%;
 }
 
 .codeBlock {
@@ -53,9 +53,8 @@
 }
 
 .codeBlockLines {
-  font-family: var(--ifm-font-family-monospace);
-  font-size: inherit;
-  line-height: var(--ifm-pre-line-height);
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace);
   white-space: pre;
   float: left;
   min-width: 100%;

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -11,8 +11,6 @@ import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
-import styles from './styles.module.css';
-
 const MDXComponents: MDXComponentsObject = {
   code: (props) => {
     const {children} = props;
@@ -25,7 +23,7 @@ const MDXComponents: MDXComponentsObject = {
     return children;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => <div className={styles.mdxCodeBlock} {...props} />,
+  pre: (props) => <div className="mdxCodeBlock" {...props} />,
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css