Allow for customizing theme typography

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>

packages/theme/src/base/createBaseThemeOptions.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PageTheme, PageThemeSelector } from './types';
+import { Typography, PageTheme, PageThemeSelector } from './types';
 import { pageTheme as defaultPageThemes } from './pageTheme';
 
 const DEFAULT_HTML_FONT_SIZE = 16;
@@ -33,6 +33,7 @@ export interface BaseThemeOptionsInput<PaletteOptions> {
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
   htmlFontSize?: number;
+  typography?: Typography;
 }
 
 /**
@@ -49,48 +50,51 @@ export function createBaseThemeOptions<PaletteOptions>(
     fontFamily = DEFAULT_FONT_FAMILY,
     defaultPageTheme = DEFAULT_PAGE_THEME,
     pageTheme = defaultPageThemes,
+    typography,
   } = options;
 
   if (!pageTheme[defaultPageTheme]) {
     throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
   }
 
+  const defaultTypography = {
+    htmlFontSize,
+    fontFamily,
+    h1: {
+      fontSize: 54,
+      fontWeight: 700,
+      marginBottom: 10,
+    },
+    h2: {
+      fontSize: 40,
+      fontWeight: 700,
+      marginBottom: 8,
+    },
+    h3: {
+      fontSize: 32,
+      fontWeight: 700,
+      marginBottom: 6,
+    },
+    h4: {
+      fontWeight: 700,
+      fontSize: 28,
+      marginBottom: 6,
+    },
+    h5: {
+      fontWeight: 700,
+      fontSize: 24,
+      marginBottom: 4,
+    },
+    h6: {
+      fontWeight: 700,
+      fontSize: 20,
+      marginBottom: 2,
+    },
+  };
+
   return {
     palette,
-    typography: {
-      htmlFontSize,
-      fontFamily,
-      h1: {
-        fontSize: 54,
-        fontWeight: 700,
-        marginBottom: 10,
-      },
-      h2: {
-        fontSize: 40,
-        fontWeight: 700,
-        marginBottom: 8,
-      },
-      h3: {
-        fontSize: 32,
-        fontWeight: 700,
-        marginBottom: 6,
-      },
-      h4: {
-        fontWeight: 700,
-        fontSize: 28,
-        marginBottom: 6,
-      },
-      h5: {
-        fontWeight: 700,
-        fontSize: 24,
-        marginBottom: 4,
-      },
-      h6: {
-        fontWeight: 700,
-        fontSize: 20,
-        marginBottom: 2,
-      },
-    },
+    typography: typography ?? defaultTypography,
     page: pageTheme[defaultPageTheme],
     getPageTheme: ({ themeId }: PageThemeSelector) =>
       pageTheme[themeId] ?? pageTheme[defaultPageTheme],

packages/theme/src/base/index.ts

@@ -23,4 +23,5 @@ export type {
   BackstagePaletteAdditions,
   PageTheme,
   PageThemeSelector,
+  Typography,
 } from './types';

packages/theme/src/base/types.ts

@@ -114,3 +114,43 @@ export type BackstageThemeAdditions = {
   page: PageTheme;
   getPageTheme: (selector: PageThemeSelector) => PageTheme;
 };
+
+/**
+ * Custom Typography
+ *
+ * @public
+ */
+export type Typography = {
+  htmlFontSize: number;
+  fontFamily: string;
+  h1: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+  h2: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+  h3: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+  h4: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+  h5: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+  h6: {
+    fontSize: number;
+    fontWeight: number;
+    marginBottom: number;
+  };
+};

packages/theme/src/unified/UnifiedTheme.tsx

@@ -29,7 +29,7 @@ import {
   createTheme as createV5Theme,
 } from '@mui/material/styles';
 import { createBaseThemeOptions } from '../base/createBaseThemeOptions';
-import { PageTheme } from '../base/types';
+import { Typography, PageTheme } from '../base/types';
 import { defaultComponentThemes } from '../v5';
 import { transformV5ComponentThemesToV4 } from './overrides';
 import { SupportedThemes, SupportedVersions, UnifiedTheme } from './types';
@@ -64,6 +64,7 @@ export interface UnifiedThemeOptions {
   fontFamily?: string;
   htmlFontSize?: number;
   components?: ThemeOptionsV5['components'];
+  typography?: Typography;
 }
 
 /**

packages/theme/src/v4/types.ts

@@ -25,6 +25,7 @@ import type {
 import {
   BackstagePaletteAdditions,
   BackstageThemeAdditions,
+  Typography,
   PageTheme,
   PageThemeSelector,
 } from '../base/types';
@@ -89,6 +90,7 @@ export type SimpleThemeOptions = {
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
   htmlFontSize?: number;
+  typography?: Typography;
 };
 
 declare module '@material-ui/core/styles/createPalette' {