From 5ad53447565fd74c31a3e5643ee2613f4e144a9f Mon Sep 17 00:00:00 2001
From: Thomas Cooper <57812123+coopernetes@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:38:30 -0400
Subject: [PATCH 1/2] feat: support strings for fontSize in Typography

Signed-off-by: Thomas Cooper <57812123+coopernetes@users.noreply.github.com>
---
 .changeset/smooth-rings-mate.md  |  5 +++
 packages/theme/api-report.md     | 55 ++++++++++++++++++++++++++++----
 packages/theme/src/base/types.ts | 18 +++++++----
 3 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/smooth-rings-mate.md

diff --git a/.changeset/smooth-rings-mate.md b/.changeset/smooth-rings-mate.md
new file mode 100644
index 0000000000..4b9a53f71b
--- /dev/null
+++ b/.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.
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index d6380ee6e8..bf226d4d9e 100644
--- a/packages/theme/api-report.md
+++ b/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;
 };
diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts
index 3e34a0abb7..d62d944741 100644
--- a/packages/theme/src/base/types.ts
+++ b/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;
   };

From 239ab25ebcf84eb4bdc1a5451369f4e3c5bc40e7 Mon Sep 17 00:00:00 2001
From: Thomas Cooper <57812123+coopernetes@users.noreply.github.com>
Date: Tue, 3 Oct 2023 19:33:28 -0400
Subject: [PATCH 2/2] address review comments

Signed-off-by: Thomas Cooper <57812123+coopernetes@users.noreply.github.com>
---
 .changeset/smooth-rings-mate.md               |  2 +-
 packages/theme/api-report.md                  | 37 +------------------
 .../theme/src/base/createBaseThemeOptions.ts  |  2 +-
 3 files changed, 3 insertions(+), 38 deletions(-)

diff --git a/.changeset/smooth-rings-mate.md b/.changeset/smooth-rings-mate.md
index 4b9a53f71b..f46ef2cb5c 100644
--- a/.changeset/smooth-rings-mate.md
+++ b/.changeset/smooth-rings-mate.md
@@ -2,4 +2,4 @@
 '@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.
+Added support for string `fontSize` values (e.g. `"2.5rem"`) in themes in addition to numbers. Also added an optional `fontFamily` prop for header typography variants to allow further customization.
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index bf226d4d9e..4ab05e8770 100644
--- a/packages/theme/api-report.md
+++ b/packages/theme/api-report.md
@@ -178,42 +178,7 @@ export function createBaseThemeOptions<PaletteOptions>(
   options: BaseThemeOptionsInput<PaletteOptions>,
 ): {
   palette: PaletteOptions;
-  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;
-        };
-      };
+  typography: BackstageTypography;
   page: PageTheme;
   getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
 };
diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts
index bca56114d7..f0c8ab5fe9 100644
--- a/packages/theme/src/base/createBaseThemeOptions.ts
+++ b/packages/theme/src/base/createBaseThemeOptions.ts
@@ -57,7 +57,7 @@ export function createBaseThemeOptions<PaletteOptions>(
     throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
   }
 
-  const defaultTypography = {
+  const defaultTypography: BackstageTypography = {
     htmlFontSize,
     fontFamily,
     h1: {