import type { PaletteMode , ThemeOptions } from '@mui/material' ; import type { Color } from './constants' ; function css_var < T extends Record < string , unknown > > ( unique_name , keys ) { for ( const k in keys ) keys [ k ] = createVar ( k ) as any ; return keys as any ; function createVar ( name ) { const val = '--' + unique_name + '-' + name ; function use ( defaultValue ? ) { return `var(${ val }${ typeof defaultValue === 'undefined' ? '' : ', ' + defaultValue })` ; } use . toString = ( ) => val ; return use ; } } type Theme = ThemeOptions | ( ( mode : PaletteMode , colors : Color ) => ThemeOptions ) ; export const BaseLine = ( mode , colors ) : ThemeOptions => ( { components : { MuiCssBaseline : { styleOverrides : { body : { scrollbarColor : 'red' , '&::-webkit-scrollbar, & *::-webkit-scrollbar' : { width : '10px' , } , '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb' : { borderRadius : '6px' , border : '2px solid rgba(0, 0, 0, 0)' , backgroundColor : mode === 'dark' ? 'rgba(250, 250, 250, 0.2)' : 'rgba(0, 0, 0, 0.2)' , backgroundClip : 'padding-box' , } , } , } , } , } , } ) ; export const Grid = { components : { MuiGrid : { } } , } ; const button = css_var ( 'm-button' , { main : 1 , contrast : 1 , light : 1 } ) ; export const Button = ( mode , colors ) : ThemeOptions => ( { components : { MuiButton : { defaultProps : { disableElevation : true } , styleOverrides : { root : { opacity : 1 , fontWeight : 400 , transitionProperty : 'background-color, color, box-shadow, opacity' , '&:hover' : { boxShadow : '0 0 5px ' + button . main ( ) } , '&[disabled]' : { opacity : 0.5 } , } , } , variants : [ { props : { variant : 'rounded' } , style : { borderRadius : '24px' , backgroundColor : button . main ( ) , color : button . contrast ( ) , '&:hover' : { backgroundColor : button . main ( ) } , '&[disabled]' : { backgroundColor : button . main ( ) , color : button . contrast ( ) } , } , } , { props : { variant : 'contained' } , style : { backgroundColor : button . main ( ) , color : button . contrast ( ) , '&:hover' : { backgroundColor : button . main ( ) } , '&[disabled]' : { backgroundColor : button . main ( ) , color : button . contrast ( ) } , } , } , { props : { variant : 'outlined' } , style : { borderColor : button . light ( ) , color : button . main ( ) , '&:hover' : { borderColor : button . light ( ) } , '&[disabled]' : { borderColor : button . light ( ) , color : button . main ( ) } , } , } , { props : { variant : 'text' } , style : { '&:hover' : { boxShadow : 'unset' } } } , { props : { color : 'primary' } , style : { [ button . main ] : colors . primary , [ button . contrast ] : colors . primaryContrastText } , } , { props : { color : 'secondary' } , style : { [ button . main ] : colors . secondary , [ button . contrast ] : colors . secondaryContrastText } , } , { props : { color : 'secondary' , variant : 'outlined' } , style : { [ button . light ] : colors . secondary , [ button . main ] : colors . primary } , } , { props : { color : 'error' } , style : { [ button . main ] : colors . redMain , [ button . contrast ] : colors . primaryContrastText } , } , { props : { color : 'warning' } , style : { [ button . main ] : colors . warning , [ button . contrast ] : colors . primaryContrastText } , } , { props : { size : 'small' } , style : { height : '28px' , fontSize : '12px' } , } , { props : { size : 'medium' } , style : { height : '38px' , fontSize : '14px' } , } , { props : { size : 'large' } , style : { height : '48px' , fontSize : '16px' } , } , ] , } , } , } ) ; export const Dialog = ( mode , colors ) : ThemeOptions => ( { components : { MuiDialog : { styleOverrides : { root : { '& .dashboard-style' : { backgroundColor : mode === 'dark' ? colors . primaryBackground : colors . secondaryBackground , } , '& .dashboard.token-list' : { padding : 10 , } , '& .dashboard.token-list-symbol' : { color : mode === 'dark' ? 'rgba(255, 255, 255, 0.8)' : '#7B8192' , fontSize : 12 , } , } , paper : { minHeight : 200 , minWidth : 440 , background : colors . mainBackground } , } , defaultProps : { BackdropProps : { sx : { backdropFilter : 'blur(8px)' , backgroundColor : 'rgba(0, 0, 0, 0.3)' , } , } , } , } , MuiDialogTitle : { styleOverrides : { root : { backgroundColor : colors . mainBackground , '&.dashboard-dialog-title-hook' : { backgroundColor : colors . mainBackground , display : 'flex' , flexDirection : 'row-reverse' , alignItems : 'center' , p : { width : '100%' , display : 'inline-flex' , justifyContent : 'start' , } , } , } , } , } , MuiDialogContent : { styleOverrides : { root : { backgroundColor : colors . mainBackground , } , } , } , MuiDialogActions : { styleOverrides : { root : { justifyContent : 'center' , paddingBottom : 24 , '&>:not(:first-of-type)' : { marginLeft : 18 } , backgroundColor : colors . mainBackground , } , } , } , } , } ) ; export const TextField = { components : { MuiFilledInput : { styleOverrides : { underline : { '&:before' : { display : 'none' } , } , } , } , MuiFormHelperText : { styleOverrides : { contained : { paddingLeft : 14 , paddingRight : 14 , marginLeft : 0 , marginRight : 0 , borderLeft : '2px solid' , } , root : { } , } , } , } , } ; export const List = ( mode , colors ) => ( { components : { MuiListItem : { styleOverrides : { button : { '&:hover' : mode === 'light' ? { backgroundColor : '#f5fcff' } : { } , } , } , } , } , } ) ; export const Card = ( mode , colors ) => ( { components : { MuiCard : { styleOverrides : { } , variants : [ { props : { variant : 'outlined' } , style : { border : `1px solid ${ colors . lineLight }` , } , } , { props : { variant : 'background' } , style : { padding : 8 , border : 'none' , background : mode === 'dark' ? colors . lightBackground : colors . normalBackground , } , } , ] , } , } , } ) ; export const Paper = ( mode , colors ) => ( { components : { MuiPaper : { styleOverrides : { } , variants : [ { props : { variant : 'outlined' } , style : { borderRadius : 12 , } , } , { props : { variant : 'rounded' } , style : { borderRadius : 16 , backgroundColor : colors . primaryBackground , } , } , ] , } , } , } ) ; export const Tabs = ( ) => ( { components : { MuiTab : { styleOverrides : { root : { '@media screen and (min-width: 600px)' : { minWidth : 160 , } , } , } , } , } , } ) ; export const Link = ( ) => ( { components : { MuiLink : { defaultProps : { underline : 'hover' } } , } , } ) ; export const Typography = ( mode , colors ) => ( { components : { MuiTypography : { styleOverrides : { } , variants : [ { props : { variant : 'h3' } , style : { fontSize : 24 , lineHeight : '30px' , color : colors . textPrimary , } , } , { props : { variant : 'h4' } , style : { fontSize : 18 , lineHeight : '24px' , fontStyle : 'normal' , color : colors . textPrimary , } , } , { props : { variant : 'h5' } , style : { fontSize : 16 , lineHeight : '22px' , color : colors . textPrimary , } , } , { props : { variant : 'body2' , paragraph : true } , style : { fontSize : 14 , color : colors . textSecondary , } , } , { props : { variant : 'body2' , component : 'span' } , style : { fontSize : 12 , color : colors . textSecondary , lineHeight : '16px' , } , } , ] , } , } , } ) ;