feat: support strings for fontSize in Typography

Signed-off-by: Thomas Cooper <57812123+coopernetes@users.noreply.github.com>

.changeset/smooth-rings-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Fixed a bug to support string fontSize values (`"2.5rem"`) instead of forcing numeric-only values & requiring casts. In addition, added an optional fontFamily prop for h1-h6 BackstageTypography variants to allow further customization.

packages/theme/api-report.md

@@ -117,32 +117,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
@@ -172,7 +178,42 @@ export function createBaseThemeOptions<PaletteOptions>(
   options: BaseThemeOptionsInput<PaletteOptions>,
 ): {
   palette: PaletteOptions;
-  typography: BackstageTypography;
+  typography:
+    | BackstageTypography
+    | {
+        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;
+        };
+      };
   page: PageTheme;
   getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
 };

packages/theme/src/base/types.ts

@@ -124,32 +124,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };