Proyectos de Subversion LeadersLinked - SPA

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

import { typography, typographyStyles } from './components/typography';
import { shape } from './components/shape';
import { shadows } from './components/shadows';

import { accordionStyles } from './components/accordion';
import { listStyles } from './components/list';
import { menuStyles } from './components/menu';
import { tabsStyles } from './components/tabs';
import { inputStyles } from './components/input';
import { rootSelectStyles, selectSelectStyles } from './components/select';

import colors from './config/colors';

export const defaultTheme = createTheme({
  typography,
  shadows,
  shape,
  spacing: 8,
  components: {
    MuiTypography: { styleOverrides: typographyStyles },
    MuiButton: {
      styleOverrides: {
        root: ({ theme }) => ({
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: theme.spacing(0.5),
          fontFamily: "'Source Sans 3', sans-serif",
          lineHeight: 1.25,
          borderWidth: 0,
          borderRadius: '30px',
          color: colors.font.primary,
          cursor: 'pointer',
          textAlign: 'center',
          textTransform: 'capitalize',
          '&:disabled': { opacity: 0.5 },
          '& > svg': { color: 'currentColor' }
        }),
        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'
        }
      }
    },
    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
        },
        colorSecondary: {
          backgroundColor: colors.button.background.primary,
          color: colors.button.text.primary,
          '&:hover': {
            backgroundColor: colors.button.background.primary,
            opacity: 0.9
          }
        }
      }
    },
    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
      }
    }
  }
});