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

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,
  created: colors.G.L85,

border-radius: 2px;
  border: 0;
  color: white;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  outline: 0;
  position: absolute;
  right: ${BOX_GUTTER};
  top: ${BOX_GUTTER};
  transition: background-color 80ms linear;
  width: 24px;

  &:hover, &:focus {
    background-color: ${colors.create};
  }
`
);

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',
  },
  warning: {
    bg: colors.warning,
    border: colors.warning,
    focusRing: null,
    text: '#fff',
  },

import styled from '@emotion/styled';

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

const boldBackgroundColor = {
  default: colors.N60,
  primary: colors.primary,
  danger: colors.danger,
  create: colors.create,
  warning: colors.warning,
};
const boldTextColor = {
  default: 'white',
  primary: 'white',
  danger: 'white',
  create: 'white',
  warning: 'white',
};

const subtleBackgroundColor = {
  default: colors.N05,
  primary: colors.B.L90,
  danger: colors.R.L90,
  create: colors.G.L90,
  warning: colors.Y.L90,

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: {
    text: colors.N40,
    textHover: colors.text,
  },
  primary: {

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',
  },
  warning: {
    bg: colors.warning,
    border: colors.warning,
    focusRing: null,
    text: '#fff',
  },
};

create: 'white',
  warning: 'white',
};

const subtleBackgroundColor = {
  default: { default: colors.N10, hover: colors.N15, active: colors.N20 },
  primary: { default: colors.B.L85, hover: colors.B.L80, active: colors.B.L75 },
  danger: { default: colors.R.L85, hover: colors.R.L80, active: colors.R.L75 },
  create: { default: colors.G.L85, hover: colors.G.L80, active: colors.G.L75 },
  warning: { default: colors.Y.L85, hover: colors.Y.L80, active: colors.Y.L75 },
};
const subtleTextColor = {
  default: colors.N50,
  primary: colors.primary,
  danger: colors.danger,
  create: colors.create,
  warning: colors.warning,
};

const PillWrapper = styled.div({ display: 'inline-flex' });
const PillButton = styled.button(({ appearance, variant }) => {
  const fontSizeNumeric = 0.85;
  const fontSize = `${fontSizeNumeric}rem`;
  const borderRadius = `${fontSizeNumeric * 2}rem`;

  return {
    ...uniformHeight,
    backgroundColor:
      variant === 'bold'
        ? boldBackgroundColor[appearance].default
        : subtleBackgroundColor[appearance].default,
    color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],

{Object.keys(icons).map(name => {
            const importText = altIsDown ? `import { ${name} } from '@arch-ui/icons';` : name;
            const isCopied = copyText === importText;
            const Icon = isCopied ? icons.CheckIcon : icons[name];
            return (
              
                
                  
                  {isCopied ? 'Copied!' : name}
                
              
            );
          })}

import styled from '@emotion/styled';

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

const boldBackgroundColor = {
  info: colors.primary,
  success: colors.create,
  warning: colors.warning,
  danger: colors.danger,
};
const boldTextColor = {
  info: 'white',
  success: 'white',
  warning: 'white',
  danger: 'white',
};
const subtleBackgroundColor = {
  info: colors.B.L80,
  success: colors.G.L80,
  warning: colors.Y.L80,
  danger: colors.R.L80,
};
const subtleTextColor = {