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

import { colors } from '@arch-ui/theme';
import { alpha, darken } from '@arch-ui/color-utils';

const boldAppearance = {
  default: {
    bg: '#fff',
    border: colors.N20,
    focusRing: colors.primary,
    text: colors.text,
  },
  primary: {
    bg: colors.primary,
    border: colors.primary,
    focusRing: null,
    text: '#fff',
  },
  create: {
    bg: colors.create,
    border: colors.create,
    focusRing: null,
    text: '#fff',
  },
  danger: {
    bg: colors.danger,

import { colors } from '@arch-ui/theme';
import { alpha, darken } from '@arch-ui/color-utils';

const boldAppearance = {
  default: {
    bg: '#fff',
    border: colors.N20,
    focusRing: colors.primary,
    text: colors.text,
  },
  primary: {
    bg: colors.primary,
    border: colors.primary,
    focusRing: null,
    text: '#fff',
  },
  create: {
    bg: colors.create,
    border: colors.create,
    focusRing: null,
    text: '#fff',
  },
  danger: {
    bg: colors.danger,
    border: colors.danger,
    focusRing: null,
    text: '#fff',
  },

cursor: 'pointer',
      display: 'block',
      fontSize: 14,
      lineHeight: '17px',
      margin: 0,
      padding: `${gridSize}px ${gridSize * 1.5}px`,
      pointerEvents: isDisabled ? 'none' : null,
      textAlign: 'left',
      transition: 'box-shadow 100ms linear',
      verticalAlign: 'middle',
      whiteSpace: 'nowrap',
      width: '100%',

      '&:hover, &:focus': {
        backgroundColor: colors.B.L90,
        color: colors.primary,
        outline: 0,
        textDecoration: 'none',
      },
    }}
    {...props}
  >
    {children}
  
);
const Menu = styled.div(({ left, top }) => {

},
  warning: {
    bg: colors.warning,
    border: colors.warning,
    focusRing: null,
    text: '#fff',
  },
};
const ghostAppearance = {
  default: {
    border: colors.N20,
    text: colors.N60,
  },
  primary: {
    border: colors.B.L50,
    text: colors.primary,
  },
  create: {
    border: colors.G.L50,
    text: colors.create,
  },
  danger: {
    border: colors.R.L50,
    text: colors.danger,
  },
  warning: {
    border: colors.Y.L30,
    text: colors.warning,
  },
};
const subtleAppearance = {
  default: {

color: isActive ? colors.text : 'transparent',
    cursor: 'pointer',
    display: 'flex',
    height: size,
    justifyContent: 'center',
    right: -size,
    transform: isActive ? `translateX(0)` : `translateX(-10px)`,
    outline: 0,
    padding: 0,
    position: 'absolute',
    transition: `color ${TRANSITION_DURATION}, transform ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
    width: size,
    top: offsetTop,

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

color: colors.N40,
        display: 'flex',
        fontSize: '1rem',
        height: iconSize,
        justifyContent: 'center',
        marginTop: -iconSize / 2,
        opacity: 0,
        overflow: 'visible',
        paddingRight: gridSize / 2,
        position: 'absolute',
        top: '50%',
        transform: 'translateX(-100%)',
        width: iconSize,

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

  return (

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,
  inverted: 'white',
  primary: colors.B.L85,

{ref => (
        
          {icon}
          {label}
        
      )}

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',

export const inputStyles = (props = {}) => ({
  ...uniformHeight,
  backgroundColor: props.disabled ? colors.N10 : 'white',
  borderColor: colors.N20,
  color: 'inherit',
  width: '100%',

  ':hover': {
    borderColor: colors.N30,
    outline: 0,
  },

  ':focus': {
    borderColor: colors.primary,
    outline: 0,
  },

  '&[disabled]': {
    borderColor: colors.N15,
    backgroundColor: colors.N05,
  },

  ...(props.isMultiline
    ? {
        lineHeight: 'inherit',
        minHeight: 100,
        resize: 'vertical',
        whiteSpace: 'wrap',
      }
    : undefined),