paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 49 Packages Projects Releases Wiki Activity

packages/theme: remove color schemes and provide full palette for themes instead

Browse Source
This commit is contained in:
Patrik Oldsberg
2020-04-16 01:19:37 +02:00
parent dd4acb71a8
commit 615597ee87
3 changed files with 82 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/theme/src/baseTheme.ts
+7 -48
View File
@@ -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<BackstageTheme['overrides']>;
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 };
packages/theme/src/themes.ts
+75 -30
View File
@@ -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',
});
packages/theme/src/types.ts
-17
View File
@@ -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;