import { pxToRem } from '../typography';

export default function Typography(theme) {
  return {
    MuiTypography: {
      styleOverrides: {
        root: {
          color: theme.palette.grey[10],
        },
      },
      variants: [
        {
          props: { variant: 'Inter-Medium' },
          style: {
            fontFamily: theme.fontFamily.medium,
          },
        },
        {
          props: { variant: 'Inter-SemiBold' },
          style: {
            fontFamily: theme.fontFamily.semiBold,
            fontSize: pxToRem(24),
            fontWeight: 600,
          },
        },
        {
          props: { variant: 'Inter-Bold' },
          style: {
            fontFamily: theme.fontFamily.bold,
            fontSize: pxToRem(24),
            fontWeight: 900,
          },
        },
      ],
    },
  };
}
