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

function useDocsNavigationCSS() {
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const primary = usePalette("primary");
  const currentBackgroundColor = useLighten(primary, 0.85);
  const headingColor = useLighten(foreground, 0.5);

  const docsNavigation = css`
    background-color: ${background};
    color: ${foreground};
    h3 {
      font-size: 0.85em;
      text-transform: uppercase;
      padding: 0 1em;
      color: ${headingColor};
      font-weight: 400;
    }
    nav {
      margin: 1.5em 0 0 0;
      &:first-of-type {
        margin: 0;

useProps(options, htmlProps) {
      const isExperimental = options.experimental === "true";
      const warning = usePalette("warning");
      const backgroundColor = useLighten(warning, 0.85);
      const borderColor = useLighten(warning, 0.3);
      const color = useContrast(backgroundColor);
      const blockquote = css`
        color: ${color};
        background-color: ${backgroundColor};
        border-left-color: ${borderColor};
        border-left-width: 8px;
        border-left-style: solid;
        padding: 20px 16px 20px 25px;
        margin: 20px 0;
        line-height: 1.5;

        p {
          margin: 0;
        }

        ${isExperimental &&

function useDocsNavigationCSS() {
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const primary = usePalette("primary");
  const currentBackgroundColor = useLighten(primary, 0.85);
  const headingColor = useLighten(foreground, 0.5);

  const docsNavigation = css`
    background-color: ${background};
    color: ${foreground};
    h3 {
      font-size: 0.85em;
      text-transform: uppercase;
      padding: 0 1em;
      color: ${headingColor};
      font-weight: 400;
    }
    nav {
      margin: 1.5em 0 0 0;
      &:first-of-type {
        margin: 0;
      }

export default function Footer() {
  const foreground = usePalette("foreground");
  const color = useLighten(foreground, 0.35);
  return (

function useDocsInnerNavigationCSS() {
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const borderColor = useLighten(foreground, 0.9);

  const docsInnerNavigation = css`
    font-size: 0.875em;
    background-color: ${background};
    color: ${foreground};

    > * {
      margin-bottom: 16px;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {

useProps(options, htmlProps) {
      const isExperimental = options.experimental === "true";
      const warning = usePalette("warning");
      const backgroundColor = useLighten(warning, 0.85);
      const borderColor = useLighten(warning, 0.3);
      const color = useContrast(backgroundColor);
      const blockquote = css`
        color: ${color};
        background-color: ${backgroundColor};
        border-left-color: ${borderColor};
        border-left-width: 8px;
        border-left-style: solid;
        padding: 20px 16px 20px 25px;
        margin: 20px 0;
        line-height: 1.5;

        p {
          margin: 0;
        }