Allow for customizing theme typography

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

.changeset/nervous-llamas-tan.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Removed themed example from `OwnershipCard` Storybook entry

.changeset/serious-carrots-applaud.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+You can now customize the typography of your theme by passing in your own custom typography defaults

packages/theme/api-report.md

@@ -124,6 +124,8 @@ export interface BaseThemeOptionsInput<PaletteOptions> {
   pageTheme?: Record<string, PageTheme>;
   // (undocumented)
   palette: PaletteOptions;
+  // (undocumented)
+  typography?: Typography;
 }
 
 // @public
@@ -134,40 +136,7 @@ export function createBaseThemeOptions<PaletteOptions>(
   options: BaseThemeOptionsInput<PaletteOptions>,
 ): {
   palette: PaletteOptions;
-  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: {
-      fontWeight: number;
-      fontSize: number;
-      marginBottom: number;
-    };
-    h5: {
-      fontWeight: number;
-      fontSize: number;
-      marginBottom: number;
-    };
-    h6: {
-      fontWeight: number;
-      fontSize: number;
-      marginBottom: number;
-    };
-  };
+  typography: Typography;
   page: PageTheme;
   getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
 };
@@ -379,6 +348,7 @@ export type SimpleThemeOptions = {
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
   htmlFontSize?: number;
+  typography?: Typography;
 };
 
 // @public
@@ -402,6 +372,42 @@ export function transformV5ComponentThemesToV4(
   props: ComponentsProps;
 };
 
+// @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;
+  };
+};
+
 // @public
 export interface UnifiedTheme {
   // (undocumented)
@@ -422,6 +428,8 @@ export interface UnifiedThemeOptions {
   pageTheme?: Record<string, PageTheme>;
   // (undocumented)
   palette: PaletteOptions & PaletteOptions_2;
+  // (undocumented)
+  typography?: Typography;
 }
 
 // @public

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' {

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx

@@ -22,13 +22,7 @@ import {
   EntityProvider,
 } from '@backstage/plugin-catalog-react';
 import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
-import {
-  BackstageTheme,
-  createTheme,
-  genPageTheme,
-  shapes,
-} from '@backstage/theme';
-import { Grid, ThemeProvider } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import React from 'react';
 import { catalogIndexRouteRef } from '../../../routes';
 import { OwnershipCard } from './OwnershipCard';
@@ -115,40 +109,6 @@ export const Default = () =>
     },
   );
 
-const monochromeTheme = (outer: BackstageTheme) =>
-  createTheme({
-    ...outer,
-    defaultPageTheme: 'home',
-    pageTheme: {
-      home: genPageTheme({ colors: ['#444'], shape: shapes.wave2 }),
-      documentation: genPageTheme({ colors: ['#474747'], shape: shapes.wave2 }),
-      tool: genPageTheme({ colors: ['#222'], shape: shapes.wave2 }),
-      service: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
-      website: genPageTheme({ colors: ['#0e0e0e'], shape: shapes.wave2 }),
-      library: genPageTheme({ colors: ['#9d9d9d'], shape: shapes.wave2 }),
-      other: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
-      app: genPageTheme({ colors: ['#666'], shape: shapes.wave2 }),
-    },
-  });
-
-export const Themed = () =>
-  wrapInTestApp(
-    <ThemeProvider theme={monochromeTheme}>
-      <ApiProvider apis={apis}>
-        <EntityProvider entity={defaultEntity}>
-          <Grid container spacing={4}>
-            <Grid item xs={12} md={6}>
-              <OwnershipCard />
-            </Grid>
-          </Grid>
-        </EntityProvider>
-      </ApiProvider>
-    </ThemeProvider>,
-    {
-      mountedRoutes: { '/catalog': catalogIndexRouteRef },
-    },
-  );
-
 export const WithVariableEntityList = {
   argTypes: {
     entityLimit: {