X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/2d2d42308a636998aa7f10e01283722e30ab20f5..b2fcdb2fac8ba49fecca5c30fc56e63b71746cf3:/src/common/custom-theme.ts diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index fc89a4ae..df848642 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -12,177 +12,177 @@ import red from '@material-ui/core/colors/red'; import teal from '@material-ui/core/colors/teal'; export interface ArvadosThemeOptions extends ThemeOptions { - customs: any; + customs: any; } export interface ArvadosTheme extends Theme { - customs: { - colors: Colors - }; + customs: { + colors: Colors; + }; } interface Colors { - green700: string; - yellow100: string; - yellow700: string; - yellow900: string; - red100: string; - red900: string; - blue500: string; - grey500: string; - purple: string; - orange: string; + green700: string; + yellow100: string; + yellow700: string; + yellow900: string; + red100: string; + red900: string; + blue500: string; + grey500: string; + purple: string; + orange: string; } const arvadosPurple = '#361336'; -const grey500 = grey["500"]; -const grey600 = grey["600"]; -const grey700 = grey["700"]; -const grey900 = grey["900"]; +const grey500 = grey['500']; +const grey600 = grey['600']; +const grey700 = grey['700']; +const grey900 = grey['900']; export const themeOptions: ArvadosThemeOptions = { - typography: { - useNextVariants: true, - }, - customs: { - colors: { - green700: green["700"], - yellow100: yellow["100"], - yellow700: yellow["700"], - yellow900: yellow["900"], - red100: red["100"], - red900: red['900'], - blue500: blue['500'], - grey500: grey500, - purple: arvadosPurple, - orange: '#f0ad4e', - } - }, - overrides: { - MuiTypography: { - body1: { - fontSize: '0.8125rem' - } - }, - MuiAppBar: { - colorPrimary: { - backgroundColor: arvadosPurple - } - }, - MuiTabs: { - root: { - color: grey600 - }, - indicator: { - backgroundColor: arvadosPurple - } - }, - MuiTab: { - root: { - '&$selected': { - fontWeight: 700, - color: arvadosPurple - } - } - }, - MuiList: { - root: { - color: grey900 - } - }, - MuiListItemText: { - root: { - padding: 0 - } - }, - MuiListItemIcon: { - root: { - fontSize: '1.25rem' - } - }, - MuiCardHeader: { - avatar: { - display: 'flex', - alignItems: 'center' - }, - title: { - color: grey700, - fontSize: '1.25rem' - } + typography: { + useNextVariants: true, + }, + customs: { + colors: { + green700: green['700'], + yellow100: yellow['100'], + yellow700: yellow['700'], + yellow900: yellow['900'], + red100: red['100'], + red900: red['900'], + blue500: blue['500'], + grey500: grey500, + purple: arvadosPurple, + orange: '#f0ad4e', + }, + }, + overrides: { + MuiTypography: { + body1: { + fontSize: '0.8125rem', + }, + }, + MuiAppBar: { + colorPrimary: { + backgroundColor: arvadosPurple, + }, + }, + MuiTabs: { + root: { + color: grey600, + }, + indicator: { + backgroundColor: arvadosPurple, + }, + }, + MuiTab: { + root: { + '&$selected': { + fontWeight: 700, + color: arvadosPurple, }, - MuiExpansionPanel: { - expanded: { - marginTop: '8px', - } + }, + }, + MuiList: { + root: { + color: grey900, + }, + }, + MuiListItemText: { + root: { + padding: 0, + }, + }, + MuiListItemIcon: { + root: { + fontSize: '1.25rem', + }, + }, + MuiCardHeader: { + avatar: { + display: 'flex', + alignItems: 'center', + }, + title: { + color: grey700, + fontSize: '1.25rem', + }, + }, + MuiExpansionPanel: { + expanded: { + marginTop: '8px', + }, + }, + MuiExpansionPanelDetails: { + root: { + marginBottom: 0, + paddingBottom: '4px', + }, + }, + MuiExpansionPanelSummary: { + content: { + '&$expanded': { + margin: 0, }, - MuiExpansionPanelDetails: { - root: { - marginBottom: 0, - paddingBottom: '4px', - } + color: grey700, + fontSize: '1.25rem', + margin: 0, + }, + expanded: {}, + }, + MuiMenuItem: { + root: { + padding: '8px 16px', + }, + }, + MuiInput: { + root: { + fontSize: '0.875rem', + }, + underline: { + '&:after': { + borderBottomColor: arvadosPurple, }, - MuiExpansionPanelSummary: { - content: { - '&$expanded': { - margin: 0, - }, - color: grey700, - fontSize: '1.25rem', - margin: 0, - }, - expanded: {}, + '&:hover:not($disabled):not($focused):not($error):before': { + borderBottom: '1px solid inherit', }, - MuiMenuItem: { - root: { - padding: '8px 16px' - } + }, + }, + MuiFormLabel: { + root: { + fontSize: '0.875rem', + '&$focused': { + '&$focused:not($error)': { + color: arvadosPurple, + }, }, - MuiInput: { - root: { - fontSize: '0.875rem' - }, - underline: { - '&:after': { - borderBottomColor: arvadosPurple - }, - '&:hover:not($disabled):not($focused):not($error):before': { - borderBottom: '1px solid inherit' - } - } + }, + }, + MuiStepIcon: { + root: { + '&$active': { + color: arvadosPurple, }, - MuiFormLabel: { - root: { - fontSize: '0.875rem', - "&$focused": { - "&$focused:not($error)": { - color: arvadosPurple - } - } - } + '&$completed': { + color: 'inherited', }, - MuiStepIcon: { - root: { - '&$active': { - color: arvadosPurple - }, - '&$completed': { - color: 'inherited' - }, - } - } - }, - mixins: { - toolbar: { - minHeight: '48px' - } - }, - palette: { - primary: { - main: teal.A700, - dark: teal.A400, - contrastText: '#fff' - } + }, + }, + }, + mixins: { + toolbar: { + minHeight: '48px', + }, + }, + palette: { + primary: { + main: teal.A700, + dark: teal.A400, + contrastText: '#fff', }, + }, }; -export const CustomTheme = createMuiTheme(themeOptions); \ No newline at end of file +export const CustomTheme = createMuiTheme(themeOptions);