← ReactPalette Variants

BaseSteps 5

import kleur from "@driangle/kleur";
import { useMemo } from "react";

function useVariants(hex, steps) {
  return useMemo(() => {
    const base = kleur(hex);
    const tints = [...base.tints(steps)];
    const shades = [...base.shades(steps)];

    return { tints, base, shades };
  }, [hex, steps]);
}

function Button({ variant, children }) {
  const { tints, base, shades } =
    useVariants("#3a6bd5", 5);

  const bg = variant === "light"
    ? tints[2].toHex()
    : variant === "dark"
      ? shades[2].toHex()
      : base.toHex();

  const color = kleur.isLight(bg)
    ? kleur(bg).darken(0.8).toHex()
    : kleur(bg).lighten(0.9).toHex();

  return (
    <button style={{ background: bg, color }}>
      {children}
    </button>
  );
}

Tints (lighter)

#5b84dc

#7c9ce3

#9cb5ea

#bdcef1

#dee6f8

Base

#3a6bd5

Shades (darker)

#2856ba

#204595

#183470

#10224a

#081125

Button Variants

Light

Default

Dark