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

import { jsx } from '@emotion/core';
import { Component, createRef, Fragment } from 'react';
import { createPortal } from 'react-dom';
import flushable from 'flushable';
import styled from '@emotion/styled';
import { Popper } from 'react-popper';

import { TransitionProvider, fade } from '@arch-ui/modal-utils';
import { colors, gridSize } from '@arch-ui/theme';

// ==============================
// Styled Component
// ==============================

const TooltipElement = styled.div({
  backgroundColor: colors.N80,
  borderRadius: 3,
  color: 'white',
  fontSize: '0.75rem',
  fontWeight: 500,
  padding: `${gridSize / 2}px ${gridSize}px`,
  pointerEvents: 'none', // tooltips are non-interactive, they shouldn't get in the way of other elements
  zIndex: 2,
});

let TooltipPositioner = props => {
  return createPortal(

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 = {

color: colors.N60,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: 24,
      width: 24,

      ':not(:first-of-type)': {
        marginLeft: '0.5em',
      },
      ':not(:last-of-type)': {
        marginRight: '0.5em',
      },

      ':hover,:focus': {
        color: colors.N80,
      },

      svg: {
        width: '100%',
      },
    }}
    {...props}
  >
    {children}
  
);
const IconGithub = props => (

const Hr = props => (
  <hr>
);
const Anchor = ({ href, ...props }) =&gt; {

Get Started
      
      <button href="https://github.com/keystonejs/keystone-5">
        View on GitHub
      </button>
    
    <p>
      Keystone 5 is currently in alpha and under intensive development by{' '}
      <a href="https://www.thinkmill.com.au">
        Thinkmill
      </a>{' '}
      and{' '}
      <a href="https://github.com/keystonejs/keystone-5/blob/master/CONTRIBUTING.md">
        contributors
      </a>{' '}
      around the world.
    </p>
    <div>
      
      
      
    </div>

const HomepageContent = () => (
  <content>
    Keystone 5
    <div>
      <p>A scalable platform and CMS to build Node.js applications.</p>
      <p>
        Keystone 5 introduces first-class GraphQL support, a new extensible architecture, and an
        improved Admin UI.
      </p>
    </div>
    
      <button>
        Get Started</button></content>

const GroupHeading = props => (
  <h3>
);
const List = props =&gt; (</h3>

alignItems: 'center',
          background: 0,
          border: 0,
          color: colors.N60,
          cursor: 'pointer',
          display: 'flex',
          outline: 0,
          padding: `${gridSize / 2}px ${gridSize}px`,
          textDecoration: 'none',

          [mediaMax.xs]: {
            display: lgOnly ? 'none' : 'block',
          },

          ':hover, :focus': {
            color: colors.N80,
            textDecoration: 'none',
          },
        }}
        {...props}
      />
    
  );
};
NavItem.defaultProps = {