import React , { useMemo } from 'react' ; import styled , { ThemeProvider as StyledComponentsThemeProvider , createGlobalStyle , css , DefaultTheme , } from 'styled-components' ; import { useIsDarkMode } from '../state/user/hooks' ; import { Text , TextProps } from 'rebass' ; import { Colors } from './styled' ; export * from './components' ; export const MEDIA_WIDTHS = { upToExtraSmall : 500 , upToSmall : 720 , upToMedium : 960 , upToLarge : 1280 , } ; const mediaWidthTemplates = Object . keys ( MEDIA_WIDTHS ) . reduce ( ( accumulator , size ) => { ; ( accumulator as any ) [ size ] = ( a , b , c ) => css `
      @media (max-width: ${ ( MEDIA_WIDTHS as any ) [ size ] }px) {
        ${ css ( a , b , c ) }
      }
    ` ; return accumulator ; } , { } ) as any ; const white = '#FFFFFF' ; const black = '#000000' ; export function colors ( darkMode ) { return { white , black , text1 : darkMode ? '#FFFFFF' : '#000000' , text2 : darkMode ? '#C3C5CB' : '#565A69' , text3 : darkMode ? '#6C7284' : '#888D9B' , text4 : darkMode ? '#565A69' : '#C3C5CB' , text5 : darkMode ? '#2C2F36' : '#EDEEF2' , bg0 : darkMode ? '#191B1F' : '#F7F8FA' , bg1 : darkMode ? '#1F2128' : '#FFFFFF' , bg2 : darkMode ? '#2C2F36' : '#F7F8FA' , bg3 : darkMode ? '#40444F' : '#EDEEF2' , bg4 : darkMode ? '#565A69' : '#CED0D9' , bg5 : darkMode ? '#6C7284' : '#888D9B' , modalBG : darkMode ? 'rgba(0,0,0,.425)' : 'rgba(0,0,0,0.3)' , advancedBG : darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)' , primary1 : darkMode ? '#2172E5' : '#ff007a' , primary2 : darkMode ? '#3680E7' : '#FF8CC3' , primary3 : darkMode ? '#4D8FEA' : '#FF99C9' , primary4 : darkMode ? '#376bad70' : '#F6DDE8' , primary5 : darkMode ? '#153d6f70' : '#FDEAF1' , primaryText1 : darkMode ? '#6da8ff' : '#ff007a' , secondary1 : darkMode ? '#2172E5' : '#ff007a' , secondary2 : darkMode ? '#17000b26' : '#F6DDE8' , secondary3 : darkMode ? '#17000b26' : '#FDEAF1' , pink1 : '#ff007a' , red1 : '#FD4040' , red2 : '#F82D3A' , red3 : '#D60000' , green1 : '#27AE60' , yellow1 : '#FFE270' , yellow2 : '#F3841E' , yellow3 : '#F3B71E' , blue1 : '#2172E5' , blue2 : '#5199FF' , } ; } export function theme ( darkMode ) { return { ... colors ( darkMode ) , grids : { sm : 8 , md : 12 , lg : 24 , } , shadow1 : darkMode ? '#000' : '#2F80ED' , mediaWidth : mediaWidthTemplates , flexColumnNoWrap : css `
      display: flex;
      flex-flow: column nowrap;
    ` , flexRowNoWrap : css `
      display: flex;
      flex-flow: row nowrap;
    ` , } ; } export default function ThemeProvider ( { children } ) { const darkMode = useIsDarkMode ( ) ; const themeObject = useMemo ( ( ) => theme ( darkMode ) , [ darkMode ] ) ; return < StyledComponentsThemeProvider theme = { themeObject } > { children } < /StyledComponentsThemeProvider>; } const TextWrapper = styled ( Text ) < { color : keyof Colors ; } > `
  color: ${ ( { color , theme } ) => ( theme as any ) [ color ] };
` ; export const TYPE = { main ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'text2' } { ... props } / > ; } , link ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'primary1' } { ... props } />; } , label ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'text1' } { ... props } />; } , black ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'text1' } { ... props } />; } , white ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'white' } { ... props } />; } , body ( props ) { return < TextWrapper fontWeight = { 400 } fontSize = { 16 } color = { 'text1' } { ... props } />; } , largeHeader ( props ) { return < TextWrapper fontWeight = { 600 } fontSize = { 24 } color = { 'text1' } { ... props } />; } , mediumHeader ( props ) { return < TextWrapper fontWeight = { 500 } fontSize = { 20 } color = { 'text3' } { ... props } />; } , subHeader ( props ) { return < TextWrapper fontWeight = { 400 } fontSize = { 14 } { ... props } />; } , small ( props ) { return < TextWrapper fontWeight = { 500 } fontSize = { 11 } { ... props } />; } , blue ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'blue1' } { ... props } />; } , yellow ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'yellow3' } { ... props } />; } , darkGray ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'text3' } { ... props } />; } , gray ( props ) { return < TextWrapper fontWeight = { 500 } color = { 'bg3' } { ... props } />; } , italic ( props ) { return < TextWrapper fontWeight = { 500 } fontSize = { 12 } fontStyle = { 'italic' } color = { 'text2' } { ... props } />; } , error ( { error , ... props } ) { return < TextWrapper fontWeight = { 500 } color = { error ? 'red1' : 'text2' } { ... props } />; } , } ; export const FixedGlobalStyle = createGlobalStyle `
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

 a {
   color: ${ colors ( false ) . blue1 }; 
 }

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
` ; export const ThemedGlobalStyle = createGlobalStyle `
html {
  color: ${ ( { theme } ) => theme . text1 };
  background-color: ${ ( { theme } ) => theme . bg1 };
}

.three-line-legend-dark {
	width: 100%;
	height: 70px;
	position: absolute;
	padding: 8px;
	font-size: 12px;
	color: white;
	background-color: transparent;
	text-align: left;
	z-index: 10;
  pointer-events: none;
}

.tv-lightweight-charts{
  width: 100% !important;
  
  & > * {
    width: 100% !important;
  }
}

body {
  min-height: 100vh;
  background-position: 0 -30vh;
  background-repeat: no-repeat;

}
` ;