@siyahi/tools 0.1.9-next.21 → 0.1.9-next.22

package/README.md

@@ -12,14 +12,15 @@ that import `@siyahi/ui`.
 npm install --save-dev @siyahi/tools@next oxlint
 ```
 
-| Rule                          | Rejects                                                                                                             |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `siyahi/no-color-literal`     | hex, `rgb()`, `hsl()`, `oklch()` and other colour literals in strings                                               |
-| `siyahi/no-scheme-variant`    | `dark:` and `light:` Tailwind variants                                                                              |
-| `siyahi/no-numeric-font-size` | `fontSize: 13`, `fontSize="12px"`                                                                                   |
-| `siyahi/no-chart-theme-map`   | a chart config `theme: { light, dark }` map; shadcn's chart applies the dark half only under a `.dark` class        |
-| `siyahi/no-raw-colors`        | Tailwind palette colours such as `bg-pink-500` ([@shadcn/lint](https://github.com/shadcn-ui/lint))                  |
-| `siyahi/no-arbitrary-values`  | arbitrary values such as `text-[13px]`, `w-[37px]`, `bg-[#fff]` ([@shadcn/lint](https://github.com/shadcn-ui/lint)) |
+| Rule                          | Rejects                                                                                                                                                         |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `siyahi/no-color-literal`     | hex, `rgb()`, `hsl()`, `oklch()` and other colour literals in strings                                                                                           |
+| `siyahi/no-scheme-variant`    | `dark:` and `light:` Tailwind variants                                                                                                                          |
+| `siyahi/no-numeric-font-size` | `fontSize: 13`, `fontSize="12px"`                                                                                                                               |
+| `siyahi/no-chart-theme-map`   | a chart config `theme: { light, dark }` map; shadcn's chart applies the dark half only under a `.dark` class                                                    |
+| `siyahi/no-raw-colors`        | Tailwind palette colours such as `bg-pink-500` ([@shadcn/lint](https://github.com/shadcn-ui/lint))                                                              |
+| `siyahi/no-arbitrary-values`  | arbitrary values such as `text-[13px]`, `w-[37px]`, `bg-[#fff]` ([@shadcn/lint](https://github.com/shadcn-ui/lint))                                             |
+| `siyahi/no-restyle`           | classes that change a component's spacing, colour, shape or type, such as `<CardContent className="gap-4">` ([@shadcn/lint](https://github.com/shadcn-ui/lint)) |
 
 ```json
 {
@@ -31,11 +32,20 @@ npm install --save-dev @siyahi/tools@next oxlint
     "siyahi/no-numeric-font-size": "error",
     "siyahi/no-chart-theme-map": "error",
     "siyahi/no-raw-colors": "error",
-    "siyahi/no-arbitrary-values": "error"
+    "siyahi/no-arbitrary-values": "error",
+    "siyahi/no-restyle": "error"
   }
 }
 ```
 
+`siyahi/no-restyle` lets a page place a component (margin, width, grid and
+flex placement) and nothing else; `Collapsible` and `CollapsibleContent`, which
+draw nothing of their own, may also take spacing. Put anything else on a plain
+element inside or around the component: `<CardContent><div className="flex
+flex-col gap-4">`, `<TableCell><span className="font-mono">`,
+`<div className="rounded-lg border"><Command>`. Body text is already
+`tabular-nums`, so cells need no class for it.
+
 A Vite+ or ESLint config can spread every rule at once:
 `import { recommended } from "@siyahi/tools/lint"`.
 
@@ -131,7 +141,11 @@ npx siyahi-contrast path/to/theme.css
 
 Reads the light `:root` block and the `@variant dark { … }` block inside it.
 Every checked token must be set in both; dark never borrows a light value. It
-fails unless text colours reach 4.5:1 on the canvas, the card and their own
-fills, chart colours reach 3:1 against the card and against the slots next to
-them, and every chart colour sits inside sRGB. Slots two apart share a
-lightness and are told apart by hue, so series take slots in order.
+checks each pair on the canvas and on the card, blending a translucent fill over
+the surface under it. It fails unless text reaches 4.5:1 on the page, on its own
+fill and on the tints Siyahi's components put it on (Callout washes, the
+destructive tint and its hover, code-line fills, treemap heat steps), a field's
+edge, the focus ring, a selected tab and every chart and meaning colour reach
+3:1 against what is next to them, and every colour sits inside sRGB. Slots two
+apart share a lightness and are told apart by hue, so series take slots in
+order.

package/color.mjs

@@ -76,6 +76,17 @@ export function luminance([r, g, b]) {
   return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
 }
 
+/**
+ * WCAG contrast ratio between two opaque colours, as gamma-encoded sRGB.
+ * @param {[number, number, number]} a
+ * @param {[number, number, number]} b
+ * @returns {number}
+ */
+export function contrastSrgb(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].toSorted((x, y) => y - x);
+  return ((hi ?? 0) + 0.05) / ((lo ?? 0) + 0.05);
+}
+
 /**
  * WCAG contrast ratio between two opaque OKLCH colours.
  * @param {Oklch} a
@@ -83,8 +94,38 @@ export function luminance([r, g, b]) {
  * @returns {number}
  */
 export function contrast(a, b) {
-  const [hi, lo] = [luminance(oklchToSrgb(a)), luminance(oklchToSrgb(b))].toSorted((x, y) => y - x);
-  return ((hi ?? 0) + 0.05) / ((lo ?? 0) + 0.05);
+  return contrastSrgb(oklchToSrgb(a), oklchToSrgb(b));
+}
+
+/**
+ * The colour a translucent colour paints over an opaque one. Browsers blend
+ * gamma-encoded sRGB channels, so `bg-muted/50` over the card is half of each.
+ * @param {Oklch} top
+ * @param {[number, number, number]} under
+ * @returns {[number, number, number]}
+ */
+export function over(top, [r0, g0, b0]) {
+  const [r, g, b] = oklchToSrgb(top);
+  const blend = (/** @type {number} */ fg, /** @type {number} */ bg) => top.alpha * fg + (1 - top.alpha) * bg;
+  return [blend(r, r0), blend(g, g0), blend(b, b0)];
+}
+
+/** @param {Oklch} color @returns {[number, number, number]} */
+const toOklab = ({ l, c, h }) => [l, c * Math.cos((h * Math.PI) / 180), c * Math.sin((h * Math.PI) / 180)];
+
+/**
+ * `color-mix(in oklab, a share, b)`, with share in 0..1 and opaque inputs.
+ * @param {Oklch} a
+ * @param {Oklch} b
+ * @param {number} share
+ * @returns {Oklch}
+ */
+export function mixOklab(a, b, share) {
+  const [la, xa, ya] = toOklab(a);
+  const [lb, xb, yb] = toOklab(b);
+  const along = (/** @type {number} */ from, /** @type {number} */ to) => share * from + (1 - share) * to;
+  const [x, y] = [along(xa, xb), along(ya, yb)];
+  return { l: along(la, lb), c: Math.hypot(x, y), h: (Math.atan2(y, x) * 180) / Math.PI, alpha: 1 };
 }
 
 /**
@@ -93,7 +134,16 @@ export function contrast(a, b) {
  * @returns {string}
  */
 export function toHex(color) {
-  return `#${oklchToSrgb(color)
+  return srgbHex(oklchToSrgb(color));
+}
+
+/**
+ * Hex form of gamma-encoded sRGB channels in 0..1.
+ * @param {[number, number, number]} rgb
+ * @returns {string}
+ */
+export function srgbHex(rgb) {
+  return `#${rgb
     .map((v) =>
       Math.round(v * 255)
         .toString(16)

package/contrast.mjs

@@ -1,90 +1,176 @@
 #!/usr/bin/env node
 // @ts-check
-// Fails when a theme colour is too faint to read: 4.5:1 for text on the
-// canvas and the card and for a foreground on its own fill, 3:1 for chart
-// colours against the card and against the slot next to them. Slots two apart
-// share a lightness and are told apart by hue, so they are not compared. Chart
-// colours must also sit inside sRGB, so the browser paints what was scored.
+// Fails when a theme colour is too faint where Siyahi's components paint it:
+// 4.5:1 for text, 3:1 for a mark a reader needs (a control's edge, a focus
+// ring, a selected tab, a chart mark). Each pair is checked on both surfaces a
+// block can sit on, the canvas and the card, with translucent fills blended
+// over that surface as the browser paints them. Chart slots two apart share a
+// lightness and are told apart by hue, so they are not compared. Every colour
+// must also sit inside sRGB, so the browser paints what was scored.
 //
 //   siyahi-contrast styles/siyahi.css
 import { readFileSync, realpathSync } from "node:fs";
 import process from "node:process";
 import { pathToFileURL } from "node:url";
-import { contrast, inSrgb, parseOklch, toHex } from "./color.mjs";
+import { contrastSrgb, inSrgb, mixOklab, oklchToSrgb, over, parseOklch, srgbHex } from "./color.mjs";
 import { readTheme } from "./theme.mjs";
 
 /** @typedef {import("./theme.mjs").Theme} Theme */
-/** @typedef {{ scheme: "light" | "dark", fg: string, bg: string, ratio: number, min: number }} Check */
+/** @typedef {import("./color.mjs").Oklch} Oklch */
+/** @typedef {"light" | "dark"} Scheme */
+/** @typedef {{ scheme: Scheme, fg: string, bg: string, fgHex: string, bgHex: string, ratio: number, min: number }} Check */
+/**
+ * What a component paints, written as Tailwind writes it:
+ * `muted` is the token, `muted/50` the token at 50% over what lies under it,
+ * and `positive@60` is `color-mix(in oklab, var(--positive) 60%, var(--card))`,
+ * a treemap tile.
+ * @typedef {string} Paint
+ */
+/** @typedef {{ fg: Paint, bg: Paint, min: number, scheme?: Scheme }} Pair */
 
-const TEXT = ["foreground", "muted-foreground", "positive", "negative", "warning", "link", "destructive"];
+const TEXT = 4.5;
+const MARK = 3;
 const SURFACES = ["background", "card"];
-const FILLS = [
-  ["card-foreground", "card"],
-  ["popover-foreground", "popover"],
-  ["primary-foreground", "primary"],
-  ["secondary-foreground", "secondary"],
-  ["accent-foreground", "accent"],
-  ["positive-foreground", "positive"],
-  ["negative-foreground", "negative"],
-  ["warning-foreground", "warning"],
-  ["sidebar-foreground", "sidebar"],
-];
 const CHARTS = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
 
+/**
+ * The light label on each treemap heat step, both sides.
+ * @param {Scheme} scheme @param {number[]} shares
+ * @returns {Pair[]}
+ */
+const heatLabels = (scheme, shares) =>
+  ["positive", "negative"].flatMap((side) =>
+    shares.map((share) => ({ fg: "foreground", bg: `${side}@${share}`, min: TEXT, scheme })),
+  );
+
+/** @type {Pair[]} */
+const PAIRS = [
+  // Text on the page and on each token's own fill.
+  ...["foreground", "muted-foreground", "positive", "negative", "warning", "link", "destructive"].map((fg) => ({
+    fg,
+    bg: "",
+    min: TEXT,
+  })),
+  ...[
+    ["card-foreground", "card"],
+    ["popover-foreground", "popover"],
+    ["primary-foreground", "primary"],
+    ["secondary-foreground", "secondary"],
+    ["accent-foreground", "accent"],
+    ["positive-foreground", "positive"],
+    ["negative-foreground", "negative"],
+    ["warning-foreground", "warning"],
+    ["sidebar-foreground", "sidebar"],
+    ["sidebar-primary-foreground", "sidebar-primary"],
+    ["sidebar-accent-foreground", "sidebar-accent"],
+    // A selected toggle or tab: the foreground fill with the canvas colour as text.
+    ["background", "foreground"],
+  ].map(([fg = "", bg = ""]) => ({ fg, bg, min: TEXT })),
+  // Muted text on the fills it sits on: avatar initials and highlighted code
+  // lines (muted), a neutral Callout, CardFooter and the command field
+  // (muted/50), a Quote's source (muted/60), the accent, warning, positive and
+  // negative Callouts and WarningAlert, a removed code line (destructive/10).
+  ...["muted", "muted/50", "muted/60", "chart-1/8", "warning/10", "positive/8", "negative/8", "destructive/10"].map(
+    (bg) => ({ fg: "muted-foreground", bg, min: TEXT }),
+  ),
+  // A destructive button or badge: its tint at rest and on hover, a light
+  // menu item's focus, and a dark input's own fill under its text.
+  { fg: "destructive", bg: "destructive/10", min: TEXT, scheme: "light" },
+  { fg: "destructive", bg: "destructive/20", min: TEXT },
+  { fg: "destructive", bg: "destructive/30", min: TEXT, scheme: "dark" },
+  { fg: "foreground", bg: "input/30", min: TEXT, scheme: "dark" },
+  { fg: "muted-foreground", bg: "input/30", min: TEXT, scheme: "dark" },
+  // A field's edge against the page, against its own fill (a slider's muted
+  // track, the command field, a dark field), so the box reads as a box. A
+  // focus ring and an invalid field's edge recolour that edge and are read
+  // against the page.
+  ...["", "muted", "muted/50"].map((bg) => ({ fg: "input", bg, min: MARK })),
+  { fg: "input", bg: "input/30", min: MARK, scheme: "dark" },
+  ...["ring", "destructive"].map((fg) => ({ fg, bg: "", min: MARK })),
+  // The selected tab's fill against its list.
+  { fg: "foreground", bg: "muted", min: MARK },
+  // Chart marks on the canvas and the card. A dimmed bar keeps its full colour
+  // as its outline, so these are the outlines too.
+  ...[...CHARTS, "positive", "negative"].map((fg) => ({ fg, bg: "", min: MARK })),
+  ...CHARTS.slice(0, -1).map((fg, i) => ({ fg, bg: CHARTS[i + 1] ?? "", min: MARK })),
+  // Treemap labels on every heat step (lib/treemap.ts heatFill): 12% to 60% of
+  // the meaning colour in the card in light, 25% to 60% in dark.
+  ...heatLabels("light", [12, 24, 36, 48, 60]),
+  ...heatLabels("dark", [25, 33.75, 42.5, 51.25, 60]),
+];
+
 /**
  * @param {Theme} theme
  * @returns {Check[]}
  */
 export function checkContrast(theme) {
-  /** @type {Check[]} */
-  const checks = [];
+  /** @type {Map<string, Check>} */
+  const checks = new Map();
   for (const scheme of /** @type {const} */ (["light", "dark"])) {
-    const vars = theme[scheme];
-    const color = (/** @type {string} */ name) => {
-      const value = vars[name];
+    const token = (/** @type {string} */ name) => {
+      const value = theme[scheme][name];
       if (value === undefined) throw new Error(`${scheme}: --${name} is not set in the ${scheme} block`);
       const parsed = parseOklch(value);
       if (!parsed) throw new Error(`${scheme}: --${name} is "${value}", not an oklch() colour`);
-      if (parsed.alpha < 1) throw new Error(`${scheme}: --${name} is translucent; contrast needs an opaque colour`);
       return parsed;
     };
-    const pair = (/** @type {string} */ fg, /** @type {string} */ bg, /** @type {number} */ min) =>
-      checks.push({ scheme, fg, bg, ratio: contrast(color(fg), color(bg)), min });
-    for (const fg of TEXT) for (const bg of SURFACES) pair(fg, bg, 4.5);
-    for (const [fg, bg] of FILLS) pair(/** @type {string} */ (fg), /** @type {string} */ (bg), 4.5);
-    CHARTS.forEach((chart, i) => {
-      pair(chart, "card", 3);
-      const next = CHARTS[i + 1];
-      if (next) pair(chart, next, 3);
-    });
+    /**
+     * The sRGB a paint shows over what lies under it, and how a message names it.
+     * @param {Paint} paint @param {{ rgb: [number, number, number], name: string }} under
+     */
+    const paintOver = (paint, under) => {
+      const [, name = "", sep, amount] = /^([\w-]+)(?:([/@])([\d.]+))?$/.exec(paint) ?? [];
+      const base = token(name);
+      if (sep === "@") {
+        const rgb = oklchToSrgb(mixOklab(base, token("card"), Number(amount) / 100));
+        return { rgb, name: `--${name} ${amount}% in --card` };
+      }
+      const alpha = base.alpha * (sep === "/" ? Number(amount) / 100 : 1);
+      if (alpha === 1) return { rgb: oklchToSrgb(base), name: `--${paint}` };
+      return { rgb: over({ ...base, alpha }, under.rgb), name: `--${paint} over ${under.name}` };
+    };
+    for (const pair of PAIRS) {
+      if (pair.scheme && pair.scheme !== scheme) continue;
+      for (const surface of SURFACES) {
+        const page = { rgb: oklchToSrgb(token(surface)), name: `--${surface}` };
+        const bg = pair.bg ? paintOver(pair.bg, page) : page;
+        const fg = paintOver(pair.fg, bg);
+        const [fgHex, bgHex] = [srgbHex(fg.rgb), srgbHex(bg.rgb)];
+        const ratio = contrastSrgb(fg.rgb, bg.rgb);
+        checks.set(`${scheme} ${fg.name} ${bg.name}`, {
+          scheme,
+          fg: fg.name,
+          bg: bg.name,
+          fgHex,
+          bgHex,
+          ratio,
+          min: pair.min,
+        });
+      }
+    }
   }
-  return checks;
+  return [...checks.values()];
 }
 
 /**
- * Chart colours outside sRGB, named for the error message.
+ * Colours outside sRGB, named for the error message.
  * @param {Theme} theme
  * @returns {string[]}
  */
 export function checkGamut(theme) {
   return /** @type {const} */ (["light", "dark"]).flatMap((scheme) =>
-    CHARTS.filter((name) => {
-      const parsed = parseOklch(theme[scheme][name] ?? "");
-      return parsed !== null && !inSrgb(parsed);
-    }).map((name) => `${scheme} --${name} ${theme[scheme][name]} is outside sRGB; lower its chroma`),
+    Object.entries(theme[scheme])
+      .filter(([, value]) => {
+        const parsed = parseOklch(value);
+        return parsed !== null && !inSrgb(parsed);
+      })
+      .map(([name, value]) => `${scheme} --${name} ${value} is outside sRGB; lower its chroma`),
   );
 }
 
-/**
- * @param {Theme} theme
- * @param {Check} check
- */
-function describe(theme, check) {
-  const hex = (/** @type {string} */ name) => {
-    const parsed = parseOklch(theme[check.scheme][name] ?? "");
-    return parsed ? toHex(parsed) : "?";
-  };
-  return `${check.scheme.padEnd(5)} --${check.fg} ${hex(check.fg)} on --${check.bg} ${hex(check.bg)}: ${check.ratio.toFixed(2)}:1 (needs ${check.min}:1)`;
+/** @param {Check} check */
+function describe(check) {
+  return `${check.scheme.padEnd(5)} ${check.fg} ${check.fgHex} on ${check.bg} ${check.bgHex}: ${check.ratio.toFixed(2)}:1 (needs ${check.min}:1)`;
 }
 
 // Run as a command, not when imported. A package manager starts this file
@@ -100,12 +186,12 @@ if (import.meta.url === invoked) {
   const checks = checkContrast(theme);
   const failures = checks.filter((c) => c.ratio < c.min);
   const outOfGamut = checkGamut(theme);
-  for (const check of failures) console.error(`FAIL ${describe(theme, check)}`);
+  for (const check of failures) console.error(`FAIL ${describe(check)}`);
   for (const problem of outOfGamut) console.error(`FAIL ${problem}`);
   const weakest = checks.toSorted((a, b) => a.ratio / a.min - b.ratio / b.min)[0];
   console.log(
     `contrast: ${checks.length - failures.length}/${checks.length} pairs pass` +
-      (weakest ? `; closest: ${describe(theme, weakest)}` : ""),
+      (weakest ? `; closest: ${describe(weakest)}` : ""),
   );
   process.exit(failures.length || outOfGamut.length ? 1 : 0);
 }

package/lint/index.mjs

@@ -1,8 +1,8 @@
 // @ts-check
 // Oxlint (and ESLint) plugin `siyahi`. Every rule runs only in files that
 // import `@siyahi/ui`, so pages written before Siyahi stay outside the rules
-// without any configuration. Two rules come from @shadcn/lint as they are;
-// the other three cover what it does not check.
+// without any configuration. Three rules come from @shadcn/lint; the other
+// four cover what it does not check.
 import { plugin as shadcn } from "@shadcn/lint";
 
 /** @typedef {{ sourceCode: { text: string }, report: (problem: { node: unknown, message: string }) => void }} Context */
@@ -138,6 +138,31 @@ const noChartThemeMap = {
   }),
 };
 
+/**
+ * Options for shadcn's no-restyle, so every app gets the same policy from
+ * `"siyahi/no-restyle": "error"` alone. Pages may place a component (margin,
+ * width, grid and flex placement); its spacing, colour, shape and type stay
+ * the component's. Primitives with no styles of their own are open.
+ */
+const RESTYLE = {
+  allow: ["layout"],
+  contracts: [{ pattern: "^(Collapsible|CollapsibleContent)$", allow: ["layout", "spacing"] }],
+};
+
+/**
+ * Runs `rule` with `options` unless the config passes its own.
+ * @param {Rule} rule
+ * @param {object} options
+ * @returns {Rule}
+ */
+function withOptions(rule, options) {
+  return {
+    ...rule,
+    create: (context) =>
+      rule.create(context.options?.length ? context : Object.create(context, { options: { value: [options] } })),
+  };
+}
+
 /** @type {{ meta: { name: string }, rules: Record<string, Rule> }} */
 const plugin = {
   meta: { name: "siyahi" },
@@ -148,6 +173,7 @@ const plugin = {
     "no-chart-theme-map": scoped(noChartThemeMap),
     "no-raw-colors": scoped(shadcn.rules["no-raw-colors"]),
     "no-arbitrary-values": scoped(shadcn.rules["no-arbitrary-values"]),
+    "no-restyle": scoped(withOptions(shadcn.rules["no-restyle"], RESTYLE)),
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/tools",
-  "version": "0.1.9-next.21",
+  "version": "0.1.9-next.22",
   "description": "Checks and build helpers for Siyahi pages: a lint plugin, a font preload plugin, a theme contrast check, and screenshot and layout shift scripts.",
   "homepage": "https://siyahi.jatinbansal.com",
   "license": "MIT",

package/types/color.d.mts

@@ -27,6 +27,13 @@ export declare function oklchToSrgb(color: Oklch): [number, number, number];
  * @returns {number}
  */
 export declare function luminance([r, g, b]: [number, number, number]): number;
+/**
+ * WCAG contrast ratio between two opaque colours, as gamma-encoded sRGB.
+ * @param {[number, number, number]} a
+ * @param {[number, number, number]} b
+ * @returns {number}
+ */
+export declare function contrastSrgb(a: [number, number, number], b: [number, number, number]): number;
 /**
  * WCAG contrast ratio between two opaque OKLCH colours.
  * @param {Oklch} a
@@ -34,9 +41,31 @@ export declare function luminance([r, g, b]: [number, number, number]): number;
  * @returns {number}
  */
 export declare function contrast(a: Oklch, b: Oklch): number;
+/**
+ * The colour a translucent colour paints over an opaque one. Browsers blend
+ * gamma-encoded sRGB channels, so `bg-muted/50` over the card is half of each.
+ * @param {Oklch} top
+ * @param {[number, number, number]} under
+ * @returns {[number, number, number]}
+ */
+export declare function over(top: Oklch, [r0, g0, b0]: [number, number, number]): [number, number, number];
+/**
+ * `color-mix(in oklab, a share, b)`, with share in 0..1 and opaque inputs.
+ * @param {Oklch} a
+ * @param {Oklch} b
+ * @param {number} share
+ * @returns {Oklch}
+ */
+export declare function mixOklab(a: Oklch, b: Oklch, share: number): Oklch;
 /**
  * Hex form of an OKLCH colour, for messages and tests.
  * @param {Oklch} color
  * @returns {string}
  */
 export declare function toHex(color: Oklch): string;
+/**
+ * Hex form of gamma-encoded sRGB channels in 0..1.
+ * @param {[number, number, number]} rgb
+ * @returns {string}
+ */
+export declare function srgbHex(rgb: [number, number, number]): string;

package/types/contrast.d.mts

@@ -1,19 +1,30 @@
 #!/usr/bin/env node
 export type Theme = import("./theme.mjs").Theme;
+export type Oklch = import("./color.mjs").Oklch;
+export type Scheme = "light" | "dark";
 export type Check = {
-    scheme: "light" | "dark";
+    scheme: Scheme;
     fg: string;
     bg: string;
+    fgHex: string;
+    bgHex: string;
     ratio: number;
     min: number;
 };
+export type Paint = string;
+export type Pair = {
+    fg: Paint;
+    bg: Paint;
+    min: number;
+    scheme?: Scheme;
+};
 /**
  * @param {Theme} theme
  * @returns {Check[]}
  */
 export declare function checkContrast(theme: Theme): Check[];
 /**
- * Chart colours outside sRGB, named for the error message.
+ * Colours outside sRGB, named for the error message.
  * @param {Theme} theme
  * @returns {string[]}
  */