How to use the @arch-ui/theme.colors.N10 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';

{fields.map(field => {
          const { path } = field;

          if (itemErrors[path] instanceof Error && itemErrors[path].name === 'AccessDeniedError') {
            return (
              
                
                {itemErrors[path].message}
              
            );
          }

          if (path === linkField) {
            return (
              
                {item[linkField]}
              
            );
          }

          let content;

          if (field.views.Cell) {

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

const ControlLabel = ({ isChecked, isDisabled, ...props }) => {
  const type = Children.toArray(props.children)[0].props.type;
  const borderRadius = type === 'checkbox' ? 3 : '2em';

  return (

display: 'block',
    marginBottom: 2,
    overflow: 'hidden',
    padding: PRIMARY_NAV_GUTTER,
    paddingLeft: depth ? PRIMARY_NAV_GUTTER * depth : PRIMARY_NAV_GUTTER,
    position: 'relative',
    textDecoration: 'none',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    transition: 'color 110ms',

    flexGrow: 1,
    flexBasis: '100%',

    ':hover, :focus': {
      backgroundColor: colors.N10,
      textDecoration: 'none',
    },
    ':active': {
      backgroundColor: colors.N10,
    },

    ':after': {
      borderRadius: 2,
      bottom: 2,
      content: '" "',
      pointerEvents: 'none',
      position: 'absolute',
      right: 6,
      top: 2,
      transition: 'background-color 110ms',
      width: 4,

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

export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
  <header>
    
      <div>
        
        <nav>
      </nav></div>
    
  </header>
));

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