How to use reakit-system-palette - 10 common examples

export function useTabbableProps(
  {
    // Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;

export function useTabbableProps(
  {
    // Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;

export function useTabbableProps(
  {
    // Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {

// Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;
      }

      &:hover {
        z-index: 2;

// it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;
      }

      &:hover {
        z-index: 2;
      }

{
    // Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;
      }

      &:hover {

export function useTabbableProps(
  {
    // Setting `primary` here and not in `useTabbableOptions` because we want
    // it to default to `primary` only for the tabbable `box-shadow`
    unstable_system: { palette = "primary", ...system } = {}
  }: BootstrapTabbableOptions,
  htmlProps: TabbableHTMLProps = {}
): TabbableHTMLProps {
  const {
    style: { color, backgroundColor }
  } = usePaletteBoxProps({ unstable_system: { palette, ...system } });

  const dark = usePalette("dark") || "black";
  const background = usePalette("background") || "white";
  const backgroundIsLight = useIsLight(background);
  const strokeColor = backgroundColor || color || dark;
  const contrastRatio = useContrastRatio(background, strokeColor);
  const darker = useDarken(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const lighter = useLighten(strokeColor, contrastRatio < 1.2 ? 0.25 : 0);
  const boxShadowColor = useFade(backgroundIsLight ? darker : lighter, 0.6);

  const tabbable = css`
    &:not([type="checkbox"]):not([type="radio"]) {
      transition: box-shadow 0.15s ease-in-out;
      outline: 0;

      &:focus {
        box-shadow: 0 0 0 0.2em ${boxShadowColor};
        position: relative;
        z-index: 2;
      }

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