How to use the reakit-system-palette/utils/darken.useDarken function in reakit-system-palette

// Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;
      }

      &:hover {
        z-index: 2;

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;

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;

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;

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;
      cursor: default;

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