diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 4a2216546f..bac67f4e47 100644 --- a/packages/theme/src/baseTheme.ts +++ b/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 }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 33cefe3283..ff86cca330 100644 --- a/packages/theme/src/themes.ts +++ b/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', }); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 82c717e433..d11b07d3fe 100644 --- a/packages/theme/src/types.ts +++ b/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; +};