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

// our snippets seem to have an extra line...
        '.token-line:last-of-type': {
          display: 'none',
        },

        [mediaMax.sm]: {
          marginLeft: -CONTAINER_GUTTERS[0],
          marginRight: -CONTAINER_GUTTERS[0],
        },
      },

      '& :not(pre) > code': {
        backgroundColor: 'rgba(255, 227, 128,0.2)',
        borderRadius: 2,
        color: colors.N100,
        margin: 0,
        padding: '0.2em 0.4em',
      },

      '& h1 > code, & h2 > code, & h3 > code, & h4 > code, & h5 > code, & h6 > code': {
        backgroundColor: 'rgba(255, 235, 229, 0.6)',
      },
    }}
    {...props}
  />
);

// our snippets seem to have an extra line...
        '.token-line:last-of-type': {
          display: 'none',
        },

        [mediaMax.sm]: {
          marginLeft: -CONTAINER_GUTTERS[0],
          marginRight: -CONTAINER_GUTTERS[0],
        },
      },

      '& :not(pre) > code': {
        backgroundColor: 'rgba(255, 227, 128,0.2)',
        borderRadius: 2,
        color: colors.N100,
        margin: 0,
        padding: '0.2em 0.4em',
      },

      '& h1 > code, & h2 > code, & h3 > code, & h4 > code, & h5 > code, & h6 > code': {
        backgroundColor: 'rgba(255, 235, 229, 0.6)',
      },
    }}
    {...props}
  />
);

// our snippets seem to have an extra line...
        '.token-line:last-of-type': {
          display: 'none',
        },

        [mediaMax.sm]: {
          marginLeft: -CONTAINER_GUTTERS[0],
          marginRight: -CONTAINER_GUTTERS[0],
        },
      },

      '& :not(pre) > code': {
        backgroundColor: 'rgba(255, 227, 128,0.2)',
        borderRadius: 2,
        color: colors.N100,
        margin: 0,
        padding: '0.2em 0.4em',
      },

      '& h1 > code, & h2 > code, & h3 > code, & h4 > code, & h5 > code, & h6 > code': {
        backgroundColor: 'rgba(255, 235, 229, 0.6)',
      },
    }}
    {...props}
  />
);

export const Blanket = ({ isTinted, isLight, ...props }) => {
  let bg = 'transparent';

  if (isTinted) {
    bg = isLight ? 'rgba(255, 255, 255, 0.5)' : alpha(colors.N100, 0.2);
  }

  return (
    <div>
  );</div>

);

const Heading = props => (
  <h1>
);
const ButtonWrapper = props =&gt; (</h1>

const Anchor = ({ href, ...props }) => {
  const styles = {
    borderBottom: `1px solid ${colors.B.A40}`,
    color: colors.N100,
    textDecoration: 'none',
    WebkitTapHighlightColor: 'transparent',

    ':hover, :focus': {
      backgroundColor: colors.B.A10,
      borderBottomColor: 'currentColor',
      textDecoration: 'none',
    },
  };

  if (!href || href.indexOf('http') === 0 || href.indexOf('#') === 0) {
    return <a href="{href}">;
  }
  return ;
};
</a>

transform: 'translateX(-100%)',
        width: iconSize,

        '&:hover': {
          color: colors.primary,
        },
      }}
    >
      
    
  );

  return (
    
      {link}
      {children}
    
  );
};