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

// 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;
  let innerStrokeWidth = 1;
  if (checked && !isDisabled) {
    innerStroke = isActive ? colors.B.D20 : colors.B.base;
  }

  let outerStroke = 'transparent';
  let outerStrokeWidth = 1;
  if (isFocus && !isActive) {
    outerStroke = colors.B.A20;
    outerStrokeWidth = 5;

/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import { forwardRef } from 'react';

import { XIcon } from '@arch-ui/icons';
import { colors } from '@arch-ui/theme';
import { uniformHeight } from '@arch-ui/common';

const boldBackgroundColor = {
  default: { default: colors.N60, hover: colors.N50, active: colors.N70 },
  primary: {
    default: colors.primary,
    hover: colors.B.L10,
    active: colors.B.D10,
  },
  danger: { default: colors.danger, hover: colors.R.L10, active: colors.R.D10 },
  create: { default: colors.create, hover: colors.G.L10, active: colors.G.D10 },
  warning: {
    default: colors.warning,
    hover: colors.Y.L10,
    active: colors.Y.D10,
  },
};
const boldTextColor = {
  default: 'white',
  primary: 'white',

export const PrimaryNavItem = styled(ItemElement)(({ depth, isSelected, mouseIsOverNav }) => {
  const selectedStyles = isSelected
    ? {
        '&, :hover, :active, :focus': {
          ':after': {
            backgroundColor: colors.primary,
          },
        },
      }
    : {};

  return {
    border: 0,
    borderRight: '1px solid transparent',
    color: isSelected ? colors.N90 : mouseIsOverNav ? colors.N70 : colors.N40,
    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,

inverted: 'white',
  primary: 'white',
  created: 'white',
  warning: 'white',
  danger: 'white',
};
const subtleBackgroundColor = {
  default: colors.N10,
  inverted: 'white',
  primary: colors.B.L85,
  created: colors.G.L85,
  warning: colors.Y.L85,
  danger: colors.R.L85,
};
const subtleTextColor = {
  default: colors.N70,
  inverted: colors.text,
  primary: colors.B.D20,
  created: colors.G.D20,
  warning: colors.Y.D20,
  danger: colors.R.D20,
};

const BadgeElement = styled.div(({ appearance, variant }) => ({
  backgroundColor:
    variant === 'bold' ? boldBackgroundColor[appearance] : subtleBackgroundColor[appearance],

  borderRadius: '2em',
  boxSizing: 'border-box',
  color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
  display: 'inline-block',
  fontSize: 12,