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

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 &&
          css`

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 {
      font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;