import { createMuiTheme } from '@material-ui/core/styles' ; import createSpacing from '@material-ui/core/styles/createSpacing' ; import { CSSProperties } from '@material-ui/core/styles/withStyles' ; import { TypographyProps } from '@material-ui/core/Typography' ; import "typeface-inter" ; import "typeface-roboto-mono" ; import colors from './colors' ; import * as React from "react" ; const spacing = 10 ; declare module '@material-ui/core/styles/createMuiTheme' { interface Theme { monotype : { fontFamily : React . CSSProperties [ 'fontFamily' ] ; fontWeight : React . CSSProperties [ 'fontWeight' ] ; } ; } interface ThemeOptions { monotype ? : { fontFamily ? : React . CSSProperties [ 'fontFamily' ] ; fontWeight ? : React . CSSProperties [ 'fontWeight' ] ; } ; } } const theme = { emeraldColors : colors , palette : { error : { main : colors . ruby } , primary : colors . emerald , secondary : colors . ash , divider : colors . conch . main , background : { default : colors . snow } , action : { selected : colors . snow , hover : 'none' } , text : { primary : colors . coal , secondary : colors . ash . main } } , spacing : createSpacing ( spacing ) , root : { fontFamily : [ 'Inter' , 'sans-serif' ] . join ( ',' ) } , typography : { fontSize : 16 , fontWeightLight : 300 , fontWeightRegular : 400 , fontWeightMedium : 400 , fontFamily : [ 'Inter' , 'sans-serif' ] . join ( ',' ) } , monotype : { fontFamily : [ '"Roboto Mono"' , 'monospace' ] . join ( ',' ) , fontWeight : 500 } , mixins : { } , overrides : { MuiFormControl : { root : { boxSizing : 'border-box' , paddingLeft : spacing , paddingRight : spacing } as CSSProperties } , MuiFormHelperText : { root : { position : 'absolute' , bottom : - ( spacing * 3 ) } as CSSProperties } , MuiTextField : { root : { borderRadius : '1px' , borderStyle : 'solid' , borderWidth : '1px' , borderColor : colors . conch . main } as CSSProperties } , MuiButton : { root : { color : colors . emerald . main , borderRadius : 0 , minHeight : spacing * 4 } , contained : { color : colors . white . main , backgroundColor : colors . emerald . main , boxShadow : 'none' } } , MuiToolbar : { gutters : { paddingLeft : spacing * 3 , paddingRight : spacing * 3 } } , MuiInputAdornment : { root : { maxHeight : 'none' } } , MuiInput : { root : { minHeight : spacing * 5 } } , MuiAppBar : { root : { boxShadow : 'none' } , colorDefault : { backgroundColor : colors . white . main } } , MuiList : { root : { borderTop : `1px solid ${ colors . conch . main }` } , padding : { paddingTop : 0 , paddingBottom : 0 } } , MuiListItem : { root : { borderBottom : `1px solid ${ colors . conch . main }` , borderRight : 'none' , borderLeft : 'none' } } , MuiPaper : { root : { border : `1px solid ${ colors . conch . main }` } , elevation3 : { boxShadow : "0px 0px 50px rgba(0, 0, 0, 0.1)" } } , MuiMenuItem : { root : { 'cursor' : 'pointer' , 'padding' : `${ spacing / 2 }px ${ spacing * 8 }px ${ spacing / 2 }px ${ spacing * 4 }px` , 'border' : 'none' , 'lineHeight' : `${ spacing * 2 }px` , 'marginLeft' : spacing / 2 , 'height' : 'auto' , '&$selected' : { marginLeft : '0' , borderLeft : `${ spacing / 2 }px solid ${ colors . emerald . main }` } } } , MuiTypography : { gutterBottom : { marginBottom : spacing * 4 } , paragraph : { marginBottom : spacing * 2 } } , MuiCardHeader : { action : { width : "100%" , marginRight : "0" } } , MuiCardActions : { root : { float : 'right' as 'right' , paddingRight : "16px" , paddingBottom : "16px" } } , MuiStepLabel : { label : { fontSize : "0.8em" } } , MuiSkeleton : { root : { backgroundColor : colors . ash . main } , text : { transform : "none" , fontSize : "0.8em" } } } , props : { MuiTypography : { color : 'secondary' } as Partial < TypographyProps > , MuiInput : { disableUnderline : true } , MuiPaper : { square : true , elevation : 0 } , MuiList : { disablePadding : true } } } ; export default createMuiTheme ( theme ) ;