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

default: colors.N05,
  primary: colors.B.L90,
  danger: colors.R.L90,
  create: colors.G.L90,
  warning: colors.Y.L90,
};
const subtleBorderColor = {
  default: colors.N10,
  primary: colors.B.L80,
  danger: colors.R.L80,
  create: colors.G.L80,
  warning: colors.Y.L80,
};
const subtleTextColor = {
  default: colors.N50,
  primary: colors.B.L30,
  danger: colors.R.L30,
  create: colors.G.L30,
  warning: colors.Y.L30,
};

export const Lozenge = styled.div(({ appearance, variant, crop }) => {
  const isClipRight = crop === 'right';
  const cropStyles = crop
    ? {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',

        // clip from beginning of string
        direction: isClipRight ? 'rtl' : null,
        textAlign: isClipRight ? 'left' : null,

export const CheckMark = ({ isDisabled, isFocused, isSelected }) => {
  let bg;
  let fg;
  let border;
  let size = 24;

  if (isDisabled) {
    bg = isSelected ? colors.N20 : colors.N10;
    fg = isSelected ? 'white' : colors.N10;
    border = isSelected ? colors.N20 : colors.N10;
  } else if (isSelected) {
    bg = isFocused ? 'white' : colors.B.base;
    fg = isFocused ? colors.B.base : 'white';
    border = colors.B.base;
  } else {
    border = isFocused ? colors.N15 : colors.N10;
    bg = isFocused ? colors.N05 : 'white';
    fg = isFocused ? colors.N05 : 'white';
  }

  return (

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

import { XIcon } from '@arch-ui/icons';
import { colors } from '@arch-ui/theme';
import { uniformHeight } from '@arch-ui/common';

const boldBackgroundColor = {
  default: { default: colors.N60, hover: colors.N50, active: colors.N70 },
  primary: {
    default: colors.primary,
    hover: colors.B.L10,
    active: colors.B.D10,
  },
  danger: { default: colors.danger, hover: colors.R.L10, active: colors.R.D10 },
  create: { default: colors.create, hover: colors.G.L10, active: colors.G.D10 },
  warning: {
    default: colors.warning,
    hover: colors.Y.L10,
    active: colors.Y.D10,
  },
};
const boldTextColor = {
  default: 'white',
  primary: 'white',
  danger: 'white',
  create: 'white',
  warning: 'white',
};

fontSize: '1.25rem',
  padding: '1rem 2rem',
  borderRadius: 6,
  margin: '0.5rem',
  transition: 'transform linear 120ms',
  '&:hover': {
    transform: 'scale(1.025)',
  },
  '&:active': {
    opacity: 0.8,
  },

  border:
    props.appearance === 'primary-light'
      ? `2px solid rgba(255,255,255,0.6);`
      : `2px solid ${colors.B.base}`,

  background:
    {
      'primary-light': 'white',
      primary: colors.B.base,
    }[props.appearance] || 'none',

  color: props.appearance === 'primary' || props.appearance === 'light' ? 'white' : colors.B.base,
}));

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

    ':hover': {
      backgroundColor: isInteractive && !isSelected ? colors.B.L90 : null,
      color: isInteractive && !isSelected && !isToday ? colors.B.D40 : null,
    },
    ':active': {
      backgroundColor: isInteractive && !isSelected ? colors.B.L80 : null,
    },
  };
});

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,
    };
  },
  menuPortal: provided => ({

export default () => (
  <div>
    <div>
      <h1>KeystoneJS</h1>
      <p>
        Keystone is an open source framework for developing database driven websites and
        applications, using NodeJS and GraphQL.
      </p>
      </div></div>

const Anchor = ({ href, ...props }) => {
  const styles = {
    borderBottom: `1px solid ${colors.B.A40}`,
    color: colors.N100,
    textDecoration: 'none',
    WebkitTapHighlightColor: 'transparent',

    ':hover, :focus': {
      backgroundColor: colors.B.A10,
      borderBottomColor: 'currentColor',
      textDecoration: 'none',
    },
  };

  if (!href || href.indexOf('http') === 0 || href.indexOf('#') === 0) {
    return <a href="{href}">;
  }
  return ;
};
</a>

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 = {
  info: colors.B.D20,
  success: colors.G.D20,
  warning: colors.Y.D20,
  danger: colors.R.D20,
};

export const Alert = styled.div(({ appearance, variant }) => ({
  backgroundColor:
    variant === 'bold' ? boldBackgroundColor[appearance] : subtleBackgroundColor[appearance],

  color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],

const BodyCell = styled('td')(({ isSelected }) => ({
  backgroundColor: isSelected ? colors.B.L95 : null,
  boxShadow: isSelected
    ? `0 1px 0 ${colors.B.L85}, 0 -1px 0 ${colors.B.L85}`
    : `0 -1px 0 ${colors.N10}`,
  boxSizing: 'border-box',
  padding: `${gridSize + 2}px ${gridSize}px`,
  position: 'relative',
}));
const ItemLink = styled(Link)`