refactor(techdocs): apply review suggestions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/strong-lies-explain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Adds optional `htmlFontSize` property and also sets typography design tokens for h5 and h6 in base theme.

docs/README.md

@@ -1,15 +1,3 @@
 # Documentation
 
 The Backstage documentation is available at https://backstage.io/docs
-
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6

packages/theme/api-report.md

@@ -145,5 +145,6 @@ export type SimpleThemeOptions = {
   defaultPageTheme: string;
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
+  htmlFontSize?: number;
 };
 ```

packages/theme/src/baseTheme.ts

@@ -24,6 +24,7 @@ import {
 } from './types';
 import { pageTheme as defaultPageThemes } from './pageTheme';
 
+const DEFAULT_HTML_FONT_SIZE = 16;
 const DEFAULT_FONT_FAMILY =
   '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
 
@@ -37,6 +38,7 @@ export function createThemeOptions(
 ): BackstageThemeOptions {
   const {
     palette,
+    htmlFontSize = DEFAULT_HTML_FONT_SIZE,
     fontFamily = DEFAULT_FONT_FAMILY,
     defaultPageTheme,
     pageTheme = defaultPageThemes,
@@ -57,9 +59,17 @@ export function createThemeOptions(
       },
     },
     typography: {
+      htmlFontSize,
       fontFamily,
+      h6: {
+        fontWeight: 700,
+        fontSize: 20,
+        marginBottom: 2,
+      },
       h5: {
         fontWeight: 700,
+        fontSize: 24,
+        marginBottom: 4,
       },
       h4: {
         fontWeight: 700,

packages/theme/src/types.ts

@@ -149,6 +149,7 @@ export type SimpleThemeOptions = {
   defaultPageTheme: string;
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
+  htmlFontSize?: number;
 };
 
 /**

plugins/techdocs-backend/examples/documented-component/docs/index.md

@@ -11,6 +11,20 @@ You can see also:
 
 ## Basic Markdown
 
+Headings:
+
+# h1
+
+## h2
+
+### h3
+
+#### h4
+
+##### h5
+
+###### h6
+
 Here is a bulleted list:
 
 - Item one