import { DefaultTheme } from 'styled-components' ; import { allGradients , borderRadii , boxShadows , darkGrayColors , darkPrimaryColors , darkUtilityColors , fontSizes , fontWeights , lightGrayColors , lightPrimaryColors , lightUtilityColors , portfolioStyles , responsiveBreakPoints , spacing , zIndexes , } from './system-design-variables' ; function returns { { darkTheme , lightTheme } } export const useSystemDesign = ( ) : { darkTheme : DefaultTheme ; lightTheme : DefaultTheme ; } => { const darkTheme = { mode : 'dark' , primary : darkPrimaryColors , gray : darkGrayColors , colors : darkUtilityColors , gradients : allGradients , boxShadow : boxShadows , borderRadius : borderRadii . main , zIndex : zIndexes , fontSize : fontSizes , fontWeight : fontWeights , space : spacing , media : responsiveBreakPoints , portfolio : portfolioStyles , } ; const lightTheme = { mode : 'light' , primary : lightPrimaryColors , gray : lightGrayColors , colors : lightUtilityColors , gradients : allGradients , boxShadow : boxShadows , borderRadius : borderRadii . main , zIndex : zIndexes , fontSize : fontSizes , fontWeight : fontWeights , space : spacing , media : responsiveBreakPoints , portfolio : portfolioStyles , } ; return { darkTheme , lightTheme } ; } ;