Unified Theme Docs

Signed-off-by: Andre Wanlin <awanlin@spotify.com>

packages/theme/src/base/createBaseThemeOptions.ts

@@ -22,6 +22,46 @@ const DEFAULT_FONT_FAMILY =
   '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
 const DEFAULT_PAGE_THEME = 'home';
 
+/**
+ * Default Typography settings.
+ *
+ * @public
+ */
+export const defaultTypography: BackstageTypography = {
+  htmlFontSize: DEFAULT_HTML_FONT_SIZE,
+  fontFamily: DEFAULT_FONT_FAMILY,
+  h1: {
+    fontSize: 54,
+    fontWeight: 700,
+    marginBottom: 10,
+  },
+  h2: {
+    fontSize: 40,
+    fontWeight: 700,
+    marginBottom: 8,
+  },
+  h3: {
+    fontSize: 32,
+    fontWeight: 700,
+    marginBottom: 6,
+  },
+  h4: {
+    fontWeight: 700,
+    fontSize: 28,
+    marginBottom: 6,
+  },
+  h5: {
+    fontWeight: 700,
+    fontSize: 24,
+    marginBottom: 4,
+  },
+  h6: {
+    fontWeight: 700,
+    fontSize: 20,
+    marginBottom: 2,
+  },
+};
+
 /**
  * Options for {@link createBaseThemeOptions}.
  *
@@ -57,40 +97,8 @@ export function createBaseThemeOptions<PaletteOptions>(
     throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
   }
 
-  const defaultTypography: BackstageTypography = {
-    htmlFontSize,
-    fontFamily,
-    h1: {
-      fontSize: 54,
-      fontWeight: 700,
-      marginBottom: 10,
-    },
-    h2: {
-      fontSize: 40,
-      fontWeight: 700,
-      marginBottom: 8,
-    },
-    h3: {
-      fontSize: 32,
-      fontWeight: 700,
-      marginBottom: 6,
-    },
-    h4: {
-      fontWeight: 700,
-      fontSize: 28,
-      marginBottom: 6,
-    },
-    h5: {
-      fontWeight: 700,
-      fontSize: 24,
-      marginBottom: 4,
-    },
-    h6: {
-      fontWeight: 700,
-      fontSize: 20,
-      marginBottom: 2,
-    },
-  };
+  defaultTypography.htmlFontSize = htmlFontSize;
+  defaultTypography.fontFamily = fontFamily;
 
   return {
     palette,

packages/theme/src/base/index.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-export { createBaseThemeOptions } from './createBaseThemeOptions';
+export {
+  createBaseThemeOptions,
+  defaultTypography,
+} from './createBaseThemeOptions';
 export type { BaseThemeOptionsInput } from './createBaseThemeOptions';
 export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme';
 export { palettes } from './palettes';