Untitled

import { palette } from '@microlog/web/theme/base-theme/palette';
import { GlobalStylesProps } from '@mui/material/GlobalStyles';
import { createTheme, PaletteColorOptions, Theme } from '@mui/material/styles';

export const getGlobalStyles = (theme: Theme): GlobalStylesProps['styles'] => ({
  a: {
    textDecoration: 'none',
    color: theme.palette.primary.main,
  },
  'input[type=number]::-webkit-outer-spin-button': {
    WebkitAppearance: 'none',
    margin: 0,
  },
  'input[type=number]::-webkit-inner-spin-button': {
    WebkitAppearance: 'none',
    margin: 0,
  },
  'input[type=number]': {
    MozAppearance: 'textfield',
  },
});

export const createWebTheme = (primaryColor: PaletteColorOptions) => {
  const theme = createTheme({
    variables: {
      sidebarWidth: '96px',
      headerHeight: '96px',
      button: {
        height: {
          xl: '48px',
          lg: '40px',
          md: '32px',
          sm: '24px',
        },
        fontSize: {
          xl: '16px',
          lg: '15px',
          md: '14px',
          sm: '12px',
        },
      },
      input: {
        height: {
          large: '48px',
          default: '32px',
        },
        padding: {
          xl: '12px 16px',
          lg: '10px 12px',
          md: '7px 12px',
          sm: '3px 12px',
        },
      },
    },
    palette: {
      ...palette,
      primary: primaryColor,
    },
  });

  return createTheme({
    ...theme,
    typography: {
      fontFamily: 'Inter, sans-serif',
      h1: {
        fontSize: '56px',
        lineHeight: '64px',
        color: palette.text.primary,
        marginBottom: theme.spacing(2),
      },
      h2: {
        fontSize: '46px',
        lineHeight: '54px',
        color: palette.text.primary,
        marginBottom: theme.spacing(2),
      },
      h3: {
        fontSize: '24px',
        lineHeight: '32px',
        color: palette.text.primary,
        marginBottom: theme.spacing(1),
        [theme.breakpoints.up('sm')]: {
          fontSize: '38px',
          lineHeight: '46px',
          marginBottom: theme.spacing(2),
        },
      },
      h4: {
        fontSize: '30px',
        lineHeight: '38px',
        color: palette.text.primary,
      },
      h5: {
        fontSize: '24px',
        lineHeight: '32px',
        color: palette.text.primary,
      },
      h6: {
        fontSize: '20px',
        lineHeight: '24px',
        color: palette.text.primary,
      },
      subtitle1: {
        fontSize: '14px',
        lineHeight: '22px',
        color: palette.text.primary,
      },
      subtitle2: {
        fontSize: '12px',
        lineHeight: '20px',
        color: palette.text.primary,
      },
      body1: {
        fontSize: '14px',
        lineHeight: '21px',
        [theme.breakpoints.up('sm')]: {
          fontSize: '16px',
          lineHeight: '24px',
        },
        color: palette.text.primary,
      },
      body2: {
        fontSize: '16px',
        lineHeight: '24px',
        color: palette.text.primary,
      },
      label: {
        fontSize: '16px',
        fontWeight: '400',
        lineHeight: '24px',
        color: palette.grey[900],
        marginBottom: theme.spacing(1),
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontSize: '16px',
            textTransform: 'none',
            lineHeight: '24px',
            padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
          },
        },
        variants: [
          {
            props: {
              variant: 'contained',
            },
            style: {
              color: theme.palette.grey[100],
              background: theme.palette.primary[600],
              borderRadius: '4px',
              border: '1px solid transparent',
              boxShadow: 'none',
            },
          },
          {
            props: {
              variant: 'outlined',
            },
            style: {
              color: theme.palette.primary.main,
              background: 'transparent',
              borderRadius: '2px',
            },
          },
          {
            props: {
              variant: 'outlined-secondary',
            },
            style: {
              color: theme.palette.grey[900],
              background: 'transparent',
              border: `1px solid ${theme.palette.grey[500]}`,
              borderRadius: '4px',
              '&:hover, &:focus': {
                color: theme.palette.primary[500],
                background: 'transparent',
              },
              '&:active': {
                color: theme.palette.primary[700],
                background: 'transparent',
                border: `1px solid ${theme.palette.primary[700]}`,
              },
              '&:disabled': {
                background: theme.palette.grey[300],
                border: `1px solid ${theme.palette.grey[500]}`,
              },
            },
          },
          {
            props: { size: 'small' },
            style: {
              height: theme.variables.input.height.md,
              padding: `${theme.spacing(0.5)} ${theme.spacing(2)}`,
            },
          },
        ],
      },
      MuiTextField: {
        styleOverrides: {
          root: {
            width: '100%',
          },
        },
      },
      MuiInputBase: {
        variants: [
          {
            props: { size: 'large', multiline: false },
            style: {
              height: theme.variables.input.height.large,
              padding: theme.spacing(1.5),
            },
          },
          {
            props: { multiline: true },
            style: {
              height: 'auto',
            },
          },
        ],
        styleOverrides: {
          root: {
            borderRadius: '4px',
            color: palette.grey[900],
            fontSize: '16px',
            lineHeight: '24px',
            padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
            display: 'flex',
            alignItems: 'center',
            background: theme.palette.grey[100],
            height: theme.variables.input.height.default,
            '& .MuiInputBase-input': {
              padding: 0,
            },
            '&.Mui-disabled': {
              background: theme.palette.grey[300],
            },
            '& input::placeholder': {
              color: palette.grey[700],
              fontSize: '16px',
              lineHeight: '24px',
            },
            '&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
              border: `1px solid ${theme.palette.primary[500]}`,
              '&.Mui-error': {
                border: `1px solid ${theme.palette.error[500]}`,
              },
            },
            '&.MuiOutlinedInput-root:hover.Mui-error .MuiOutlinedInput-notchedOutline':
              {
                border: `1px solid ${theme.palette.error[500]}`,
              },
            '&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline':
              {
                border: `1px solid ${theme.palette.primary[600]}`,
                boxShadow: '0px 0px 4px 0px rgba(24, 144, 255, 0.50)',
              },
            '&.MuiOutlinedInput-root.Mui-focused.Mui-error .MuiOutlinedInput-notchedOutline':
              {
                border: `1px solid ${theme.palette.error[600]}`,
                boxShadow: '0px 0px 4px 0px rgba(245, 34, 45, 0.50)',
              },
          },
        },
      },
      MuiFormHelperText: {
        styleOverrides: {
          root: {
            marginLeft: 0,
            fontSize: '14px',
            fontWeight: 400,
            lineHeight: '22px',
            color: palette.error[600],
          },
        },
      },
      MuiDivider: {
        styleOverrides: {
          root: {
            borderColor: theme.palette.grey[500],
            marginTop: theme.spacing(4),
            marginBottom: theme.spacing(4),
            [theme.breakpoints.up('sm')]: {
              marginTop: theme.spacing(7),
              marginBottom: theme.spacing(7),
            },
          },
        },
      },
      MuiContainer: {
        styleOverrides: {
          root: {
            [theme.breakpoints.up('lg')]: {
              maxWidth: '1140px',
              padding: 0,
            },
            [theme.breakpoints.up('xl')]: {
              maxWidth: '1400px',
            },
          },
        },
      },
      MuiSelect: {
        variants: [
          {
            props: { variant: 'outlined' },
            style: {
              height: '48px',
            },
          },
          {
            props: { variant: 'standard' },
            style: {
              padding: `${theme.spacing(0)} 0 `,
              background: 'transparent',
              fontWeight: '700',
              color: palette.grey[900],
              border: 'none',
              '&::before': {
                display: 'none',
              },
              '&:active, &:hover': {
                '&::before': {
                  display: 'none',
                },
              },
              '&::after': {
                display: 'none',
              },
            },
          },
        ],
      },
      MuiTabs: {
        styleOverrides: {
          root: {
            marginBottom: theme.spacing(3),
            minHeight: 0,
            borderBottom: `1px solid ${theme.palette.grey[500]}`,
            '.MuiButtonBase-root': {
              padding: `${theme.spacing(1)} 0`,
              marginRight: theme.spacing(4),
              color: theme.palette.grey[900],
              fontWeight: 700,
              fontSize: '16px',
              lineHeight: '24px',
              textTransform: 'capitalize',
              minHeight: 0,
              '&.Mui-selected': {
                color: 'inherit',
              },
            },
          },
        },
      },
      MuiButtonBase: {
        defaultProps: {
          disableRipple: true,
          // disableTouchRipple: true,
        },
      },
      MuiMenu: {
        styleOverrides: {
          paper: {
            boxShadow: '0px 4px 16px 0px #00000014',
            borderRadius: theme.spacing(1),
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          root: {
            '.MuiDialogTitle-root .MuiIconButton-root': {
              color: theme.palette.grey[900],
            },
          },
        },
      },
    },
  });
};