How to use the @workday/canvas-kit-react-common.focusRing function in @workday/canvas-kit-react-common

case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

backgroundFocus: 'rgba(0, 0, 0, 0)',
    color: colors.blackPepper300,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: 'none',
  },
  [SearchTheme.Light]: {
    background: colors.soap200,
    backgroundFocus: colors.soap200,
    backgroundHover: colors.soap300,
    color: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: focusRing().boxShadow,
  },
  [SearchTheme.Dark]: {
    background: 'rgba(0, 0, 0, 0.2)',
    backgroundFocus: colors.frenchVanilla100,
    color: colors.frenchVanilla100,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.frenchVanilla100,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
  },
};

function getInputColors(themeColor: HeaderTheme, collapsed: boolean) {
  if (collapsed) {
    return {
      background: 'transparent',
      color: colors.blackPepper300,
      placeholderColor: colors.licorice300,
    };
  } else if (themeColor === HeaderTheme.White) {
    return {
      background: colors.soap200,
      color: colors.blackPepper300,
      placeholderColor: colors.licorice300,
      focusBackground: colors.soap200,
      focusBoxShadow: focusRing().boxShadow,
    };
  } else {
    return {
      background: 'rgba(0,0,0,0.2)',
      color: colors.frenchVanilla100,
      placeholderColor: colors.frenchVanilla100,
      focusBackground: colors.frenchVanilla100,
    };
  }
}

const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

export function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
  const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}

export function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
  const buttonColors = ButtonColors[variant];

  if (buttonColors == null) {
    return {};
  }

  switch (variant) {
    case DeprecatedButtonVariant.Primary:
    case DeprecatedButtonVariant.Secondary:
    case TextButtonVariant.Default:
    case TextButtonVariant.AllCaps:
      return focusRing(2, 0);
    case ButtonVariant.OutlineInverse:
      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    case IconButtonVariant.Plain:
      return focusRing(2);
    case IconButtonVariant.Inverse:
    case IconButtonVariant.InverseFilled:
    case TextButtonVariant.Inverse:
    case TextButtonVariant.InverseAllCaps:
      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
    default:
      return focusRing(2, 2);
  }
}