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

const Heading = ({ as: Tag, children, id, ...props }) => {
  const iconSize = 24;
  const depth = parseInt(Tag.slice(1), 10);
  const hasLink = depth > 1 && depth < 5;
  const link = hasLink && (

import { SettingsIcon, TrashcanIcon } from '@arch-ui/icons';
import { FlexGroup } from '@arch-ui/layout';
import { IconButton } from '@arch-ui/button';
import { colors, gridSize } from '@arch-ui/theme';

import UpdateManyItemsModal from '../../components/UpdateManyItemsModal';
import DeleteManyItemsModal from '../../components/DeleteManyItemsModal';

export const ManageToolbar = styled.div(({ isVisible }) => ({
  height: 35,
  marginBottom: gridSize * 2,
  marginTop: gridSize,
  visibility: isVisible ? 'visible' : 'hidden',
}));
const SelectedCount = styled.div({
  color: colors.N40,
  marginRight: gridSize,
});

export default function ListManage(props) {
  const { onDeleteMany, onUpdateMany, selectedItems } = props;
  const [deleteModalIsVisible, setDeleteModal] = useState(false);
  const [updateModalIsVisible, setUpdateModal] = useState(false);

  const handleDelete = () => {
    setDeleteModal(false);
    onDeleteMany();
  };
  const handleUpdate = () => {
    setUpdateModal(false);
    onUpdateMany();
  };

const FooterButton = ({ isPrimary, ...props }) => (
  <button type="button">
);
</button>

{ref => (
                    <button>
                      
                    </button>
                  )}

import styled from '@emotion/styled';
import { colors, borderRadius } from '@arch-ui/theme';

export const WeekRow = styled.div({
  display: 'flex',
});

export const WeekLabels = styled(WeekRow)({
  color: colors.N40,
  fontSize: '0.65rem',
  fontWeight: 500,
  textTransform: 'uppercase',
});

export const Day = styled.div(({ disabled, isInteractive, isSelected, isToday }) => {
  let textColor;
  if (isToday) textColor = colors.danger;
  if (disabled) textColor = colors.N40;
  if (isSelected) textColor = 'white';

  return {
    alignItems: 'center',
    backgroundColor: isSelected ? colors.primary : null,
    borderRadius: borderRadius,
    color: textColor,

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

export const Day = styled.div(({ disabled, isInteractive, isSelected, isToday }) => {
  let textColor;
  if (isToday) textColor = colors.danger;
  if (disabled) textColor = colors.N40;
  if (isSelected) textColor = 'white';

  return {
    alignItems: 'center',
    backgroundColor: isSelected ? colors.primary : null,
    borderRadius: borderRadius,
    color: textColor,
    cursor: isInteractive ? 'pointer' : 'default',
    display: 'flex',
    flexDirection: 'column',
    fontWeight: isSelected || isToday ? 'bold' : null,
    flexBasis: 'calc(100% / 7)',
    padding: '0.5rem',
    textAlign: 'center',
    width: 'calc(100% / 7)',

}}
      >
        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>

option: (provided, { isDisabled, isFocused, isSelected }) => {
    let bg = 'inherit';
    if (isFocused) bg = colors.B.L90;
    if (isSelected) bg = colors.primary;

    let txt = 'inherit';
    if (isFocused) txt = colors.primary;
    if (isSelected) txt = 'white';
    if (isDisabled) txt = colors.N40;

    const cssPseudoActive =
      !isSelected && !isDisabled
        ? {
            backgroundColor: colors.B.L80,
            color: colors.B.D20,
          }
        : {};

    return {
      ...provided,
      fontSize: '1rem',
      backgroundColor: bg,
      color: txt,

      ':active': cssPseudoActive,

const HeaderCell = styled('th')(({ isSelected, isSortable }) => ({
  backgroundColor: 'white',
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.1)}`,
  boxSizing: 'border-box',
  color: isSelected ? colors.text : colors.N40,
  cursor: isSortable ? 'pointer' : 'auto',
  display: 'table-cell',
  fontWeight: 'normal',
  padding: gridSize,
  position: 'sticky',
  top: 0,
  transition: 'background-color 100ms',
  zIndex: 1,
  textAlign: 'left',
  verticalAlign: 'bottom',
  fontSize: '1.1rem',

  ':hover': {
    color: isSortable && !isSelected ? colors.N60 : null,
  },
}));