pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

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.js

@@ -10,6 +10,7 @@ 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.
@@ -33,7 +34,8 @@ function tintStep(seed, backdrop, target) {
     }
     return (0, color_1.withLightness)(seed, away > 0 ? 100 : 0, s);
 }
-function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
+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);
@@ -49,8 +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);
 }
-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);
@@ -63,6 +68,9 @@ function softenToContrast(hex, backdrop, target) {
         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) {

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

@@ -0,0 +1,4 @@
+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 cardRule: (colors: Pick<PaletteProps, "boxborder" | "background">) => string;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRule = 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 cardRule = (colors) => {
+    const rule = colors.boxborder[200];
+    const card = colors.background[50];
+    return holds(rule, card, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, card, outlineRung_1.CHROME_RULE);
+};
+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/skeletonShimmer.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../types";
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+export declare const SKELETON_SHIMMER_CONTRAST = 1.35;
+export interface SkeletonShimmer {
+    start: string;
+    end: string;
+}
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+export declare const skeletonShimmer: (palette: PaletteProps) => SkeletonShimmer;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonShimmer = exports.SKELETON_SHIMMER_CONTRAST = void 0;
+const color_1 = require("./color");
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+exports.SKELETON_SHIMMER_CONTRAST = 1.35;
+const settleAway = (seed, base, target) => {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    let near = (0, color_1.hexToHsl)(base).l;
+    let far = (0, color_1.relativeLuminance)(base) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (near + far) / 2;
+        if ((0, color_1.contrastRatio)((0, color_1.withLightness)(seed, mid, s), base) < target)
+            near = mid;
+        else
+            far = mid;
+    }
+    return (0, color_1.withLightness)(seed, far, s);
+};
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+const skeletonShimmer = (palette) => ({
+    start: palette.gray[100],
+    end: settleAway(palette.gray[300], palette.gray[100], exports.SKELETON_SHIMMER_CONTRAST),
+});
+exports.skeletonShimmer = skeletonShimmer;

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

@@ -1,6 +1,8 @@
 import type { PaletteProps } from "../types";
 export declare const RAISED_OVERLAY = 0.07;
 export type SurfaceRaisedSource = Pick<PaletteProps, "backgroundColor" | "background" | "white">;
-export declare const buildSurfaceRaised: (source: SurfaceRaisedSource) => string;
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+export declare const filledMarks: (colors: Pick<PaletteProps, "primary" | "semantic">) => string[];
+export declare const buildSurfaceRaised: (source: SurfaceRaisedSource, marks?: readonly string[]) => string;
 export declare const withSurfaceRaised: (palette: PaletteProps) => PaletteProps;
 export declare const raisedRule: (colors: Pick<PaletteProps, "boxborder" | "background" | "surfaceRaised">) => string;

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

@@ -1,21 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.RAISED_OVERLAY = void 0;
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.filledMarks = exports.RAISED_OVERLAY = void 0;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const planeStep_1 = require("./planeStep");
+const semanticText_1 = require("./semanticText");
 exports.RAISED_OVERLAY = 0.07;
-// Never below the card, and at least one white-overlay step above the canvas.
-const buildSurfaceRaised = (source) => {
-    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+const filledMarks = (colors) => [
+    colors.primary[500],
+    ...semanticText_1.SEMANTIC_TONES.map((tone) => colors.semantic[tone][500]),
+];
+exports.filledMarks = filledMarks;
+// Never below the card: the lighter of one white-overlay step off the canvas and a RAISED_LIFT step off the card.
+const buildSurfaceRaised = (source, marks = []) => {
     const card = source.background[50];
-    return (0, color_1.relativeLuminance)(overlay) > (0, color_1.relativeLuminance)(card) ? overlay : card;
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const stepped = (0, planes_1.liftUnder)(source.white, card, planes_1.RAISED_LIFT, marks);
+    return [overlay, stepped].reduce((top, c) => ((0, color_1.relativeLuminance)(c) > (0, color_1.relativeLuminance)(top) ? c : top), card);
 };
 exports.buildSurfaceRaised = buildSurfaceRaised;
 const withSurfaceRaised = (palette) => ({
     ...palette,
-    surfaceRaised: (0, exports.buildSurfaceRaised)(palette),
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette, (0, exports.filledMarks)(palette)),
 });
 exports.withSurfaceRaised = withSurfaceRaised;
-// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
-const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)(colors.boxborder[200], colors.background[50]));
+// A divider inside an overlay, at the weight a rule has inside a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)((0, planeStep_1.cardRule)(colors), colors.background[50]));
 exports.raisedRule = raisedRule;

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

@@ -6,6 +6,7 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
+const rowStates_1 = require("./rowStates");
 // NOTE: hint held to the non-text floor, not body-text — at 4.5 an empty field reads as typed-into. See CHROME-CONSISTENCY.md.
 exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
@@ -21,6 +22,7 @@ exports.hardestSurface = hardestSurface;
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
+    const accentSurfaces = [...surfaces, ...Object.values((0, rowStates_1.listRowBackgrounds)(palette))];
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
     const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
     const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
@@ -31,7 +33,7 @@ function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, accentText_1.AA_NORMAL_TEXT),
-        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, surfaces)),
+        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, accentSurfaces)),
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },

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

@@ -4,6 +4,7 @@ exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.isTone =
 const accentText_1 = require("./accentText");
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const memo_1 = require("./memo");
 exports.TONES = ["neutral", "info", "success", "warning", "error"];
 exports.toneToColorScheme = {
     neutral: "gray",
@@ -32,10 +33,8 @@ const SOFT_INK_TARGET = 6.5;
 const withAlpha = (hex, alpha) => `${hex}${Math.round(Math.min(1, Math.max(0, alpha)) * 255)
     .toString(16)
     .padStart(2, "0")}`;
-/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
-const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+const softToneMemo = (0, memo_1.memoize)((hue, surface) => {
     const dark = (0, accentText_1.isDarkCanvas)(surface);
-    const hue = scale[500];
     const bgAlpha = dark ? BG_ALPHA.dark : BG_ALPHA.light;
     const ringAlpha = dark ? RING_ALPHA.dark : RING_ALPHA.light;
     const bg = withAlpha(hue, bgAlpha);
@@ -50,5 +49,7 @@ const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) =
         activeBg: withAlpha(hue, bgAlpha + STATE_STEP * 1.75),
         activeBorder: withAlpha(hue, ringAlpha + STATE_STEP * 2),
     };
-};
+}, (hue, surface) => `${hue}|${surface}`);
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });
 exports.resolveSoftTone = resolveSoftTone;

package/dist/Theme/tokens/primitives/borderWidths.d.ts

@@ -0,0 +1,6 @@
+/** Stroke widths in px on purpose: a rem hairline grows with the user's root font size. */
+export declare const BORDER_WIDTHS: {
+    readonly hairline: "1px";
+    readonly thick: "2px";
+};
+export type BorderWidthRole = keyof typeof BORDER_WIDTHS;

package/dist/Theme/tokens/primitives/borderWidths.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BORDER_WIDTHS = void 0;
+/** Stroke widths in px on purpose: a rem hairline grows with the user's root font size. */
+exports.BORDER_WIDTHS = { hairline: "1px", thick: "2px" };

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

@@ -1,11 +1,16 @@
 export { default as space } from "./space";
 export { default as sizes } from "./sizes";
-export { default as radii } from "./radii";
-export { default as shadows } from "./shadows";
+export { default as radii, RADIUS_ROLE } from "./radii";
+export type { RadiusToken, RadiusRole } from "./radii";
+export * from "./borderWidths";
+export * from "./states";
+export { default as shadows, shadowsDark, shadowsFor, shadowCss, ELEVATION_LAYERS, SHADOW_INK } from "./shadows";
+export type { ShadowLayer, ElevationRole, ShadowRamp } from "./shadows";
 export { default as zIndices } from "./zIndices";
 export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";
 export { default as letterSpacings } from "./letterSpacings";
-export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
+export { default as typography, fonts, fontSizes, fontWeights, NUMERIC_TEXT, TEXT_STYLES } from "./typography";
+export type { TextStyleName, TextStyleSpec } from "./typography";
 export * from "./controlSizes";
 export * from "./motion";

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

@@ -17,15 +17,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadows = exports.radii = exports.sizes = exports.space = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.SHADOW_INK = exports.ELEVATION_LAYERS = exports.shadowCss = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
 var space_1 = require("./space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_1).default; } });
 var sizes_1 = require("./sizes");
 Object.defineProperty(exports, "sizes", { enumerable: true, get: function () { return __importDefault(sizes_1).default; } });
 var radii_1 = require("./radii");
 Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+Object.defineProperty(exports, "RADIUS_ROLE", { enumerable: true, get: function () { return radii_1.RADIUS_ROLE; } });
+__exportStar(require("./borderWidths"), exports);
+__exportStar(require("./states"), exports);
 var shadows_1 = require("./shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
+Object.defineProperty(exports, "shadowsDark", { enumerable: true, get: function () { return shadows_1.shadowsDark; } });
+Object.defineProperty(exports, "shadowsFor", { enumerable: true, get: function () { return shadows_1.shadowsFor; } });
+Object.defineProperty(exports, "shadowCss", { enumerable: true, get: function () { return shadows_1.shadowCss; } });
+Object.defineProperty(exports, "ELEVATION_LAYERS", { enumerable: true, get: function () { return shadows_1.ELEVATION_LAYERS; } });
+Object.defineProperty(exports, "SHADOW_INK", { enumerable: true, get: function () { return shadows_1.SHADOW_INK; } });
 var zIndices_1 = require("./zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 var breakpoints_1 = require("./breakpoints");
@@ -39,5 +47,7 @@ Object.defineProperty(exports, "typography", { enumerable: true, get: function (
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return typography_1.fonts; } });
 Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return typography_1.fontSizes; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return typography_1.fontWeights; } });
+Object.defineProperty(exports, "NUMERIC_TEXT", { enumerable: true, get: function () { return typography_1.NUMERIC_TEXT; } });
+Object.defineProperty(exports, "TEXT_STYLES", { enumerable: true, get: function () { return typography_1.TEXT_STYLES; } });
 __exportStar(require("./controlSizes"), exports);
 __exportStar(require("./motion"), exports);

package/dist/Theme/tokens/primitives/motion.d.ts

@@ -1,8 +1,32 @@
 export declare const MOTION_MS: {
     readonly fast: 150;
     readonly base: 200;
+    readonly enter: 200;
+    readonly exit: 200;
 };
 export type MotionSpeed = keyof typeof MOTION_MS;
-export declare const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+export type CubicBezier = readonly [number, number, number, number];
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+export declare const MOTION_BEZIER: {
+    readonly standard: readonly [0.2, 0, 0, 1];
+    readonly out: readonly [0.16, 1, 0.3, 1];
+    readonly in: readonly [0.3, 0, 1, 1];
+};
+export type MotionCurve = keyof typeof MOTION_BEZIER;
+export declare const cubicBezierCss: (curve: CubicBezier) => string;
+export declare const MOTION_EASE: string;
+export declare const MOTION_EASE_OUT: string;
+export declare const MOTION_EASE_IN: string;
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+export declare const MOTION_LOOP_MS: {
+    readonly pulse: 700;
+    readonly spin: 800;
+    readonly sweep: 1200;
+};
+export declare const MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed) => string;
+export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed, curve?: MotionCurve) => string;
+export declare const motionTransition: (speed?: MotionSpeed, curve?: MotionCurve) => {
+    duration: number;
+    ease: [number, number, number, number];
+};

package/dist/Theme/tokens/primitives/motion.js

@@ -1,12 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = void 0;
-exports.MOTION_MS = { fast: 150, base: 200 };
-exports.MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+exports.motionTransition = exports.transitionFor = exports.MOTION_PRESS_SCALE = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
+exports.MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+exports.MOTION_BEZIER = {
+    standard: [0.2, 0, 0, 1],
+    out: [0.16, 1, 0.3, 1],
+    in: [0.3, 0, 1, 1],
+};
+const cubicBezierCss = (curve) => `cubic-bezier(${curve.join(", ")})`;
+exports.cubicBezierCss = cubicBezierCss;
+exports.MOTION_EASE = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.standard);
+exports.MOTION_EASE_OUT = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.out);
+exports.MOTION_EASE_IN = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.in);
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+exports.MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
+exports.MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-const transitionFor = (properties, speed = "fast") => {
+const transitionFor = (properties, speed = "fast", curve = "standard") => {
     if (properties.includes("all"))
         throw new Error("transitionFor: name the properties, never `all`");
-    return properties.map((p) => `${p} ${exports.MOTION_MS[speed]}ms ${exports.MOTION_EASE}`).join(", ");
+    const ease = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER[curve]);
+    return properties.map((p) => `${p} ${exports.MOTION_MS[speed]}ms ${ease}`).join(", ");
 };
 exports.transitionFor = transitionFor;
+const motionTransition = (speed = "base", curve = "standard") => {
+    const [x1, y1, x2, y2] = exports.MOTION_BEZIER[curve];
+    return { duration: exports.MOTION_MS[speed] / 1000, ease: [x1, y1, x2, y2] };
+};
+exports.motionTransition = motionTransition;

package/dist/Theme/tokens/primitives/optionRowSizes.d.ts

@@ -16,5 +16,5 @@ export type OptionRowSpec = {
 };
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 export declare const OPTION_ROW_SIZES: Readonly<Record<ControlSize, OptionRowSpec>>;
-export declare const OPTION_ROW_RADIUS = "md";
+export declare const OPTION_ROW_RADIUS: "md";
 export declare const optionRowSpec: (size: ControlSize) => OptionRowSpec;

package/dist/Theme/tokens/primitives/optionRowSizes.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = void 0;
+const radii_1 = require("./radii");
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 exports.OPTION_ROW_SIZES = {
     xs: {
@@ -24,6 +25,6 @@ exports.OPTION_ROW_SIZES = {
         avatarSize: "sm", virtualRowHeightPx: 40,
     },
 };
-exports.OPTION_ROW_RADIUS = "md";
+exports.OPTION_ROW_RADIUS = radii_1.RADIUS_ROLE.option;
 const optionRowSpec = (size) => exports.OPTION_ROW_SIZES[size];
 exports.optionRowSpec = optionRowSpec;

package/dist/Theme/tokens/primitives/radii.d.ts

@@ -9,4 +9,19 @@ declare const radii: {
     "3xl": string;
     full: string;
 };
+export type RadiusToken = keyof typeof radii;
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+export declare const RADIUS_ROLE: {
+    readonly control: "lg";
+    readonly field: "lg";
+    readonly option: "md";
+    readonly tooltip: "lg";
+    readonly chip: "full";
+    readonly card: "xl";
+    readonly float: "xl";
+    readonly dialog: "xl";
+    readonly sheet: "xl";
+    readonly media: "lg";
+};
+export type RadiusRole = keyof typeof RADIUS_ROLE;
 export default radii;

package/dist/Theme/tokens/primitives/radii.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RADIUS_ROLE = void 0;
 const radii = {
     none: "0",
     sm: "0.125rem",
@@ -11,4 +12,17 @@ const radii = {
     "3xl": "1.5rem",
     full: "9999px",
 };
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+exports.RADIUS_ROLE = {
+    control: "lg",
+    field: "lg",
+    option: "md",
+    tooltip: "lg",
+    chip: "full",
+    card: "xl",
+    float: "xl",
+    dialog: "xl",
+    sheet: "xl",
+    media: "lg",
+};
 exports.default = radii;

package/dist/Theme/tokens/primitives/shadows.d.ts

@@ -1,4 +1,17 @@
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+import type { ResolvedColorMode } from "../types";
+export type ShadowLayer = {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    alphaHex: string;
+};
+export type ElevationRole = "cardPress" | "card" | "float" | "dialog" | "sheet";
+export declare const SHADOW_INK: Record<ResolvedColorMode, string>;
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+export declare const ELEVATION_LAYERS: Record<ResolvedColorMode, Record<ElevationRole, readonly ShadowLayer[]>>;
+export declare const shadowCss: (layers: readonly ShadowLayer[], ink: string) => string;
+/** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 declare const shadows: {
     xs: string;
     sm: string;
@@ -11,5 +24,12 @@ declare const shadows: {
     inner: string;
     none: string;
     darkLg: string;
+    card: string;
+    float: string;
+    dialog: string;
+    sheet: string;
 };
+export type ShadowRamp = typeof shadows;
+export declare const shadowsDark: ShadowRamp;
+export declare const shadowsFor: (mode: ResolvedColorMode) => ShadowRamp;
 export default shadows;