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

const StyledPreview = ({ preview, originalUrl, fieldPath, ...props }) => (
  
);

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;

const Image = props => (
  <div>
    <img></div>

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 (

control: (provided, { isFocused }) => {
    const focusStyles = isFocused
      ? {
          borderColor: colors.primary,
          boxShadow: `inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 0 3px ${colors.B.A20}`,
          outline: 0,
        }
      : null;
    return {
      ...provided,
      backgroundColor: 'white',
      borderColor: colors.N20,
      fontSize: '1rem',
      minHeight: 35,
      minWidth: '200px',
      ':hover': { borderColor: colors.N30 },
      ...focusStyles,
    };
  },
  clearIndicator: indicatorStyles,

const indicatorStyles = (provided, { isDisabled, isFocused }) => {
  let styles = {
    color: colors.N20,
    ':hover': !isDisabled && !isFocused ? { color: colors.N40 } : null,
  };
  if (isDisabled) styles = { color: colors.N10 };
  if (isFocused) {
    styles = { color: colors.N60, ':hover': { color: colors.N80 } };
  }
  return {
    ...provided,
    ...styles,
  };
};
const selectStyles = {

export const Currency = props => (
  <span>
);
</span>

({ isHover }) => `
  align-items: center;
  background-color: ${isHover ? colors.N20 : colors.N10};
  border-radius: 2px;
  border: 0;
  color: white;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  outline: 0;
  position: absolute;
  right: ${BOX_GUTTER};
  top: ${BOX_GUTTER};
  transition: background-color 80ms linear;
  width: 24px;

  &:hover, &:focus {
    background-color: ${colors.create};

return (
    <label>
      {props.field.label}{' '}
      {accessError ? (
        
      ) : null}{' '}
      {props.field.config.isRequired ?  Required  : null}
    </label>
  );
};