import { fonts } from './fonts' ; import { getContrastRatio } from './utils/colorManipulator' ; import { lightBlue , red , teal , orange , pink , blueGrey , yellow } from './palette' ; import typography , { fontSizes , fontWeights } from './typography' ; const space = [ 0 , 4 , 8 , 16 , 24 , 32 , 40 , 48 , 56 , 64 , 72 , 80 ] ; const contrastThreshold = 3 ; const colors = { accent : '#651FFF' , dark : '#000' , light : '#FFFFFF' , primary : { main : '#1C254D' , light : '#222C59' , lighter : '#2C3A73' , dark : '#111B48' , contrastText : '#FFFFFF' , } , secondary : { main : '#512FC9' , light : '#651FFF' , dark : '#354AA4' , contrastText : '#FFFFFF' , } , text : { primary : 'rgba(255,255,255,0.87)' , secondary : 'rgba(255, 255, 255, 0.56)' , placeholder : 'rgba(255, 255, 255, 0.24)' , disabled : 'rgba(0, 0, 0, 0.24)' , hint : 'rgba(0, 0, 0, 0.24)' , onLight : '#324148' , onDark : 'rgba(255, 255, 255, 0.87)' , } , grey : { ... blueGrey , } , error : { light : red [ 'A200' ] , dark : red [ 'A700' ] , main : red [ 'A400' ] , } , action : { active : '#FFFFFF' , hover : 'rgba(255, 255, 255, 0.1)' , hoverOpacity : 0.1 , selected : 'rgba(255, 255, 255, 0.2)' , disabled : 'rgba(255, 255, 255, 0.3)' , disabledBackground : 'rgba(255, 255, 255, 0.12)' , } , subtle : blueGrey [ 50 ] , link : lightBlue [ 500 ] , bgTerminal : '#010B1C' , danger : pink . A400 , highlight : yellow [ 50 ] , disabled : blueGrey [ 500 ] , info : lightBlue [ 600 ] , warning : orange . A400 , success : teal . A700 , } ; const borders = [ 0 , '1px solid' , '2px solid' , '4px solid' , '8px solid' , '16px solid' , '32px solid' , ] ; const theme = { colors , typography , font : fonts . sansSerif , fonts : fonts , fontWeights , fontSizes , space , borders , radii : [ 0 , 2 , 4 , 8 , 16 , 9999 , '100%' ] , regular : fontWeights . regular , bold : fontWeights . bold , breakpoints : [ ] , } ; export default theme ; export function getContrastText ( background ) { const contrastText = getContrastRatio ( background , colors . light ) >= contrastThreshold ? colors . light : colors . dark ; return contrastText ; }