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

feat: support strings for fontSize in BackstageTypography

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