How to use the reakit-system-palette/utils/lighten.useLighten function in reakit-system-palette

// 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 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 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 {
      border-color: ${originalBorderColor || focusBorderColor};

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 {
      border-color: ${originalBorderColor || focusBorderColor};
    }
  `;