How to use the @zendeskgarden/react-theming.getColor function in @zendeskgarden/react-theming

it('renders expected disabled styling', () => {
    const { container } = render();

    expect(container.firstChild).toHaveStyleRule('color', getColor('neutralHue', 800));
  });

it('renders expected disabled styling', () => {
    const { container } = render();

    expect(container.firstChild).toHaveStyleRule('background-color', getColor('neutralHue', 200), {
      modifier: `:disabled ~ ${StyledRadioLabel}::before`
    });
  });

it('renders danger styling if provided', () => {
    const { container } = render();

    expect(container.firstChild).toHaveStyleRule('color', getColor('dangerHue'));
  });

it('renders using a default neutral hue', () => {
      const { container } = render();
      const color = getColor('neutralHue', 200);

      expect(container.firstChild).toHaveStyleRule('background-color', color);
    });

let retVal;
  let hue;

  if (props.disabled) {
    hue = 'neutralHue';
  } else if (props.isDanger) {
    hue = 'dangerHue';
  } else {
    hue = 'primaryHue';
  }

  const shade = 600;
  const baseColor = getColor(hue, shade, props.theme);
  const hoverColor = getColor(hue, shade + 100, props.theme);
  const activeColor = getColor(hue, shade + 200, props.theme);
  const disabledBackgroundColor = getColor(hue, shade - 400, props.theme);
  const disabledForegroundColor = getColor(hue, shade - 200, props.theme);
  const boxShadowColor =
    props.focusInset && (props.isPrimary || props.isSelected)
      ? props.theme.palette.white
      : baseColor;
  const boxShadow = `
    ${props.focusInset ? 'inset' : ''}
    ${props.theme.shadows.md(rgba(boxShadowColor as string, 0.35))}`;

  if (props.isLink) {
    retVal = css`
      background-color: transparent;
      color: ${baseColor};

      &:hover {
        color: ${hoverColor};

  background-color: ${props => props.isStriped && getColor('neutralHue', 100, props.theme)};

${props =>
    props.isSelected &&
    `
  border-bottom-color: ${getColor('primaryHue', 300, props.theme)};
  background-color: ${getColor('primaryHue', 200, props.theme)};
  `};

  background-color: ${props => getColor('dangerHue', 300, props.theme, 0.4)};
  padding: ${props => props.theme.space.md};

  background-color: ${props => getColor('successHue', 300, props.theme, 0.4)};
  padding: ${props => props.theme.space.md};

const colorStyles = (props: IStyledTagProps & ThemeProps) => {
  let backgroundColor;
  let boxShadowColor;
  let foregroundColor;
  let closeColor;

  if (props.hue) {
    const shade = props.hue === 'yellow' ? 400 : 600;

    backgroundColor = getColor(props.hue, shade, props.theme);
    boxShadowColor = getColor(props.hue, shade, props.theme, 0.35);

    if (props.hue === 'yellow' || props.hue === 'lemon') {
      foregroundColor = getColor('yellow', 800, props.theme);
    } else {
      foregroundColor = readableColor(
        backgroundColor!,
        props.theme.colors.foreground,
        props.theme.colors.background
      );
    }
  } else {
    backgroundColor = getColor('neutralHue', 200, props.theme);
    boxShadowColor = getColor('neutralHue', 600, props.theme, 0.35);
    foregroundColor = getColor('neutralHue', 700, props.theme);
    closeColor = getColor('neutralHue', 600, props.theme);