How to use the @apollo/space-kit/colors.colors.indigo function in @apollo/space-kit

const {colors} = require('@apollo/space-kit/colors');

exports.colors = {
  primary: colors.indigo.dark,
  primaryLight: colors.indigo.lighter,
  secondary: colors.pink.base,
  tertiary: colors.teal.dark,
  tertiaryLight: colors.teal.base,
  divider: colors.silver.dark,
  background: colors.silver.light,
  background2: colors.silver.base,
  text1: colors.black.lighter,
  text2: colors.grey.dark,
  text3: colors.grey.light,
  text4: colors.silver.darker,
  warning: colors.yellow.base,
  shadow: colors.black.darker,
  highlight: colors.blue.base,
  highlight2: colors.blue.lighter,
  highlight3: colors.blue.lightest,
  hoverOpacity: 0.8

const {colors} = require('@apollo/space-kit/colors');

exports.colors = {
  primary: colors.indigo.dark,
  primaryLight: colors.indigo.lighter,
  secondary: colors.pink.base,
  tertiary: colors.teal.dark,
  tertiaryLight: colors.teal.base,
  divider: colors.silver.dark,
  background: colors.silver.light,
  background2: colors.silver.base,
  text1: colors.black.lighter,
  text2: colors.grey.dark,
  text3: colors.grey.light,
  text4: colors.silver.darker,
  warning: colors.yellow.base,
  shadow: colors.black.darker,
  highlight: colors.blue.base,
  highlight2: colors.blue.lighter,
  highlight3: colors.blue.lightest,

display: 'flex',
  flexShrink: 0,
  width: 240,
  [breakpoints.lg]: {
    width: 'auto',
    marginRight: 0
  },
  [breakpoints.md]: {
    display: 'none'
  }
});

const StyledLink = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: colors.indigo.dark,
  lineHeight: 2,
  textDecoration: 'none',
  ':hover': {
    color: colors.indigo.darker
  }
});

const StyledIcon = styled(IconProceed)({
  height: '0.75em',
  marginLeft: '0.5em'
});

export default function HeaderButton() {
  return (

width: 'auto',
    marginRight: 0
  },
  [breakpoints.md]: {
    display: 'none'
  }
});

const StyledLink = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: colors.indigo.dark,
  lineHeight: 2,
  textDecoration: 'none',
  ':hover': {
    color: colors.indigo.darker
  }
});

const StyledIcon = styled(IconProceed)({
  height: '0.75em',
  marginLeft: '0.5em'
});

export default function HeaderButton() {
  return (