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

To help you get started, we’ve selected a few reakit-system-palette examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github reakit / reakit / packages / website / src / components / KeyboardInput.ts View on Github external
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)
    };
  }
});
github reakit / reakit / packages / website / src / components / KeyboardInput.ts View on Github external
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)
    };
  }
});