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

const Icon = styled.div(({ checked, isDisabled, isFocus, isActive, isHover }) => {
  // background
  let bg = colors.N10;
  if (isDisabled && checked) {
    bg = colors.N30;
  } else if (isActive) {
    bg = checked ? colors.B.D10 : colors.N20;
  } else if ((isFocus || isHover) && !checked) {
    bg = colors.N15;
  } else if (checked) {
    bg = colors.B.base;
  }

  // fill
  let fill = 'white';
  if (isDisabled && checked) {
    fill = colors.N70;
  } else if (!checked) {
    fill = 'transparent';
  }

  // stroke
  let innerStroke = isFocus ? colors.B.L20 : bg;
  let innerStrokeWidth = 1;
  if (checked && !isDisabled) {

warning: {
    default: colors.warning,
    hover: colors.Y.L10,
    active: colors.Y.D10,
  },
};
const boldTextColor = {
  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 Input = forwardRef((props, ref) => (
  <input>
));

const Input = forwardRef((props, ref) => (
  <input>
));

borderColor: colors.N20,
  color: 'inherit',
  width: '100%',

  ':hover': {
    borderColor: colors.N30,
    outline: 0,
  },

  ':focus': {
    borderColor: colors.primary,
    outline: 0,
  },

  '&[disabled]': {
    borderColor: colors.N15,
    backgroundColor: colors.N05,
  },

  ...(props.isMultiline
    ? {
        lineHeight: 'inherit',
        minHeight: 100,
        resize: 'vertical',
        whiteSpace: 'wrap',
      }
    : undefined),
});

export const CheckMark = ({ isDisabled, isFocused, isSelected }) => {
  let bg;
  let fg;
  let border;
  let size = 24;

  if (isDisabled) {
    bg = isSelected ? colors.N20 : colors.N10;
    fg = isSelected ? 'white' : colors.N10;
    border = isSelected ? colors.N20 : colors.N10;
  } else if (isSelected) {
    bg = isFocused ? 'white' : colors.B.base;
    fg = isFocused ? colors.B.base : 'white';
    border = colors.B.base;
  } else {
    border = isFocused ? colors.N15 : colors.N10;
    bg = isFocused ? colors.N05 : 'white';
    fg = isFocused ? colors.N05 : 'white';
  }

  return (