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

textHover: colors.text,
  },
  primary: {
    text: colors.N40,
    textHover: colors.primary,
  },
  create: {
    text: null,
    textHover: null,
  },
  warning: {
    text: colors.N40,
    textHover: colors.danger,
  },
  danger: {
    text: colors.danger,
    textHover: colors.danger,
  },
};
const nuanceAppearance = {
  default: {
    text: colors.text,
  },
  primary: {
    text: colors.primary,
  },
  create: {
    text: null,
  },
  warning: {
    text: colors.danger,
  },

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

const subtleBackgroundColor = {

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,

render() {
    if (this.state.hasError) {
      return <span>Unable to render content</span>;
    }

    return this.props.children;
  }
}

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

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 = {
  info: colors.B.D20,
  success: colors.G.D20,

danger: 'white',
  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,

const TodayMarker = styled.div(({ isSelected }) => ({
  backgroundColor: isSelected ? 'white' : colors.danger,
  borderRadius: 4,
  height: 2,
  marginBottom: -4,
  marginTop: 2,
  width: '1em',
}));

text: colors.danger,
    textHover: colors.danger,
  },
};
const nuanceAppearance = {
  default: {
    text: colors.text,
  },
  primary: {
    text: colors.primary,
  },
  create: {
    text: null,
  },
  warning: {
    text: colors.danger,
  },
  danger: {
    text: colors.danger,
  },
};

export function makeSubtleVariant({ appearance }) {
  const { text, textHover } = subtleAppearance[appearance];

  return {
    color: text,
    fontWeight: null,

    ':hover, :focus': {
      color: textHover,
      textDecoration: 'underline',

},
  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',
  },
};
const ghostAppearance = {
  default: {
    border: colors.N20,
    text: colors.N60,
  },
  primary: {