diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 998442fe10..d924ae171c 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -16,20 +16,20 @@ import { createMuiTheme } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; -import { blue, yellow } from '@material-ui/core/colors'; + import { BackstageTheme, BackstageThemeOptions, - BackstageColorScheme, + BackstagePaletteOptions, } from './types'; type Overrides = Partial; export function createThemeOptions( - type: 'light' | 'dark', - colors: BackstageColorScheme, + palette: BackstagePaletteOptions, ): BackstageThemeOptions { return { + palette, props: { MuiGrid: { spacing: 2, @@ -38,44 +38,6 @@ export function createThemeOptions( color: 'primary', }, }, - palette: { - type, - background: { - default: colors.PAGE_BACKGROUND, - }, - status: { - ok: colors.STATUS_OK, - warning: colors.STATUS_WARNING, - error: colors.STATUS_ERROR, - running: '#BEBEBE', - pending: '#5BC0DE', - background: colors.NAMED_WHITE, - }, - bursts: { - fontColor: colors.NAMED_WHITE, - slackChannelText: '#ddd', - backgroundColor: { - default: colors.DEFAULT_PAGE_THEME_COLOR, - }, - }, - primary: { - main: blue[500], - }, - border: '#E6E6E6', - textVerySubtle: '#DDD', - textSubtle: '#6E6E6E', - highlight: '#FFFBCC', - errorBackground: colors.ERROR_BACKGROUND_COLOR, - warningBackground: '#F59B23', - infoBackground: '#ebf5ff', - errorText: colors.ERROR_TEXT_COLOR, - infoText: colors.INFO_TEXT_COLOR, - warningText: colors.NAMED_WHITE, - linkHover: colors.LINK_TEXT_HOVER, - link: colors.LINK_TEXT, - gold: yellow.A700, - sidebar: colors.SIDEBAR_BACKGROUND_COLOR, - }, typography: { fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif', h5: { @@ -225,13 +187,10 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides { }; } -// Creates a Backstage MUI theme using a color scheme. +// Creates a Backstage MUI theme using a palette. // The theme is created with the common Backstage options and component styles. -export function createTheme( - type: 'light' | 'dark', - colors: BackstageColorScheme, -): BackstageTheme { - const themeOptions = createThemeOptions(type, colors); +export function createTheme(palette: BackstagePaletteOptions): BackstageTheme { + const themeOptions = createThemeOptions(palette); 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 1cb824bceb..eb36a37bf5 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -15,37 +15,82 @@ */ import { createTheme } from 'baseTheme'; +import { blue, yellow } from '@material-ui/core/colors'; -export const lightTheme = createTheme('light', { - TEXT_COLOR: '#000', - PAGE_BACKGROUND: '#F8F8F8', - DEFAULT_PAGE_THEME_COLOR: '#7C3699', - DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2', - SIDEBAR_BACKGROUND_COLOR: '#171717', - ERROR_BACKGROUND_COLOR: '#FFEBEE', - ERROR_TEXT_COLOR: '#CA001B', - INFO_TEXT_COLOR: '#004e8a', - LINK_TEXT: '#0A6EBE', - LINK_TEXT_HOVER: '#2196F3', - NAMED_WHITE: '#FEFEFE', - STATUS_OK: '#1db855', - STATUS_WARNING: '#f49b20', - STATUS_ERROR: '#CA001B', +export const lightTheme = createTheme({ + type: 'light', + background: { + default: '#F8F8F8', + }, + status: { + ok: '#1db855', + warning: '#f49b20', + error: '#CA001B', + running: '#BEBEBE', + pending: '#5BC0DE', + background: '#FEFEFE', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + }, + primary: { + main: blue[500], + }, + border: '#E6E6E6', + 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('dark', { - TEXT_COLOR: '#fff', - PAGE_BACKGROUND: '#282828', - DEFAULT_PAGE_THEME_COLOR: '#7C3699', - DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2', - SIDEBAR_BACKGROUND_COLOR: '#424242', - ERROR_BACKGROUND_COLOR: '#FFEBEE', - ERROR_TEXT_COLOR: '#CA001B', - INFO_TEXT_COLOR: '#004e8a', - LINK_TEXT: '#0A6EBE', - LINK_TEXT_HOVER: '#2196F3', - NAMED_WHITE: '#FEFEFE', - STATUS_OK: '#1db855', - STATUS_WARNING: '#f49b20', - STATUS_ERROR: '#CA001B', +export const darkTheme = createTheme({ + type: 'dark', + background: { + default: '#282828', + }, + status: { + ok: '#1db855', + warning: '#f49b20', + error: '#CA001B', + running: '#BEBEBE', + pending: '#5BC0DE', + background: '#FEFEFE', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + }, + primary: { + main: blue[500], + }, + border: '#E6E6E6', + 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: '#424242', }); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 8f16f6bdd7..f0e43c54d1 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -20,23 +20,6 @@ import { Palette, } from '@material-ui/core/styles/createPalette'; -export type BackstageColorScheme = { - TEXT_COLOR: string; - PAGE_BACKGROUND: string; - DEFAULT_PAGE_THEME_COLOR: string; - DEFAULT_PAGE_THEME_LIGHT_COLOR: string; - SIDEBAR_BACKGROUND_COLOR: string; - ERROR_BACKGROUND_COLOR: string; - ERROR_TEXT_COLOR: string; - INFO_TEXT_COLOR: string; - LINK_TEXT: string; - LINK_TEXT_HOVER: string; - NAMED_WHITE: string; - STATUS_OK: string; - STATUS_WARNING: string; - STATUS_ERROR: string; -}; - type PaletteAdditions = { status: { ok: string;