packages/theme: make it easier no override default font

packages/theme/src/baseTheme.ts

@@ -21,12 +21,17 @@ import { Overrides } from '@material-ui/core/styles/overrides';
 import {
   BackstageTheme,
   BackstageThemeOptions,
-  BackstagePaletteOptions,
+  SimpleThemeOptions,
 } from './types';
 
+const DEFAULT_FONT_FAMILY =
+  '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
+
 export function createThemeOptions(
-  palette: BackstagePaletteOptions,
+  options: SimpleThemeOptions,
 ): BackstageThemeOptions {
+  const { palette, fontFamily = DEFAULT_FONT_FAMILY } = options;
+
   return {
     palette,
     props: {
@@ -38,7 +43,7 @@ export function createThemeOptions(
       },
     },
     typography: {
-      fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
+      fontFamily,
       h5: {
         fontWeight: 700,
       },
@@ -205,8 +210,8 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides {
 
 // Creates a Backstage MUI theme using a palette.
 // The theme is created with the common Backstage options and component styles.
-export function createTheme(palette: BackstagePaletteOptions): BackstageTheme {
-  const themeOptions = createThemeOptions(palette);
+export function createTheme(options: SimpleThemeOptions): BackstageTheme {
+  const themeOptions = createThemeOptions(options);
   const baseTheme = createMuiTheme(themeOptions) as BackstageTheme;
   const overrides = createThemeOverrides(baseTheme);
   const theme = { ...baseTheme, overrides };

packages/theme/src/themes.ts

@@ -18,81 +18,85 @@ import { createTheme } from './baseTheme';
 import { blue, yellow } from '@material-ui/core/colors';
 
 export const lightTheme = createTheme({
-  type: 'light',
-  background: {
-    default: '#F8F8F8',
-  },
-  status: {
-    ok: '#1DB954',
-    warning: '#FF9800',
-    error: '#E22134',
-    running: '#2E77D0',
-    pending: '#FFED51',
-    aborted: '#757575',
-  },
-  bursts: {
-    fontColor: '#FEFEFE',
-    slackChannelText: '#ddd',
-    backgroundColor: {
-      default: '#7C3699',
+  palette: {
+    type: 'light',
+    background: {
+      default: '#F8F8F8',
     },
+    status: {
+      ok: '#1DB954',
+      warning: '#FF9800',
+      error: '#E22134',
+      running: '#2E77D0',
+      pending: '#FFED51',
+      aborted: '#757575',
+    },
+    bursts: {
+      fontColor: '#FEFEFE',
+      slackChannelText: '#ddd',
+      backgroundColor: {
+        default: '#7C3699',
+      },
+    },
+    primary: {
+      main: blue[500],
+    },
+    border: '#E6E6E6',
+    textContrast: '#000000',
+    textVerySubtle: '#DDD',
+    textSubtle: '#6E6E6E',
+    highlight: '#FFFBCC',
+    errorBackground: '#FFEBEE',
+    warningBackground: '#F59B23',
+    infoBackground: '#ebf5ff',
+    errorText: '#CA001B',
+    infoText: '#004e8a',
+    warningText: '#FEFEFE',
+    linkHover: '#2196F3',
+    link: '#0A6EBE',
+    gold: yellow.A700,
+    sidebar: '#171717',
   },
-  primary: {
-    main: blue[500],
-  },
-  border: '#E6E6E6',
-  textContrast: '#000000',
-  textVerySubtle: '#DDD',
-  textSubtle: '#6E6E6E',
-  highlight: '#FFFBCC',
-  errorBackground: '#FFEBEE',
-  warningBackground: '#F59B23',
-  infoBackground: '#ebf5ff',
-  errorText: '#CA001B',
-  infoText: '#004e8a',
-  warningText: '#FEFEFE',
-  linkHover: '#2196F3',
-  link: '#0A6EBE',
-  gold: yellow.A700,
-  sidebar: '#171717',
 });
 
 export const darkTheme = createTheme({
-  type: 'dark',
-  background: {
-    default: '#333333',
-  },
-  status: {
-    ok: '#1DB954',
-    warning: '#FF9800',
-    error: '#E22134',
-    running: '#2E77D0',
-    pending: '#FFED51',
-    aborted: '#757575',
-  },
-  bursts: {
-    fontColor: '#FEFEFE',
-    slackChannelText: '#ddd',
-    backgroundColor: {
-      default: '#7C3699',
+  palette: {
+    type: 'dark',
+    background: {
+      default: '#333333',
     },
+    status: {
+      ok: '#1DB954',
+      warning: '#FF9800',
+      error: '#E22134',
+      running: '#2E77D0',
+      pending: '#FFED51',
+      aborted: '#757575',
+    },
+    bursts: {
+      fontColor: '#FEFEFE',
+      slackChannelText: '#ddd',
+      backgroundColor: {
+        default: '#7C3699',
+      },
+    },
+    primary: {
+      main: blue[500],
+    },
+    border: '#E6E6E6',
+    textContrast: '#FFFFFF',
+    textVerySubtle: '#DDD',
+    textSubtle: '#EEEEEE',
+    highlight: '#FFFBCC',
+    errorBackground: '#FFEBEE',
+    warningBackground: '#F59B23',
+    infoBackground: '#ebf5ff',
+    errorText: '#CA001B',
+    infoText: '#004e8a',
+    warningText: '#FEFEFE',
+    linkHover: '#2196F3',
+    link: '#0A6EBE',
+    gold: yellow.A700,
+    sidebar: '#424242',
   },
-  primary: {
-    main: blue[500],
-  },
-  border: '#E6E6E6',
-  textContrast: '#FFFFFF',
-  textVerySubtle: '#DDD',
-  textSubtle: '#EEEEEE',
-  highlight: '#FFFBCC',
-  errorBackground: '#FFEBEE',
-  warningBackground: '#F59B23',
-  infoBackground: '#ebf5ff',
-  errorText: '#CA001B',
-  infoText: '#004e8a',
-  warningText: '#FEFEFE',
-  linkHover: '#2196F3',
-  link: '#0A6EBE',
-  gold: yellow.A700,
-  sidebar: '#424242',
 });

packages/theme/src/types.ts

@@ -63,3 +63,11 @@ export interface BackstageTheme extends Theme {
 export interface BackstageThemeOptions extends ThemeOptions {
   palette: BackstagePaletteOptions;
 }
+
+/**
+ * A simpler configuration for creating a new theme that just tweaks some parts of the backstage one.
+ */
+export type SimpleThemeOptions = {
+  palette: BackstagePaletteOptions;
+  fontFamily?: string;
+};