How to use the @arch-ui/theme.colors.N50 function in @arch-ui/theme

const subtleBackgroundColor = {
  default: colors.N05,
  primary: colors.B.L90,
  danger: colors.R.L90,
  create: colors.G.L90,
  warning: colors.Y.L90,
};
const subtleBorderColor = {
  default: colors.N10,
  primary: colors.B.L80,
  danger: colors.R.L80,
  create: colors.G.L80,
  warning: colors.Y.L80,
};
const subtleTextColor = {
  default: colors.N50,
  primary: colors.B.L30,
  danger: colors.R.L30,
  create: colors.G.L30,
  warning: colors.Y.L30,
};

export const Lozenge = styled.div(({ appearance, variant, crop }) => {
  const isClipRight = crop === 'right';
  const cropStyles = crop
    ? {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',

        // clip from beginning of string
        direction: isClipRight ? 'rtl' : null,

default: 'white',
  primary: 'white',
  danger: 'white',
  create: 'white',
  warning: 'white',
};

const subtleBackgroundColor = {
  default: { default: colors.N10, hover: colors.N15, active: colors.N20 },
  primary: { default: colors.B.L85, hover: colors.B.L80, active: colors.B.L75 },
  danger: { default: colors.R.L85, hover: colors.R.L80, active: colors.R.L75 },
  create: { default: colors.G.L85, hover: colors.G.L80, active: colors.G.L75 },
  warning: { default: colors.Y.L85, hover: colors.Y.L80, active: colors.Y.L75 },
};
const subtleTextColor = {
  default: colors.N50,
  primary: colors.primary,
  danger: colors.danger,
  create: colors.create,
  warning: colors.warning,
};

const PillWrapper = styled.div({ display: 'inline-flex' });
const PillButton = styled.button(({ appearance, variant }) => {
  const fontSizeNumeric = 0.85;
  const fontSize = `${fontSizeNumeric}rem`;
  const borderRadius = `${fontSizeNumeric * 2}rem`;

  return {
    ...uniformHeight,
    backgroundColor:
      variant === 'bold'

placeholder: provided => ({
    ...provided,
    color: colors.N50,
  }),
};