pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Theme/tokens/builders/focusRing.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withFocusRing = exports.buildFocusRing = exports.focusRingBackdrops = void 0;
+exports.settleBetween = settleBetween;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const planeStep_1 = require("./planeStep");
+/** Same lightness granularity `buildDarkPalette` walks its accents at. */
+const LIGHTNESS_STEP = 0.5;
+// NOTE: not settleAcross — a ring squeezed between a light canvas and a dark fill needs the closest color that clears both, not a per-surface lift.
+function settleBetween(hex, backdrops, target = outlineRung_1.AA_NON_TEXT) {
+    const clears = (candidate) => backdrops.every((backdrop) => (0, color_1.contrastRatio)(candidate, backdrop) >= target);
+    if (clears(hex))
+        return hex;
+    const { l } = (0, color_1.hexToHsl)(hex);
+    for (let step = LIGHTNESS_STEP; step <= 100; step += LIGHTNESS_STEP) {
+        const darker = (0, color_1.withLightness)(hex, l - step);
+        if (clears(darker))
+            return darker;
+        const lighter = (0, color_1.withLightness)(hex, l + step);
+        if (clears(lighter))
+            return lighter;
+    }
+    // NOTE: unreachable for shipped brands (gated by focusRing.test.ts) — takes the least-bad end rather than throwing.
+    const ends = [(0, color_1.withLightness)(hex, 0), (0, color_1.withLightness)(hex, 100)];
+    const worst = (candidate) => Math.min(...backdrops.map((backdrop) => (0, color_1.contrastRatio)(candidate, backdrop)));
+    return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
+}
+// NOTE: canvas, card and the table header band — including the fill or every named surface leaves no solvable hue.
+const focusRingBackdrops = (source) => [
+    source.backgroundColor.main,
+    source.background[50],
+    source.backgroundColor.tableHeader,
+    (0, planeStep_1.bandOn)(source.backgroundColor.tableHeader, source.background[50]),
+];
+exports.focusRingBackdrops = focusRingBackdrops;
+// NOTE: replaces Chakra's stock ring (a fixed blue that measured under 2:1 on every brand).
+const buildFocusRing = (source) => {
+    const halo = settleBetween(source.background[50], [source.primary[500]]);
+    return {
+        halo,
+        ring: settleBetween(source.primary[500], [...(0, exports.focusRingBackdrops)(source), halo]),
+    };
+};
+exports.buildFocusRing = buildFocusRing;
+// NOTE: re-derives against the FINISHED palette — a brand file can still override primary/background after the generic pass.
+const withFocusRing = (palette) => ({
+    ...palette,
+    focusRing: (0, exports.buildFocusRing)(palette),
+});
+exports.withFocusRing = withFocusRing;

package/dist/Theme/tokens/builders/gradientInk.d.ts

@@ -0,0 +1,12 @@
+export type Gradient = {
+    from: string;
+    to: string;
+};
+/** A gradient already safe to paint, plus the ink that is guaranteed legible on it. */
+export type ResolvedGradient = Gradient & {
+    ink: string;
+};
+export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
+export declare const resolveGradient: (gradient: Gradient, white: string, black: string) => ResolvedGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export declare const gradientCss: (g: Gradient, angle?: string) => string;

package/dist/Theme/tokens/builders/gradientInk.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gradientCss = exports.resolveGradient = exports.inkSafeGradient = void 0;
+const accentText_1 = require("./accentText");
+const statusTone_1 = require("./statusTone");
+// NOTE: sinks both stops until white ink clears AA — otherwise a mid-tone gradient flips onGradient to black.
+const inkSafeGradient = (gradient) => ({
+    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
+    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
+});
+exports.inkSafeGradient = inkSafeGradient;
+// The only correct way to paint gradient text — returns the stops to draw AND the ink for them together.
+const resolveGradient = (gradient, white, black) => {
+    const { from, to } = (0, exports.inkSafeGradient)(gradient);
+    return { from, to, ink: (0, accentText_1.onGradient)(from, to, white, black) };
+};
+exports.resolveGradient = resolveGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;
+exports.gradientCss = gradientCss;

package/dist/Theme/tokens/builders/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./accentText";
+export * from "./buildBrandTokens";
+export * from "./buildDarkPalette";
+export * from "./chartColorsFromTheme";
+export * from "./color";
+export * from "./focusRing";
+export * from "./scrollbar";
+export * from "./gradientInk";
+export * from "./placeholderInk";
+export * from "./tone";
+export * from "./scrim";
+export * from "./tooltipSurface";
+export * from "./surfaceRaised";
+export * from "./star";

package/dist/Theme/tokens/builders/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accentText"), exports);
+__exportStar(require("./buildBrandTokens"), exports);
+__exportStar(require("./buildDarkPalette"), exports);
+__exportStar(require("./chartColorsFromTheme"), exports);
+__exportStar(require("./color"), exports);
+__exportStar(require("./focusRing"), exports);
+__exportStar(require("./scrollbar"), exports);
+__exportStar(require("./gradientInk"), exports);
+__exportStar(require("./placeholderInk"), exports);
+__exportStar(require("./tone"), exports);
+__exportStar(require("./scrim"), exports);
+__exportStar(require("./tooltipSurface"), exports);
+__exportStar(require("./surfaceRaised"), exports);
+__exportStar(require("./star"), exports);

package/dist/Theme/tokens/builders/lazy.d.ts

@@ -0,0 +1,5 @@
+import type { BrandPaletteSource, PaletteProps } from "../types";
+export declare const lazyObject: <T extends object>(keys: ReadonlyArray<keyof T>, build: () => T) => T;
+export declare const paletteKeys: (source: BrandPaletteSource) => Array<keyof PaletteProps>;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+export declare const lazyPalette: <T extends PaletteProps>(source: BrandPaletteSource, build: () => T) => T;

package/dist/Theme/tokens/builders/lazy.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyPalette = exports.paletteKeys = exports.lazyObject = void 0;
+const dataProperty = (value) => ({
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+});
+// NOTE: first read of any key builds once and swaps every getter for a plain data property.
+const lazyObject = (keys, build) => {
+    const target = {};
+    let built;
+    const materialise = () => {
+        if (built)
+            return built;
+        const value = build();
+        built = value;
+        if (!Object.isSealed(target)) {
+            keys.forEach((key) => Object.defineProperty(target, key, dataProperty(value[key])));
+        }
+        return value;
+    };
+    keys.forEach((key) => Object.defineProperty(target, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => materialise()[key],
+        set: (next) => {
+            materialise();
+            Object.defineProperty(target, key, dataProperty(next));
+        },
+    }));
+    return target;
+};
+exports.lazyObject = lazyObject;
+// NOTE: order matches finalizeLightPalette and buildDarkPalette, which append these after the source keys.
+const DERIVED = {
+    accentText: true,
+    textMuted: true,
+    semanticText: true,
+    onPrimary: true,
+    onSemantic: true,
+    focusRing: true,
+    surfaceRaised: true,
+    star: true,
+};
+const DERIVED_KEYS = Object.keys(DERIVED);
+const paletteKeys = (source) => [
+    ...Object.keys(source),
+    ...DERIVED_KEYS.filter((key) => !(key in source)),
+];
+exports.paletteKeys = paletteKeys;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+const lazyPalette = (source, build) => (0, exports.lazyObject)((0, exports.paletteKeys)(source), build);
+exports.lazyPalette = lazyPalette;

package/dist/Theme/tokens/builders/memo.d.ts

@@ -0,0 +1,9 @@
+import type { ColorScale } from "../types";
+export declare const MEMO_LIMIT = 1024;
+export declare const memoize: <A extends unknown[], R>(fn: (...args: A) => R, keyOf: (...args: A) => string, limit?: number) => ((...args: A) => R);
+export declare const scaleKey: (s: ColorScale) => string;
+export declare const memoCaches: () => ReadonlyArray<{
+    size: number;
+    limit: number;
+}>;
+export declare const clearMemoCaches: () => void;

package/dist/Theme/tokens/builders/memo.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearMemoCaches = exports.memoCaches = exports.scaleKey = exports.memoize = exports.MEMO_LIMIT = void 0;
+const registry = [];
+exports.MEMO_LIMIT = 1024;
+// NOTE: clear-on-overflow, not LRU — a hit stays one Map lookup; contrast walks mint many one-off keys.
+const memoize = (fn, keyOf, limit = exports.MEMO_LIMIT) => {
+    const cache = new Map();
+    registry.push({ cache, limit });
+    return (...args) => {
+        const key = keyOf(...args);
+        const hit = cache.get(key);
+        if (hit !== undefined)
+            return hit;
+        const value = fn(...args);
+        if (cache.size >= limit)
+            cache.clear();
+        cache.set(key, value);
+        return value;
+    };
+};
+exports.memoize = memoize;
+const scaleKey = (s) => `${s[50]}|${s[100]}|${s[200]}|${s[300]}|${s[400]}|${s[500]}|${s[600]}|${s[700]}|${s[800]}|${s[900]}`;
+exports.scaleKey = scaleKey;
+const memoCaches = () => registry.map(({ cache, limit }) => ({ size: cache.size, limit }));
+exports.memoCaches = memoCaches;
+const clearMemoCaches = () => registry.forEach(({ cache }) => cache.clear());
+exports.clearMemoCaches = clearMemoCaches;

package/dist/Theme/tokens/builders/memoByReads.d.ts

@@ -0,0 +1,2 @@
+export declare const READS_MEMO_LIMIT = 16;
+export declare const memoiseByReads: <P extends object, R>(fn: (props: P) => R, limit?: number) => ((props: P) => R);

package/dist/Theme/tokens/builders/memoByReads.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memoiseByReads = exports.READS_MEMO_LIMIT = void 0;
+exports.READS_MEMO_LIMIT = 16;
+// NOTE: keyed on exactly the props a call read; a call that enumerates or probes props is never cached.
+const memoiseByReads = (fn, limit = exports.READS_MEMO_LIMIT) => {
+    const entries = [];
+    return (props) => {
+        const source = props;
+        const hit = entries.find((entry) => entry.keys.every((key, i) => Object.is(source[key], entry.values[i])));
+        if (hit)
+            return hit.result;
+        const reads = new Map();
+        let opaque = false;
+        const tracked = new Proxy(props, {
+            get(target, key, receiver) {
+                const value = Reflect.get(target, key, receiver);
+                if (typeof key !== "string")
+                    opaque = true;
+                else if (!reads.has(key))
+                    reads.set(key, value);
+                return value;
+            },
+            has(target, key) {
+                opaque = true;
+                return Reflect.has(target, key);
+            },
+            ownKeys(target) {
+                opaque = true;
+                return Reflect.ownKeys(target);
+            },
+            getOwnPropertyDescriptor(target, key) {
+                opaque = true;
+                return Reflect.getOwnPropertyDescriptor(target, key);
+            },
+        });
+        const result = fn(tracked);
+        if (!opaque) {
+            if (entries.length >= limit)
+                entries.shift();
+            entries.push({
+                keys: [...reads.keys()],
+                values: [...reads.values()],
+                result,
+            });
+        }
+        return result;
+    };
+};
+exports.memoiseByReads = memoiseByReads;

package/dist/Theme/tokens/builders/mutedText.d.ts

@@ -0,0 +1,5 @@
+import type { ColorScale } from "../types";
+/** WCAG 1.4.3 — muted is still body text. */
+export declare const AA_NORMAL_TEXT = 4.5;
+export declare const MUTED_TEXT_CEILING = 8;
+export declare const buildMutedText: (text: ColorScale, canvas: string) => string;

package/dist/Theme/tokens/builders/mutedText.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMutedText = exports.MUTED_TEXT_CEILING = exports.AA_NORMAL_TEXT = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+/** WCAG 1.4.3 — muted is still body text. */
+exports.AA_NORMAL_TEXT = 4.5;
+exports.MUTED_TEXT_CEILING = 8;
+const settleUnder = (hex, canvas, ceiling) => {
+    const { s, l } = (0, color_1.hexToHsl)(hex);
+    const toward = (0, color_1.relativeLuminance)(canvas) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let next = l; (0, color_1.contrastRatio)(settled, canvas) > ceiling; next += toward) {
+        settled = (0, color_1.withLightness)(hex, next, s);
+    }
+    return settled;
+};
+const buildMutedText = (text, canvas) => (0, outlineRung_1.liftToContrast)(settleUnder(text[400], canvas, exports.MUTED_TEXT_CEILING), canvas, exports.AA_NORMAL_TEXT);
+exports.buildMutedText = buildMutedText;

package/dist/Theme/tokens/builders/outlineRung.d.ts

@@ -0,0 +1,14 @@
+import type { PaletteProps } from "../types";
+export declare const MIN_PERCEPTIBLE_STEP = 1.15;
+export declare const AA_NON_TEXT = 3;
+export declare const CHROME_BORDER = 1.5;
+export declare const CHROME_RULE = 1.31;
+export declare function ruleInk(hex: string, surfaces: readonly string[], target: number): string;
+export declare const STACKED_STATE_STEP = 1.08;
+export declare function tintStep(seed: string, backdrop: string, target: number): string;
+export declare function liftToContrast(hex: string, backdrop: string, target?: number): string;
+export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
+export declare function withOutlineRung(palette: PaletteProps): PaletteProps;
+export declare function resolveHoverTint(seed: string, restSurface: string): string;
+export declare function settleAcross(hex: string, surfaces: readonly string[], target: number): string;
+export declare function neutralStep(backdrop: string, target: number): string;

package/dist/Theme/tokens/builders/outlineRung.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STACKED_STATE_STEP = exports.CHROME_RULE = exports.CHROME_BORDER = exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.ruleInk = ruleInk;
+exports.tintStep = tintStep;
+exports.liftToContrast = liftToContrast;
+exports.softenToContrast = softenToContrast;
+exports.withOutlineRung = withOutlineRung;
+exports.resolveHoverTint = resolveHoverTint;
+exports.settleAcross = settleAcross;
+exports.neutralStep = neutralStep;
+const color_1 = require("./color");
+const memo_1 = require("./memo");
+exports.MIN_PERCEPTIBLE_STEP = 1.15;
+exports.AA_NON_TEXT = 3;
+// NOTE: settles below AA_NON_TEXT — focusRing.ts covers the 1.4.11 gate instead.
+exports.CHROME_BORDER = 1.5;
+exports.CHROME_RULE = 1.31;
+function ruleInk(hex, surfaces, target) {
+    const loudest = surfaces.reduce((worst, s) => (0, color_1.contrastRatio)(hex, s) > (0, color_1.contrastRatio)(hex, worst) ? s : worst);
+    return (0, color_1.contrastRatio)(hex, loudest) > target
+        ? softenToContrast(hex, loudest, target)
+        : hex;
+}
+exports.STACKED_STATE_STEP = 1.08;
+// NOTE: walks out from the backdrop, so it settles a too-loud seed down as readily as it lifts a faint one.
+function tintStep(seed, backdrop, target) {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    const away = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? 1 : -1;
+    for (let l = (0, color_1.hexToHsl)(backdrop).l; l >= 0 && l <= 100; l += away) {
+        const next = (0, color_1.withLightness)(seed, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(seed, away > 0 ? 100 : 0, s);
+}
+const contrastKey = (hex, backdrop, target) => `${hex}|${backdrop}|${target}`;
+const liftMemo = (0, memo_1.memoize)((hex, backdrop, target) => {
+    if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
+        return hex;
+    const { s, l: start } = (0, color_1.hexToHsl)(hex);
+    const away = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? 1 : -1;
+    for (const step of [away, -away]) {
+        let l = start;
+        while (l > 0 && l < 100) {
+            l += step;
+            const next = (0, color_1.withLightness)(hex, l, s);
+            if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+                return next;
+        }
+    }
+    const ends = [(0, color_1.withLightness)(hex, 100, s), (0, color_1.withLightness)(hex, 0, s)];
+    return (0, color_1.contrastRatio)(ends[0], backdrop) >= (0, color_1.contrastRatio)(ends[1], backdrop) ? ends[0] : ends[1];
+}, contrastKey);
+function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
+    return liftMemo(hex, backdrop, target);
+}
+const softenMemo = (0, memo_1.memoize)((hex, backdrop, target) => {
+    if ((0, color_1.contrastRatio)(hex, backdrop) <= target)
+        return hex;
+    const { s, l: start } = (0, color_1.hexToHsl)(hex);
+    const toward = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? -1 : 1;
+    let softest = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = (0, color_1.withLightness)(hex, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) < target)
+            break;
+        softest = next;
+    }
+    return softest;
+}, contrastKey);
+function softenToContrast(hex, backdrop, target) {
+    return softenMemo(hex, backdrop, target);
+}
+// NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
+function withOutlineRung(palette) {
+    const current = palette.boxborder[500];
+    const backdrop = (0, color_1.contrastRatio)(current, palette.backgroundColor.main) <=
+        (0, color_1.contrastRatio)(current, palette.background[50])
+        ? palette.backgroundColor.main
+        : palette.background[50];
+    const resolved = (0, color_1.contrastRatio)(current, backdrop) > exports.CHROME_BORDER
+        ? softenToContrast(current, backdrop, exports.CHROME_BORDER)
+        : liftToContrast(current, backdrop, exports.CHROME_BORDER);
+    if (resolved === current)
+        return palette;
+    return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
+}
+function resolveHoverTint(seed, restSurface) {
+    return liftToContrast(seed, restSurface, exports.MIN_PERCEPTIBLE_STEP);
+}
+// NOTE: settles against every surface at once — a single "hardest" surface can drop under target on another.
+function settleAcross(hex, surfaces, target) {
+    const clearsAll = (c) => surfaces.every((s) => (0, color_1.contrastRatio)(c, s) >= target);
+    if (!clearsAll(hex)) {
+        return surfaces.reduce((ink, s) => liftToContrast(ink, s, target), hex);
+    }
+    const { s: sat, l: start } = (0, color_1.hexToHsl)(hex);
+    const toward = (0, color_1.relativeLuminance)(surfaces[0]) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = (0, color_1.withLightness)(hex, l, sat);
+        if (!clearsAll(next))
+            break;
+        settled = next;
+    }
+    return settled;
+}
+// NOTE: binary search, not liftToContrast — a seed already at lightness 0/100 can't walk.
+function neutralStep(backdrop, target) {
+    const grey = (l) => (0, color_1.withLightness)("#808080", l, 0);
+    let lo = (0, color_1.hexToHsl)(backdrop).l;
+    let hi = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (lo + hi) / 2;
+        if ((0, color_1.contrastRatio)(grey(mid), backdrop) < target)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return grey(hi);
+}

package/dist/Theme/tokens/builders/paletteScale.d.ts

@@ -0,0 +1,2 @@
+import type { ColorScale, PaletteProps } from "../types";
+export declare const scaleNamed: (colors: PaletteProps, name: string) => ColorScale | undefined;

package/dist/Theme/tokens/builders/paletteScale.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleNamed = void 0;
+const isColorScale = (value) => typeof value === "object" && value !== null && "500" in value;
+const scaleNamed = (colors, name) => {
+    const entries = colors;
+    const value = entries[name];
+    return isColorScale(value) ? value : undefined;
+};
+exports.scaleNamed = scaleNamed;

package/dist/Theme/tokens/builders/placeholderInk.d.ts

@@ -0,0 +1,7 @@
+import type { PaletteProps } from "../types";
+/** A field always renders on at least one surface — the first is the reference backdrop. */
+export type FieldSurfaces = readonly [string, ...string[]];
+export declare const placeholderInkOn: (palette: PaletteProps, surfaces: FieldSurfaces) => string;
+export declare const fieldSurfaces: (palette: PaletteProps) => FieldSurfaces;
+/** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
+export declare const placeholderInk: (palette: PaletteProps) => string;

package/dist/Theme/tokens/builders/placeholderInk.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.placeholderInk = exports.fieldSurfaces = exports.placeholderInkOn = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const surfaceRungs_1 = require("./surfaceRungs");
+// NOTE: settled (not floored) onto PLACEHOLDER_TEXT — one hint weight across brands, not a per-brand accident.
+const placeholderInkOn = (palette, surfaces) => {
+    const rung = palette.placeholder[500];
+    const hardest = surfaces.reduce((worst, s) => (0, color_1.contrastRatio)(rung, s) < (0, color_1.contrastRatio)(rung, worst) ? s : worst);
+    return (0, color_1.contrastRatio)(rung, hardest) > surfaceRungs_1.PLACEHOLDER_TEXT
+        ? (0, outlineRung_1.softenToContrast)(rung, hardest, surfaceRungs_1.PLACEHOLDER_TEXT)
+        : (0, outlineRung_1.liftToContrast)(rung, hardest, surfaceRungs_1.PLACEHOLDER_TEXT);
+};
+exports.placeholderInkOn = placeholderInkOn;
+// NOTE: enabled fields only — 1.4.3 exempts disabled ones, and folding their dimmer fill in would darken every other field's hint.
+const fieldSurfaces = (palette) => [
+    palette.gray[50],
+    palette.background[50],
+    palette.backgroundColor.main,
+];
+exports.fieldSurfaces = fieldSurfaces;
+/** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
+const placeholderInk = (palette) => (0, exports.placeholderInkOn)(palette, (0, exports.fieldSurfaces)(palette));
+exports.placeholderInk = placeholderInk;

package/dist/Theme/tokens/builders/planeStep.d.ts

@@ -0,0 +1,5 @@
+import type { PaletteProps } from "../types";
+export declare const bandOn: (fill: string, plane: string) => string;
+export declare const recessOn: (fill: string, plane: string) => string;
+export declare const ruleOn: (colors: Pick<PaletteProps, "boxborder">, plane: string) => string;
+export declare const cardRule: (colors: Pick<PaletteProps, "boxborder" | "background">) => string;

package/dist/Theme/tokens/builders/planeStep.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRule = exports.ruleOn = exports.recessOn = exports.bandOn = void 0;
+const accentText_1 = require("./accentText");
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const holds = (fill, plane, target) => !(0, accentText_1.isDarkCanvas)(plane) || (0, color_1.contrastRatio)(fill, plane) >= target;
+const bandOn = (fill, plane) => holds(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP) ? fill : (0, outlineRung_1.tintStep)(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+exports.bandOn = bandOn;
+const recessOn = (fill, plane) => holds(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP)
+    ? fill
+    : (0, planes_1.lift)(accentText_1.DEFAULT_BLACK, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+exports.recessOn = recessOn;
+const ruleOn = (colors, plane) => {
+    const rule = colors.boxborder[200];
+    return holds(rule, plane, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, plane, outlineRung_1.CHROME_RULE);
+};
+exports.ruleOn = ruleOn;
+const cardRule = (colors) => (0, exports.ruleOn)(colors, colors.background[50]);
+exports.cardRule = cardRule;

package/dist/Theme/tokens/builders/planes.d.ts

@@ -0,0 +1,4 @@
+export declare const CARD_LIFT = 1.16;
+export declare const RAISED_LIFT = 1.15;
+export declare function lift(ink: string, base: string, target: number): string;
+export declare function liftUnder(ink: string, base: string, target: number, marks: readonly string[]): string;

package/dist/Theme/tokens/builders/planes.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RAISED_LIFT = exports.CARD_LIFT = void 0;
+exports.lift = lift;
+exports.liftUnder = liftUnder;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.CARD_LIFT = 1.16;
+exports.RAISED_LIFT = 1.15;
+const STEP = 0.005;
+const MAX_WEIGHT = 0.4;
+function lift(ink, base, target) {
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = (0, color_1.mix)(base, ink, t);
+        if ((0, color_1.contrastRatio)(next, base) >= target)
+            return next;
+    }
+    return (0, color_1.mix)(base, ink, MAX_WEIGHT);
+}
+const clearsMarks = (surface, marks) => marks.every((mark) => (0, color_1.contrastRatio)(mark, surface) >= outlineRung_1.AA_NON_TEXT);
+// NOTE: stops one step early rather than drop a filled mark under 3:1 on the lifted plane.
+function liftUnder(ink, base, target, marks) {
+    let settled = base;
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = (0, color_1.mix)(base, ink, t);
+        if (!clearsMarks(next, marks))
+            return settled;
+        if ((0, color_1.contrastRatio)(next, base) >= target)
+            return next;
+        settled = next;
+    }
+    return settled;
+}

package/dist/Theme/tokens/builders/rechartsTheme.d.ts

@@ -0,0 +1,56 @@
+import type { PaletteProps } from "../types";
+export interface RechartsGridTheme {
+    stroke: string;
+    strokeDasharray: string;
+}
+export interface RechartsAxisTheme {
+    stroke: string;
+    tick: {
+        fill: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+}
+export interface RechartsTooltipTheme {
+    contentStyle: {
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    labelStyle: {
+        color: string;
+        fontWeight: number;
+    };
+    itemStyle: {
+        color: string;
+    };
+    cursor: {
+        stroke: string;
+        strokeDasharray: string;
+    };
+}
+export interface RechartsLegendTheme {
+    wrapperStyle: {
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+}
+export interface RechartsChartTheme {
+    seriesColors: string[];
+    grid: RechartsGridTheme;
+    axis: RechartsAxisTheme;
+    tooltip: RechartsTooltipTheme;
+    legend: RechartsLegendTheme;
+    referenceLine: {
+        stroke: string;
+        strokeDasharray: string;
+    };
+    surface: string;
+    text: string;
+    muted: string;
+}
+export declare function buildRechartsTheme(colors: PaletteProps): RechartsChartTheme;