Merge pull request #23110 from storybookjs/fix/theme-fontCode-mdx

Mdx : Theme `fontCode` not applied consistently when writing MDX
storybookjs · Nov 27, 2023 · ed656b8 · ed656b8
2 parents 20600b3 + 8fec73b
commit ed656b8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx
@@ -1,7 +1,14 @@
 import type { ComponentProps, FunctionComponent } from 'react';
-import { ThemeProvider, convert, ignoreSsrWarning, styled, themes } from '@storybook/theming';
-
 import React from 'react';
+import {
+  styled,
+  ThemeProvider,
+  convert,
+  themes,
+  ignoreSsrWarning,
+  useTheme,
+} from '@storybook/theming';
+
 import { SyntaxHighlighter } from '@storybook/components';
 import type { SyntaxHighlighterProps } from '@storybook/components';
 import { EmptyBlock } from './EmptyBlock';
@@ -94,6 +101,7 @@ const Source: FunctionComponent<SourceProps> = ({
   format,
   ...rest
 }) => {
+  const { typography } = useTheme();
   if (isLoading) {
     return <SourceSkeleton />;
   }
@@ -117,7 +125,17 @@ const Source: FunctionComponent<SourceProps> = ({
     return syntaxHighlighter;
   }
   const overrideTheme = dark ? themes.dark : themes.light;
-  return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
+  return (
+    <ThemeProvider
+      theme={convert({
+        ...overrideTheme,
+        fontCode: typography.fonts.mono,
+        fontBase: typography.fonts.base,
+      })}
+    >
+      {syntaxHighlighter}
+    </ThemeProvider>
+  );
 };
 
 Source.defaultProps = {

diff --git a/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -132,6 +132,7 @@ const Code = styled.div(({ theme }) => ({
   paddingLeft: 2, // TODO: To match theming/global.ts for now
   paddingRight: theme.layoutMargin,
   opacity: 1,
+  fontFamily: theme.typography.fonts.mono,
 }));
 
 const processLineNumber = (row: any) => {