Merge pull request #20324 from coopernetes/gh20093-extend-typography

feat: support strings for fontSize in BackstageTypography

.changeset/smooth-rings-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+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.

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;
   };

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

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;
   };