Contrast badge

"use client";

import * as React from "react";
import { cn } from "cn";

type ContrastBadgeProps = React.ComponentProps<"div"> & {
  /** CSS custom property for the text colour, such as "--muted-foreground". */
  foreground: string;
  /** CSS custom property for the background colour, such as "--background". */
  background: string;
};

type RGB = [number, number, number];

/** Resolves any CSS colour, hex or oklch, to sRGB by painting one pixel. */
function resolve(color: string): RGB {
  const ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
  if (!ctx) return [0, 0, 0];
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, 1, 1);
  const d = ctx.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2]];
}

const lin = (c: number) => {
  const s = c / 255;
  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
};
const luminance = ([r, g, b]: RGB) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);

/** CR = (L1 + 0.05) / (L2 + 0.05), lighter over darker. */
function ratio(a: RGB, b: RGB) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

function read(foreground: string, background: string) {
  const style = getComputedStyle(document.documentElement);
  const fg = style.getPropertyValue(foreground).trim();
  const bg = style.getPropertyValue(background).trim();
  return fg && bg ? ratio(resolve(fg), resolve(bg)) : null;
}

/**
 * Shows the WCAG contrast ratio of two theme tokens, computed in the browser from their
 * current values and recomputed when the theme changes.
 */
export function ContrastBadge({ foreground, background, className, ...props }: ContrastBadgeProps) {
  const [cr, setCr] = React.useState<number | null>(null);

  React.useEffect(() => {
    const update = () => setCr(read(foreground, background));
    update();
    const mo = new MutationObserver(update);
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
    return () => mo.disconnect();
  }, [foreground, background]);

  const grade = cr === null ? "" : cr >= 7 ? "AAA" : cr >= 4.5 ? "AA" : cr >= 3 ? "AA large" : "Fail";

  return (
    <div className={cn("flex items-center gap-3 rounded-lg border bg-card p-3", className)} {...props}>
      <div
        className="grid size-14 shrink-0 place-items-center rounded-md border text-2xl font-semibold"
        style={{ color: `var(${foreground})`, background: `var(${background})` }}
        aria-hidden
      >
        Aa
      </div>
      <div className="min-w-0">
        <p className="text-sm font-medium tabular-nums">
          {cr === null ? "Measuring" : `${cr.toFixed(2)}:1`}
          {grade ? <span className="ml-2 text-muted-foreground">{grade}</span> : null}
        </p>
        <p className="font-mono text-xs break-words text-muted-foreground">
          {foreground} on {background}
        </p>
      </div>
    </div>
  );
}