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

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 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 (
    <>

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