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

control: (provided, state) => ({
    ...provided,
    ...uniformHeight,
    background: state.isFocused ? colors.N10 : colors.N05,
    border: 0,
    boxShadow: 'none',
    cursor: 'text',
    padding: 0,
    minHeight: 34,
  }),
  menu: () => ({

...cropStyles,
        ...offset,
      }}
      {...props}
    />
  );
};

Title.defaultProps = {
  as: 'h3',
  crop: false,
  margin: 'none',
};

export const Kbd = styled.kbd({
  backgroundColor: colors.N05,
  border: `1px solid ${colors.N20}`,
  borderRadius: 3,
  boxShadow: '0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset',
  display: 'inline-block',
  fontFamily: 'Monaco, monospace',
  fontSize: '0.85em',
  fontWeight: 'bold',
  lineHeight: 'inherit',
  padding: '1px 5px',
  position: 'relative',
  top: '-1px',
  verticalAlign: 'middle',
  whiteSpace: 'nowrap',
});

export const A11yText = ({ tag: Tag, ...props }) => (

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),
});

const HeaderButton = props => (
  <button type="button">
);
</button>

default: colors.N60,
  primary: colors.primary,
  danger: colors.danger,
  create: colors.create,
  warning: colors.warning,
};
const boldTextColor = {
  default: 'white',
  primary: 'white',
  danger: 'white',
  create: 'white',
  warning: 'white',
};

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,

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 (

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 (

borderBottomColor: `rgba(0, 0, 0, 0.2) !important`,
      borderRadius: borderRadius,
      color: colors.text,
      display: 'inline-block',
      fontWeight: 500,
      padding: `${gridSize * 0.75}px ${gridSize * 2}px`,
      outline: 'none',

      ':hover, :focus': {
        backgroundColor: 'white !important',
        borderColor: `rgba(0, 0, 0, 0.15)`,
        boxShadow: '0 2px 1px rgba(0,0,0,0.05)',
        textDecoration: 'none',
      },
      ':active': {
        backgroundColor: `${colors.N05} !important`,
        boxShadow: 'none',
      },
    }}
    {...props}
  />
);

alignItems: 'center',
        border: `1px solid ${colors.N10}`,
        borderRadius,
        display: 'flex',
        fontSize: '0.75em',
        fontWeight: 500,
        lineHeight: 1,
        transition: 'border-color 150ms linear',
        width: '100%',
        userSelect: 'none',

        ':hover, :focus': {
          borderColor: colors.N20,
        },
        ':active': {
          backgroundColor: colors.N05,
        },
      }}
      {...props}
    />
  );
};
const StretchGroup = props => ;

borderBottomColor: `rgba(0, 0, 0, 0.2) !important`,
      borderRadius: borderRadius,
      color: colors.text,
      display: 'inline-block',
      fontWeight: 500,
      padding: `${gridSize * 0.75}px ${gridSize * 2}px`,
      outline: 'none',

      ':hover, :focus': {
        backgroundColor: 'white !important',
        borderColor: `rgba(0, 0, 0, 0.15)`,
        boxShadow: '0 2px 1px rgba(0,0,0,0.05)',
        textDecoration: 'none',
      },
      ':active': {
        backgroundColor: `${colors.N05} !important`,
        boxShadow: 'none',
      },
    }}
    {...props}
  />
);