How to override property of Palette CommonColors in material ui v5

Im working on migrating Mui4 to Mui5, on our app we have a lot of components that have this styling and colors

const styles = (theme: ThemeModel) => ({
  container: {
    borderColor: theme.palette.common.blueGray,
    backgroundColor: theme.palette.common.calendarCardBlue,
  },
});

notice the colors we are using that comes from palette.common, but now it looks like this approach doesnt work on material ui v5 they are coming as undefined

here is the theme code that was working on material ui v4

export const colors = {
  borderColor: '#4d5b6b',
  blueLink: '#3592f9',
  footerBlue: '#22313f',
  behavorialTraitGraphFooter: '#1c2d3e6d',
  brightTeal: '#06dcbf',
  opaqueButton: '#ffffff66',
  searchBarLightBlue: '#51647a99',
  filterBlue: '#25303E',
  photoGalleryBlue: '#131B23',
  sectionButtonColor: '#3c4a58',
  calendarCardBlue: '#18127',
  blueGray: '#2C3E51',
};

export let theme = createTheme({
  // Colors
  palette: {
    mode: 'dark',
    background: {
      default: colors.darkGray,
    },
    primary: {
      main: colors.teal,
      contrastText: colors.white,
    },
    common: { ...colors },
  },
  // Typography
  ...etc
  },
});

we are passing a colors object to the common property on theme and with that we have access to those colors on the components when styling them, is there a way we can make it work on material ui v5?