How to use the reakit-system-palette/utils/contrast.useContrast function in reakit-system-palette

export function useMenuItemProps(
  { unstable_system, ...options }: BootstrapMenuItemOptions,
  htmlProps: MenuItemHTMLProps = {}
): MenuItemHTMLProps {
  const foreground = usePalette("foreground") || "black";
  const primary = usePalette("primary") || "blue";
  const primaryContrast = useContrast(primary);
  const darkPrimary = useDarken(primary, 0.2);
  const isHorizontal = options.orientation === "horizontal";

  const menuItem = css`
    &&& {
      line-height: 1.5;
      padding: 0 ${isHorizontal ? "0.5em" : "1.5em"};
      text-align: left;
      justify-content: flex-start;
      border: 0;
      border-radius: 0;
      font-size: 100%;
      background: transparent;
      color: ${foreground};
      margin: 0;
      user-select: none;

export function usePopoverProps(
  { unstable_system }: BootstrapPopoverOptions,
  htmlProps: PopoverHTMLProps = {}
): PopoverHTMLProps {
  const {
    style: { backgroundColor }
  } = usePaletteBoxProps({ unstable_system });

  const foreground = useContrast(backgroundColor) || "black";
  const borderColor = useFade(foreground, 0.75);

  const popover = css`
    & > .arrow {
      background-color: transparent;
      & .stroke {
        fill: ${borderColor};
      }
      & .fill {
        fill: ${backgroundColor};
      }
    }
  `;

  return { ...htmlProps, className: cx(popover, htmlProps.className) };
}

export function useFormInputProps(
  { unstable_system }: BootstrapFormInputOptions,
  htmlProps: unstable_FormInputHTMLProps = {}
): unstable_FormInputHTMLProps {
  const {
    style: { backgroundColor, borderColor: originalBorderColor }
  } = usePaletteBoxProps({ unstable_system });

  const foreground = useContrast(backgroundColor) || "black";
  const color = useLighten(foreground, 0.3);
  const primary = usePalette("primary");
  const borderColor = useFade(foreground, 0.75);
  const focusBorderColor = useLighten(primary, 0.4);

  const formInput = css`
    display: block;
    width: 100%;
    border-radius: 0.2rem;
    padding: 0.5em 0.75em;
    font-size: 100%;
    border: 1px solid ${originalBorderColor || borderColor};
    color: ${color};
    margin: 0 !important;

    &:focus {

{ unstable_system }: BootstrapButtonOptions,
  htmlProps: ButtonHTMLProps = {}
): ButtonHTMLProps {
  const {
    style: { color, backgroundColor, borderColor = "transparent" }
  } = usePaletteBoxProps({ unstable_system });

  const hoverBackgroundColor = useDarken(
    backgroundColor || color,
    unstable_system.fill !== "opaque" ? 0 : 0.1
  );
  const activeBackgroundColor = useDarken(hoverBackgroundColor, 0.1);
  const hoverBorderColor = useDarken(backgroundColor || color, 0.2);
  const activeBorderColor = useDarken(hoverBorderColor, 0.1);
  const hoverColor = useContrast(hoverBackgroundColor);
  const activeColor = useContrast(activeBackgroundColor);

  const button = css`
    display: inline-flex;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    user-select: none;
    padding: 0.375em 0.75em;
    line-height: 1.5;
    border-radius: 0.25rem;
    text-decoration: none;
    border: 1px solid ${borderColor};
    cursor: pointer;
    white-space: nowrap;
    color: ${color};
    background-color: ${backgroundColor || "transparent"};

export function useDialogProps(
  { unstable_system }: BootstrapDialogOptions,
  htmlProps: DialogHTMLProps = {}
): DialogHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system });

  const foreground = useContrast(backgroundColor) || "black";
  const primaryColor = usePalette("primary");
  const borderColor = useFade(foreground, 0.75);
  const boxShadowColor = useFade(primaryColor || color || foreground, 0.5);

  const dialog = css`
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.25rem;
    padding: 1em;
    max-height: calc(100vh - 56px);
    outline: 0;
    border: 1px solid ${borderColor};
    color: ${color};
    z-index: 999;

export function useFormGroupProps(
  { unstable_system }: BootstrapFormGroupOptions,
  htmlProps: unstable_FormGroupHTMLProps = {}
): unstable_FormGroupHTMLProps {
  const {
    style: { backgroundColor, borderColor: originalBorderColor }
  } = usePaletteBoxProps({ unstable_system });

  const foreground = useContrast(backgroundColor) || "black";
  const color = useLighten(foreground, 0.3);
  const borderColor = useFade(foreground, 0.75);

  const formGroup = css`
    display: block;
    color: ${color};
    border: 1px solid ${originalBorderColor || borderColor};
    border-radius: 0.25rem;
    padding: 0.5rem 1rem 1rem;
    & > * {
      display: block;
    }
  `;

  return { ...htmlProps, className: cx(formGroup, htmlProps.className) };
}

export function useButtonProps(
  { unstable_system }: BootstrapButtonOptions,
  htmlProps: ButtonHTMLProps = {}
): ButtonHTMLProps {
  const {
    style: { color, backgroundColor, borderColor = "transparent" }
  } = usePaletteBoxProps({ unstable_system });

  const hoverBackgroundColor = useDarken(
    backgroundColor || color,
    unstable_system.fill !== "opaque" ? 0 : 0.1
  );
  const activeBackgroundColor = useDarken(hoverBackgroundColor, 0.1);
  const hoverBorderColor = useDarken(backgroundColor || color, 0.2);
  const activeBorderColor = useDarken(hoverBorderColor, 0.1);
  const hoverColor = useContrast(hoverBackgroundColor);
  const activeColor = useContrast(activeBackgroundColor);

  const button = css`
    display: inline-flex;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    user-select: none;
    padding: 0.375em 0.75em;
    line-height: 1.5;
    border-radius: 0.25rem;
    text-decoration: none;
    border: 1px solid ${borderColor};
    cursor: pointer;
    white-space: nowrap;
    color: ${color};