pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -19,6 +19,12 @@ __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

@@ -1,5 +1,5 @@
 import type { ColorScale } from "../types";
 /** WCAG 1.4.3 — muted is still body text. */
 export declare const AA_NORMAL_TEXT = 4.5;
-/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
+export declare const MUTED_TEXT_CEILING = 8;
 export declare const buildMutedText: (text: ColorScale, canvas: string) => string;

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

@@ -1,9 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildMutedText = exports.AA_NORMAL_TEXT = void 0;
+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;
-/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
-const buildMutedText = (text, canvas) => (0, outlineRung_1.liftToContrast)(text[400], canvas, exports.AA_NORMAL_TEXT);
+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

@@ -1,40 +1,14 @@
 import type { PaletteProps } from "../types";
-/**
- * The floor a hover/active state's step off its own resting surface must clear to be seen at
- * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
- * A "hover" a user cannot perceive is not a hover.
- */
 export declare const MIN_PERCEPTIBLE_STEP = 1.15;
-/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export declare const AA_NON_TEXT = 3;
-/**
- * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
- * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
- * with the backdrop in every call site, and a redundant argument is one that can be wrong.
- * Tries the far side first, falls back to the near side, and stops at the first passing step.
- */
+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;
-/**
- * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
- * still clears `target`. For ink that must stay legible without reading as body copy.
- */
 export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
-/**
- * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
- * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
- * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
- * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
- *
- * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
- * and outside 1.4.11.
- */
 export declare function withOutlineRung(palette: PaletteProps): PaletteProps;
-/**
- * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
- * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
- * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
- * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
- * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
- * its OWN list background, not necessarily the page canvas.
- */
 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

@@ -1,26 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+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");
-/**
- * The floor a hover/active state's step off its own resting surface must clear to be seen at
- * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
- * A "hover" a user cannot perceive is not a hover.
- */
+const memo_1 = require("./memo");
 exports.MIN_PERCEPTIBLE_STEP = 1.15;
-/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 exports.AA_NON_TEXT = 3;
-/**
- * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
- * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
- * with the backdrop in every call site, and a redundant argument is one that can be wrong.
- * Tries the far side first, falls back to the near side, and stops at the first passing step.
- */
-function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
+// 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);
@@ -36,12 +51,11 @@ function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     }
     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);
 }
-/**
- * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
- * still clears `target`. For ink that must stay legible without reading as body copy.
- */
-function softenToContrast(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);
@@ -54,37 +68,55 @@ function softenToContrast(hex, backdrop, target) {
         softest = next;
     }
     return softest;
+}, contrastKey);
+function softenToContrast(hex, backdrop, target) {
+    return softenMemo(hex, backdrop, target);
 }
-/**
- * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
- * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
- * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
- * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
- *
- * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
- * and outside 1.4.11.
- */
+// NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
 function withOutlineRung(palette) {
     const current = palette.boxborder[500];
-    // The border sits between the control's fill and the surface behind it; hold it to the
-    // harder of the two.
     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 = liftToContrast(current, backdrop);
+    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 } };
 }
-/**
- * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
- * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
- * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
- * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
- * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
- * its OWN list background, not necessarily the page canvas.
- */
 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

@@ -1,19 +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[]];
-/**
- * The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
- * on every surface a field can land on.
- *
- * It does not walk the rung toward AA in either direction. Lifting it to 4.5 made an empty field
- * read as one already typed into; softening it back down again undershot on the next surface.
- * The published library ships this rung untouched and that is the look being matched.
- */
 export declare const placeholderInkOn: (palette: PaletteProps, surfaces: FieldSurfaces) => string;
-/**
- * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
- * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
- */
 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

@@ -4,24 +4,16 @@ exports.placeholderInk = exports.fieldSurfaces = exports.placeholderInkOn = void
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const surfaceRungs_1 = require("./surfaceRungs");
-/**
- * The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
- * on every surface a field can land on.
- *
- * It does not walk the rung toward AA in either direction. Lifting it to 4.5 made an empty field
- * read as one already typed into; softening it back down again undershot on the next surface.
- * The published library ships this rung untouched and that is the look being matched.
- */
+// 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, outlineRung_1.liftToContrast)(rung, hardest, surfaceRungs_1.PLACEHOLDER_TEXT);
+    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;
-/**
- * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
- * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
- */
+// 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],

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;

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

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRechartsTheme = buildRechartsTheme;
+const radii_1 = __importDefault(require("../primitives/radii"));
+const chartColorsFromTheme_1 = require("./chartColorsFromTheme");
+const FONT = "inherit";
+const FONT_SIZE = "12px";
+const DASH = "4 4";
+// Reuses chartInk/getCategoricalSeriesColors — no parallel color derivation. No recharts import.
+function buildRechartsTheme(colors) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(colors);
+    return {
+        seriesColors: (0, chartColorsFromTheme_1.getCategoricalSeriesColors)(colors),
+        grid: { stroke: ink.grid, strokeDasharray: DASH },
+        axis: {
+            stroke: ink.grid,
+            tick: { fill: ink.axis, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        tooltip: {
+            contentStyle: {
+                backgroundColor: ink.tooltipBg,
+                border: `1px solid ${ink.grid}`,
+                borderRadius: radii_1.default.md,
+                color: ink.text,
+                fontSize: FONT_SIZE,
+                fontFamily: FONT,
+            },
+            labelStyle: { color: ink.text, fontWeight: 600 },
+            itemStyle: { color: ink.text },
+            cursor: { stroke: ink.grid, strokeDasharray: DASH },
+        },
+        legend: {
+            wrapperStyle: { color: ink.muted, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        referenceLine: { stroke: ink.muted, strokeDasharray: DASH },
+        surface: ink.surface,
+        text: ink.text,
+        muted: ink.muted,
+    };
+}

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

@@ -1,10 +1,5 @@
 import { AA_NON_TEXT } from "./outlineRung";
 import type { PaletteProps } from "../types";
-/**
- * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
- * an empty field looked like one already typed into — and the published library ships this rung
- * as the brand authored it. See CHROME-CONSISTENCY.md.
- */
 export declare function withPlaceholderRung(palette: PaletteProps): PaletteProps;
 /** The hover row is a SURFACE, so it steps away from the ink rather than the ink moving. */
 export declare function withTableHoverRung(palette: PaletteProps): PaletteProps;