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

marginBottom: '2rem',
        marginTop: '2rem',
      },

      // Misc. Typography
      // ------------------------------
      ul: {
        lineHeight: 1.8,
      },
      'ul > li > ul, ol > li > ol, ul > li > ol, ol > li > ul': {
        paddingLeft: '1.33rem',
      },
      blockquote: {
        fontSize: '1.25rem',
        fontStyle: 'italic',
        color: colors.N60,
        margin: `3rem 0`,
        padding: 0,
        paddingLeft: '3rem',
        position: 'relative',
      },

      // Code
      // ------------------------------

      code: {
        fontFamily: 'Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
        fontSize: '0.85em',
        fontWeight: 'normal',
      },
      pre: {
        backgroundColor: 'rgba(9, 30, 66, 0.03)',

/** @jsx jsx */
import { Component, Fragment } from 'react';
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';

import CopyToClipboard from '../../components/CopyToClipboard';

import * as icons from '@arch-ui/icons';
import { Grid, Cell } from '@arch-ui/layout';
import { colors } from '@arch-ui/theme';
import { Kbd } from '@arch-ui/typography';

const Instructions = styled('div')`
  color: ${colors.N60};
  font-size: 14px;
  margin: 16px 0 24px;
  min-height: 24px;
`;

const IconContainer = styled('div')`
  background-color: white;
  border-radius: 0.2em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: #666;
  cursor: pointer;
  padding: 16px;
  position: relative;
  text-align: center;
  transition: box-shadow 80ms linear;

import React, { PureComponent } from 'react';
import styled from '@emotion/styled';

import { colors } from '@arch-ui/theme';

const boldBackgroundColor = {
  default: colors.N60,
  inverted: colors.text,
  primary: colors.primary,
  created: colors.create,
  warning: colors.warning,
  danger: colors.danger,
};
const boldTextColor = {
  default: 'white',
  inverted: 'white',
  primary: 'white',
  created: 'white',
  warning: 'white',
  danger: 'white',
};
const subtleBackgroundColor = {
  default: colors.N10,

const NavButton = ({ align = 'left', ...props }) => (
  <button>
);
</button>

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

import { colors, gridSize } from '@arch-ui/theme';

const truncate = {
  minWidth: 0,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
};

export const SubtleText = styled.span({
  color: colors.N60,
});

export const H1 = styled.h1({
  fontSize: 28,
  fontWeight: 300,
  margin: '24px 0',
});
export const PageTitle = styled.h1({
  fontSize: '2.4rem',
  fontWeight: 900,
  marginBottom: '0.5em',
  marginTop: '1.0rem',
});

export const Truncate = ({ as: Tag, ...props }) => ;

const Icon = ({ children, ...props }) => (

to update the size in the itemSize prop for List in DayPicker */}
      <div>
        <span>
          {readableMonths[month]}
        </span>
        <span>
          {year}
        </span>
      </div>
    
  );
});

const NavItem = ({ as, lgOnly, ...props }) => {
  const Tag = props.to ? Link : as;
  return (
    <li>
      </li>