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

export function usePlaygroundEditorProps(
  options: PlaygroundEditorOptions,
  htmlProps: PlaygroundEditorHTMLProps
): PlaygroundEditorHTMLProps {
  const primary = usePalette("primary") || "blue";
  const contrast = useContrast(primary);
  const maxHeight = options.maxHeight ? options.maxHeight : "auto";
  const playgroundEditor = css`
    margin: 2em 0;
    font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
    font-size: 0.9375em;
    pre& {
      background-color: #282a36 !important;
      color: #f8f8f2 !important;
      border-radius: 0.25em;
      padding: 1em 1.5em;
      max-height: ${maxHeight};
      overflow: auto;
      box-sizing: border-box;
    }
    .CodeMirror {

export default function CoreLayout(props: CoreLayoutProps) {
  const scrolled = useScrolled();
  const title =
    props.data && props.data.markdownRemark && props.data.markdownRemark.title;
  const isHome = props.location.pathname === "/";
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const codeBackground = useFade(foreground, 0.95);
  return (
    <>

export function usePlaygroundPreviewProps(
  _: PlaygroundPreviewOptions,
  htmlProps: PlaygroundPreviewHTMLProps
): PlaygroundPreviewHTMLProps {
  const foreground = usePalette("foreground") || "black";
  const borderColor = useFade(foreground, 0.85);
  const playgroundPreview = css`
    margin: 2em 0 -1.5em 0;
    padding: 1em;
    border: 1px solid ${borderColor};
    border-radius: 0.25em;
  `;
  return {
    ...htmlProps,
    className: cx(playgroundPreview, htmlProps.className)
  };
}

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;

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

export default function IndexPage() {
  const stars = useGitHubStars();
  const link = usePalette("link");
  return (
    <>

export default function Header({ transparent }: HeaderProps) {
  const ref = React.useRef(null);
  const isLarge = useViewportWidthGreaterThan(768);
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const primary = usePalette("primary");
  const boxShadowColor = useFade(foreground, 0.85);
  const dialog = useDialogState({ unstable_animated: true });
  const location = useLocation();

  React.useEffect(dialog.hide, [location.pathname]);

  return (
    <>

useProps(_, htmlProps) {
    const background = usePalette("background");
    const backgroundColor = useDarken(background, 0.08);
    const borderColor = useDarken(backgroundColor, 0.15);
    const keyboardInput = css`
      border-radius: 0.25em;
      font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
      background-color: ${backgroundColor};
      padding: 0.3em 0.5em 0.25em;
      border: 1px solid ${borderColor};
      border-width: 1px 1px 2px 1px;
      font-size: 0.875em;
    `;
    return {
      ...htmlProps,
      className: cx(keyboardInput, htmlProps.className)
    };
  }

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;

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;