Proyectos de Subversion LeadersLinked - SPA

import { createTheme } from '@mui/material';

import { accordionStyles } from './components/accordion';
import { listStyles } from './components/list';
import {
  fontFamilyPrimary,
  heading1Styles,
  heading2Styles,
  heading3Styles,
  heading4Styles,
  overlineStyles,
  paragraphStyles,
  typographyStyles
} from './components/typography';
import { menuStyles } from './components/menu';
import { tabsStyles } from './components/tabs';
import { inputStyles } from './components/input';

import colors from './config/colors';
import { rootSelectStyles, selectSelectStyles } from './components/select';

export const defaultTheme = createTheme({
  typography: {
    htmlFontSize: 14,
    fontFamily: fontFamilyPrimary,
    h1: heading1Styles,
    h2: heading2Styles,
    h3: heading3Styles,
    h4: heading4Styles,
    body1: paragraphStyles,
    body2: paragraphStyles,
    overline: overlineStyles
  },
  shape: { borderRadius: 10 },
  shadows: { 1: 'rgba(0, 0, 0, 0.2) 1px 1px 1px -1px, rgba(0, 0, 0, 0.2) 1px 2px 4px' },
  spacing: 12,
  components: {
    MuiFormControl: {
      styleOverrides: {
        root: {
          '&:not(:last-child)': {
            marginBottom: '1rem'
          }
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: ({ theme }) => ({
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: theme.spacing(0.5),
          padding: theme.spacing(0.33, 1),
          lineHeight: 1.25,
          borderWidth: 0,
          borderRadius: '30px',
          color: colors.font.primary,
          cursor: 'pointer',
          textAlign: 'center',
          textTransform: 'capitalize',
          '&:disabled': {
            cursor: 'no-drop',
            backgroundColor: '#dddddd',
            color: '#a3a1a1'
          },
          '&>svg': {
            color: 'currentColor',
            fontSize: '1.3rem'
          }
        }),
        containedPrimary: {
          backgroundColor: colors.button.background.primary,
          color: colors.button.text.primary,
          ':hover': {
            backgroundColor: colors.button.background.primary,
            opacity: 0.9
          }
        },
        containedSecondary: {
          backgroundColor: colors.button.background.secondary,
          color: colors.button.text.secondary,
          ':hover': {
            backgroundColor: colors.button.background.secondary,
            opacity: 0.9
          }
        },
        containedInfo: {
          backgroundColor: colors.button.background.tertiary,
          color: colors.button.text.tertiary,
          ':hover': {
            backgroundColor: colors.button.background.tertiary,
            opacity: 0.9
          }
        },
        containedInherit: {
          backgroundColor: 'transparent',
          color: 'rgba(0, 0, 0, 0.54)',
          ':hover': {
            backgroundColor: 'rgba(0, 0, 0, 0.04)'
          }
        }
      },
      defaultProps: { variant: 'contained', color: 'inherit' }
    },
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: colors.main
        }
      }
    },
    MuiPaper: {
      styleOverrides: {
        root: ({ theme }) => ({
          boxShadow: theme.shadows[1],
          backgroundColor: colors.main
        })
      }
    },
    MuiAccordion: {
      styleOverrides: {
        root: accordionStyles
      }
    },
    MuiFormLabel: {
      styleOverrides: {
        root: {
          fontWeight: 'bold',
          color: colors.font.primary
        }
      }
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          position: 'relative',
          top: 'auto',
          left: 'auto',
          transform: 'none'
        }
      }
    },
    MuiInputBase: {
      styleOverrides: {
        root: inputStyles,
        colorSecondary: {
          backgroundColor: colors.main
        }
      },
      variants: [
        {
          props: { variant: 'search' },
          style: { borderRadius: 20 }
        }
      ],
      defaultProps: {
        size: 'small'
      }
    },
    MuiSelect: {
      styleOverrides: {
        root: rootSelectStyles,
        select: selectSelectStyles
      }
    },
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          display: 'none'
        }
      }
    },
    MuiTypography: {
      styleOverrides: {
        root: typographyStyles
      }
    },
    MuiList: {
      styleOverrides: {
        root: listStyles
      }
    },
    MuiMenu: {
      styleOverrides: {
        root: menuStyles
      }
    },
    MuiSvgIcon: {
      defaultProps: { fontSize: 'small' }
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: colors.main,
          boxShadow: 1,
          zIndex: 50
        }
      }
    },
    MuiCard: {
      styleOverrides: {
        root: {
          boxShadow: 'none',
          position: 'relative',
          borderRadius: {
            xs: 0,
            sm: 10
          },
          backgroundColor: colors.main
        }
      }
    },
    MuiIconButton: {
      styleOverrides: {
        root: {
          color: colors.icon.primary
        }
      }
    },
    MuiLinearProgress: {
      styleOverrides: {
        root: {
          backgroundColor: colors.main,
          borderRadius: 10,
          flex: 1,
          '& .MuiLinearProgress-bar': {
            backgroundColor: colors.button.background.primary,
            borderRadius: 10
          }
        }
      }
    },
    MuiCardActions: {
      styleOverrides: {
        root: {
          padding: '0.5rem',
          justifyContent: 'space-around',
          gap: '0.5rem',
          '& > button': { flex: 1, flexWrap: 'wrap' },
          borderTop: `1px solid ${colors.border.primary}`
        }
      }
    },
    MuiCardHeader: {
      styleOverrides: {
        avatar: ({ theme }) => ({
          marginRight: theme.spacing(0.5)
        })
      }
    },
    MuiAvatarGroup: {
      styleOverrides: {
        root: {
          flexDirection: 'row',
          '& .MuiAvatar-root:last-child': {
            marginLeft: '-8px'
          }
        }
      }
    },
    MuiChip: {
      styleOverrides: {
        root: {
          backgroundColor: colors.button.background.primary
        },
        label: {
          color: colors.button.text.primary
        }
      }
    },
    MuiTabs: {
      styleOverrides: {
        root: tabsStyles
      }
    }
  }
});