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

const GrabHandle = styled.div(({ isActive }) => ({
  backgroundColor: alpha(colors.text, 0.06),
  height: isActive ? '100%' : 0,
  cursor: 'col-resize',
  position: 'absolute',
  right: 0,
  top: 0,
  transition: `background-color ${TRANSITION_DURATION} linear, height ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
  width: 1,

  ':hover': {
    transitionDelay: '100ms', // avoid inadvertent mouse passes
    backgroundColor: alpha(colors.text, 0.12),
  },
  ':active': {
    backgroundColor: alpha(colors.text, 0.24),
  },

  // increase hit-area
  ':before': {
    bottom: -gridSize,
    content: '" "',
    left: -gridSize,
    position: 'absolute',
    right: -gridSize,
    top: -gridSize,
  },
}));
const CollapseExpand = styled.button(({ isCollapsed, mouseIsOverNav }) => {

export const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
export const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
export const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

import React from 'react';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/core';

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

// ==============================
// Dots
// ==============================

const fadeAnim = keyframes`0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; }`;
const appearanceColor = {
  default: colors.N20,
  dark: colors.text,
  primary: colors.primary,
  inverted: 'white',
};

const DotsContainer = styled.div(({ size }) => ({
  alignSelf: 'center',
  fontSize: size,
  lineHeight: 1,
  textAlign: 'center',
  verticalAlign: 'middle',
  display: 'inline-flex',
}));
const Dot = styled.span(({ appearance, delay = 0, isOffset }) => ({
  animation: `${fadeAnim} 1s infinite ${delay}ms`,
  animationTimingFunction: 'ease-in-out',
  backgroundColor: appearanceColor[appearance],

{...props}
  />
));

export const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
export const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
export const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

function useKeydownHandler(handler) {
  let handlerRef = useRef(handler);
  useEffect(() => {
    handlerRef.current = handler;
  });
  useEffect(() => {
    function handle(event) {
      handlerRef.current(event);
    }

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

/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Fragment, useState, memo, useEffect } from 'react';
import styled from '@emotion/styled';
import { Button, LoadingButton } from '@arch-ui/button';
import { colors, gridSize } from '@arch-ui/theme';
import { alpha } from '@arch-ui/color-utils';

const Toolbar = styled.div({
  backgroundColor: alpha('#fff', 0.93),
  bottom: 0,
  boxShadow: `${alpha(colors.text, 0.1)} 0px -2px 0px`,
  display: 'flex',
  justifyContent: 'space-between',
  paddingBottom: gridSize * 2,
  paddingTop: gridSize * 2,
  position: 'sticky',
});

function useKeyListener(listener, deps) {
  useEffect(() => {
    document.addEventListener('keydown', listener, false);
    return () => {
      document.removeEventListener('keydown', listener, false);
    };
  }, deps);
}

const Button = ({ as: Tag, ...props }) => (

import React from 'react';
import styled from '@emotion/styled';

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

const Wrapper = styled.nav({
  borderBottom: `1px solid ${colors.N10}`,
  color: colors.text,
  fontSize: '0.85em',
});
export const SecondaryNavItem = styled(ItemElement)(({ isSelected }) => ({
  boxShadow: `inset 0 ${isSelected ? -2 : 0}px 0 currentColor`,
  color: isSelected ? colors.text : colors.N60,
  cursor: 'pointer',
  display: 'inline-block',
  marginRight: gridSize,
  paddingBottom: gridSize * 2,
  paddingTop: gridSize * 2,
  transition: 'box-shadow 200ms',

  ':hover': {
    color: colors.text,
    textDecoration: 'none',
  },

export const FieldOption = ({ children, ...props }) => {
  let iconColor = colors.N20;
  if (props.isFocused) iconColor = colors.text;

  return (
    
      <span>{children}</span>
      <div>
        
      </div>