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

package/dist/esm/Theme/tokens/brands/zinc/palette.dark.js

@@ -2,9 +2,9 @@ import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import { rotateScaleHue } from "../../builders/brandInk.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
 import { pickAccentText, onFilled } from "../../builders/accentText.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
 // NOTE: zinc dark INVERTS the primary (near-white fill, dark label) to match shadcn — every other brand lifts its own hue instead. Most ramps below are literals ported from Mobile-Components.
-const derived = buildDarkPalette(light);
 const PRIMARY_500 = "#e4e4e7";
 const SECONDARY_500 = "#a1a1aa";
 const primary = {
@@ -33,19 +33,6 @@ const secondary = {
     900: "#fafafa",
     opacity: buildPrimaryOpacity(SECONDARY_500),
 };
-// background[50] = the elevated surface (#0e0e11), resolved through a token, not a literal.
-const background = {
-    50: "#0e0e11",
-    100: "#131316",
-    200: "#18181b",
-    300: "#212124",
-    400: "#27272a",
-    500: "#3f3f46",
-    600: "#52525b",
-    700: "#71717a",
-    800: "#a1a1aa",
-    900: "#d4d4d8",
-};
 const text = {
     50: "#71717a",
     100: "#8a8a93",
@@ -71,10 +58,7 @@ const header = {
     900: "#ffffff",
 };
 // NOTE: gray[400] is the one value here NOT ported verbatim — pinned to clear the 3:1 non-text bar (shadcn's own measures 2.81).
-const gray = {
-    50: "#18181b",
-    100: "#27272a",
-    200: "#3f3f46",
+const grayInk = {
     300: "#52525b",
     400: "#7a7a83",
     500: "#a1a1aa",
@@ -132,42 +116,30 @@ const disabled = {
     800: "#a1a1aa",
     900: "#d4d4d8",
 };
-const table = {
-    hover: {
-        50: "#0e0e11",
-        100: "#131316",
-        200: "#18181b",
-        300: "#1f1f22",
-        400: "#27272a",
-        500: "#2f2f33",
-        600: "#3f3f46",
-        700: "#52525b",
-        800: "#71717a",
-        900: "#a1a1aa",
-    },
-};
-const palette = {
-    ...derived,
-    gradient: { from: PRIMARY_500, to: "#a1a1aa" },
-    primary,
-    secondary,
-    tertiary: { ...rotateScaleHue(secondary), opacity: secondary.opacity },
-    // NOTE: backgroundColor/sidebar fall through to `...derived` — mobile's literals collapse distinct elevation steps, breaking darkSurfaces.test.ts.
-    background,
-    text,
-    header,
-    gray,
-    border,
-    boxborder,
-    placeholder,
-    disabled,
-    table,
-    accentText: pickAccentText(primary, derived.backgroundColor.main),
-    onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
-    boxShadow: {
-        primary: buildPrimaryShadowTint(PRIMARY_500),
-        error: derived.boxShadow.error,
-        default: "#00000080",
-    },
+const buildPalette = () => {
+    const derived = buildDarkPalette(light);
+    return {
+        ...derived,
+        gradient: { from: PRIMARY_500, to: "#a1a1aa" },
+        primary,
+        secondary,
+        tertiary: { ...rotateScaleHue(secondary), opacity: secondary.opacity },
+        // NOTE: the planes (backgroundColor, background, table, gray fills) stay derived — they rise with the card.
+        text,
+        header,
+        gray: { ...derived.gray, ...grayInk },
+        border,
+        boxborder,
+        placeholder,
+        disabled,
+        accentText: pickAccentText(primary, derived.backgroundColor.main),
+        onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
+        boxShadow: {
+            primary: buildPrimaryShadowTint(PRIMARY_500),
+            error: derived.boxShadow.error,
+            default: "#00000080",
+        },
+    };
 };
+const palette = lazyPalette(light, buildPalette);
 export default palette;

package/dist/esm/Theme/tokens/builders/buildDarkPalette.js

@@ -5,8 +5,9 @@ import { withSidebarTokens } from "./sidebarAccent.js";
 import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
 import { buildFocusRing } from "./focusRing.js";
-import { buildSurfaceRaised } from "./surfaceRaised.js";
+import { buildSurfaceRaised, filledMarks } from "./surfaceRaised.js";
 import { buildStar } from "./star.js";
+import { CARD_LIFT, lift } from "./planes.js";
 // Structural ramps are rebuilt at explicit targets (not reversed — light ramps bottom near 35%);
 // utility hues are reversed so index roles survive; brand/semantic ramps shift one step lighter.
 const SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -142,23 +143,49 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-// NOTE: surfaces are hue-neutral in dark (a tint wash reads as a different product per brand); accent lives in primary/semantic/text.
-const SURFACE_SAT = 0;
+const SURFACE_SAT = { lifted: 14, flat: 0 };
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
 const DISABLED_SAT = 8;
 const GRAY_SAT = 0;
-export function buildDarkPalette(light) {
+// Fill rungs drawn ON a card keep their step above it, so they rise with the card; ink and chrome rungs stay.
+const BACKGROUND_FILLS = [100, 200, 300, 400, 500];
+// NOTE: table.hover[500] gates every ink (it is a named surface), so it climbs one rung per step, not the card's full rise.
+const TABLE_HOVER_ABOVE_CARD = {
+    50: 1, 100: 3, 200: 5, 300: 6, 400: 6.5, 500: 7,
+};
+const GRAY_FILLS = [50, 100, 200];
+const raise = (targets, rungs, by) => ({
+    ...targets,
+    ...Object.fromEntries(rungs.map((k) => [k, targets[k] + by])),
+});
+const cardPlane = (canvas, white, planes) => {
+    if (planes === "flat")
+        return { card: canvas, rise: 0, tableHover: TABLE_HOVER_TARGETS };
+    const card = lift(white, canvas, CARD_LIFT);
+    const cardL = hexToHsl(card).l;
+    const tableHover = {
+        ...TABLE_HOVER_TARGETS,
+        ...Object.fromEntries(Object.entries(TABLE_HOVER_ABOVE_CARD).map(([k, step]) => [k, cardL + step])),
+    };
+    return { card, rise: cardL - hexToHsl(canvas).l, tableHover };
+};
+export function buildDarkPalette(light, { planes = "lifted" } = {}) {
     const hueSource = light.primary[500];
     const { h } = hexToHsl(hueSource);
+    const surfaceSat = SURFACE_SAT[planes];
     const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
         key,
-        hslToHex({ h, s: SURFACE_SAT, l }),
+        hslToHex({ h, s: surfaceSat, l }),
     ]));
     const white = light.white;
+    const { card, rise, tableHover } = cardPlane(namedSurfaces.main, white, planes);
     const primary = liftBrand(light.primary, white);
-    const background = fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT);
+    const background = {
+        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), surfaceSat),
+        50: card,
+    };
     const semantic = {
         success: liftAccent(light.semantic.success, white),
         error: liftAccent(light.semantic.error, white),
@@ -178,7 +205,7 @@ export function buildDarkPalette(light) {
         transparent: light.transparent,
         black: light.black,
         white: light.white,
-        gray: fromTargets(hueSource, GRAY_TARGETS, GRAY_SAT),
+        gray: fromTargets(hueSource, raise(GRAY_TARGETS, GRAY_FILLS, rise), GRAY_SAT),
         red: reverseScale(light.red),
         orange: reverseScale(light.orange),
         yellow: reverseScale(light.yellow),
@@ -195,7 +222,9 @@ export function buildDarkPalette(light) {
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
         border: dividerRamp,
         boxborder: dividerRamp,
-        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, SURFACE_SAT) },
+        table: {
+            hover: fromTargets(hueSource, tableHover, surfaceSat),
+        },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         accentText: pickAccentText(primary, namedSurfaces.main),
         textMuted: buildMutedText(fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT), namedSurfaces.main),
@@ -203,7 +232,7 @@ export function buildDarkPalette(light) {
         onPrimary: onFilled(primary[500], light.white, light.black),
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
         focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
-        surfaceRaised: buildSurfaceRaised({ backgroundColor: namedSurfaces, background, white }),
+        surfaceRaised: buildSurfaceRaised({ backgroundColor: namedSurfaces, background, white }, filledMarks({ primary, semantic })),
         star: buildStar(namedSurfaces.main),
         sidebar: withSidebarTokens(light),
         boxShadow: {

package/dist/esm/Theme/tokens/builders/color.js

@@ -1,4 +1,5 @@
 // Pure color math, no dependencies or platform APIs — safe for the mobile port.
+import { memoize } from "./memo.js";
 const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 // NOTE: #rrggbbaa throws on purpose — alpha over an unknown backdrop has no defined luminance; composite first.
 export function hexToRgb(hex) {
@@ -105,14 +106,17 @@ export function mix(a, b, weight) {
         b: ca.b + (cb.b - ca.b) * w,
     });
 }
+const linearChannel = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+const luminanceOf = memoize((hex) => {
+    const { r, g, b } = hexToRgb(hex);
+    return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}, (hex) => hex, 4096);
 /** WCAG 2.1 relative luminance. */
 export function relativeLuminance(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    const channel = (v) => {
-        const c = v / 255;
-        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+    return luminanceOf(hex);
 }
 /** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
 export function contrastRatio(a, b) {

package/dist/esm/Theme/tokens/builders/filledSurface.js

@@ -1,6 +1,7 @@
 import { contrastRatio } from "./color.js";
 import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
 import { AA_NON_TEXT } from "./outlineRung.js";
+import { memoize, scaleKey } from "./memo.js";
 const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 // NOTE: "darker than [500]" is [600]/[700] in light but [400]/[300] in dark, since dark ramps run dark -> light.
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
@@ -51,12 +52,8 @@ export const darkerFillRung = (scale, canvas, white, step) => {
 };
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);
-// Consumer-facing helper: fill rung + ink for solid/hover/active. Never pair scale[500] with onFilled by hand.
-export const resolveFilledSurface = (scale, colors) => {
-    const { white, black, backgroundColor, background } = colors;
-    const canvas = contrastRatio(scale[500], backgroundColor.main) <= contrastRatio(scale[500], background[50])
-        ? backgroundColor.main
-        : background[50];
+const filledSurfaceMemo = memoize((scale, white, black, main, card) => {
+    const canvas = contrastRatio(scale[500], main) <= contrastRatio(scale[500], card) ? main : card;
     const rung = solidFillRung(scale, white, canvas);
     const fill = scale[rung];
     const hoverRung = darkerFillRung(scale, canvas, white, 0);
@@ -74,4 +71,7 @@ export const resolveFilledSurface = (scale, colors) => {
         activeFill,
         activeColor: labelOnFill(activeFill, white, black),
     };
-};
+}, (scale, white, black, main, card) => `${scaleKey(scale)}|${white}|${black}|${main}|${card}`);
+export const resolveFilledSurface = (scale, colors) => ({
+    ...filledSurfaceMemo(scale, colors.white, colors.black, colors.backgroundColor.main, colors.background[50]),
+});

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

@@ -0,0 +1,49 @@
+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.
+export 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;
+};
+// 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);
+export const paletteKeys = (source) => [
+    ...Object.keys(source),
+    ...DERIVED_KEYS.filter((key) => !(key in source)),
+];
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+export const lazyPalette = (source, build) => lazyObject(paletteKeys(source), build);

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

@@ -0,0 +1,21 @@
+const registry = [];
+export const MEMO_LIMIT = 1024;
+// NOTE: clear-on-overflow, not LRU — a hit stays one Map lookup; contrast walks mint many one-off keys.
+export const memoize = (fn, keyOf, limit = 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;
+    };
+};
+export const scaleKey = (s) => `${s[50]}|${s[100]}|${s[200]}|${s[300]}|${s[400]}|${s[500]}|${s[600]}|${s[700]}|${s[800]}|${s[900]}`;
+export const memoCaches = () => registry.map(({ cache, limit }) => ({ size: cache.size, limit }));
+export const clearMemoCaches = () => registry.forEach(({ cache }) => cache.clear());

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

@@ -0,0 +1,46 @@
+export const READS_MEMO_LIMIT = 16;
+// NOTE: keyed on exactly the props a call read; a call that enumerates or probes props is never cached.
+export const memoiseByReads = (fn, limit = 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;
+    };
+};

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

@@ -1,5 +1,15 @@
+import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
 import { liftToContrast } from "./outlineRung.js";
 /** WCAG 1.4.3 — muted is still body text. */
 export const AA_NORMAL_TEXT = 4.5;
-/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
-export const buildMutedText = (text, canvas) => liftToContrast(text[400], canvas, AA_NORMAL_TEXT);
+export const MUTED_TEXT_CEILING = 8;
+const settleUnder = (hex, canvas, ceiling) => {
+    const { s, l } = hexToHsl(hex);
+    const toward = relativeLuminance(canvas) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let next = l; contrastRatio(settled, canvas) > ceiling; next += toward) {
+        settled = withLightness(hex, next, s);
+    }
+    return settled;
+};
+export const buildMutedText = (text, canvas) => liftToContrast(settleUnder(text[400], canvas, MUTED_TEXT_CEILING), canvas, AA_NORMAL_TEXT);

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

@@ -1,4 +1,5 @@
 import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
+import { memoize } from "./memo.js";
 export const MIN_PERCEPTIBLE_STEP = 1.15;
 export const AA_NON_TEXT = 3;
 // NOTE: settles below AA_NON_TEXT — focusRing.ts covers the 1.4.11 gate instead.
@@ -22,7 +23,8 @@ export function tintStep(seed, backdrop, target) {
     }
     return withLightness(seed, away > 0 ? 100 : 0, s);
 }
-export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
+const contrastKey = (hex, backdrop, target) => `${hex}|${backdrop}|${target}`;
+const liftMemo = memoize((hex, backdrop, target) => {
     if (contrastRatio(hex, backdrop) >= target)
         return hex;
     const { s, l: start } = hexToHsl(hex);
@@ -38,8 +40,11 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     }
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
+}, contrastKey);
+export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
+    return liftMemo(hex, backdrop, target);
 }
-export function softenToContrast(hex, backdrop, target) {
+const softenMemo = memoize((hex, backdrop, target) => {
     if (contrastRatio(hex, backdrop) <= target)
         return hex;
     const { s, l: start } = hexToHsl(hex);
@@ -52,6 +57,9 @@ export function softenToContrast(hex, backdrop, target) {
         softest = next;
     }
     return softest;
+}, contrastKey);
+export function softenToContrast(hex, backdrop, target) {
+    return softenMemo(hex, backdrop, target);
 }
 // NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
 export function withOutlineRung(palette) {

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

@@ -0,0 +1,14 @@
+import { DEFAULT_BLACK, isDarkCanvas } from "./accentText.js";
+import { contrastRatio } from "./color.js";
+import { CHROME_RULE, MIN_PERCEPTIBLE_STEP, liftToContrast, tintStep } from "./outlineRung.js";
+import { lift } from "./planes.js";
+const holds = (fill, plane, target) => !isDarkCanvas(plane) || contrastRatio(fill, plane) >= target;
+export const bandOn = (fill, plane) => holds(fill, plane, MIN_PERCEPTIBLE_STEP) ? fill : tintStep(fill, plane, MIN_PERCEPTIBLE_STEP);
+export const recessOn = (fill, plane) => holds(fill, plane, MIN_PERCEPTIBLE_STEP)
+    ? fill
+    : lift(DEFAULT_BLACK, plane, MIN_PERCEPTIBLE_STEP);
+export const cardRule = (colors) => {
+    const rule = colors.boxborder[200];
+    const card = colors.background[50];
+    return holds(rule, card, CHROME_RULE) ? rule : liftToContrast(rule, card, CHROME_RULE);
+};

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

@@ -0,0 +1,28 @@
+import { contrastRatio, mix } from "./color.js";
+import { AA_NON_TEXT } from "./outlineRung.js";
+export const CARD_LIFT = 1.16;
+export const RAISED_LIFT = 1.15;
+const STEP = 0.005;
+const MAX_WEIGHT = 0.4;
+export function lift(ink, base, target) {
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = mix(base, ink, t);
+        if (contrastRatio(next, base) >= target)
+            return next;
+    }
+    return mix(base, ink, MAX_WEIGHT);
+}
+const clearsMarks = (surface, marks) => marks.every((mark) => contrastRatio(mark, surface) >= AA_NON_TEXT);
+// NOTE: stops one step early rather than drop a filled mark under 3:1 on the lifted plane.
+export function liftUnder(ink, base, target, marks) {
+    let settled = base;
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = mix(base, ink, t);
+        if (!clearsMarks(next, marks))
+            return settled;
+        if (contrastRatio(next, base) >= target)
+            return next;
+        settled = next;
+    }
+    return settled;
+}

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

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

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

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

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

@@ -2,6 +2,7 @@ import { contrastRatio } from "./color.js";
 import { liftToContrast, settleAcross, ruleInk, AA_NON_TEXT, CHROME_BORDER, CHROME_RULE } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
 import { SEMANTIC_TONES } from "./semanticText.js";
+import { listRowBackgrounds } from "./rowStates.js";
 // 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.
 export const PLACEHOLDER_TEXT = AA_NON_TEXT;
 export const namedSurfaces = (palette) => [
@@ -15,6 +16,7 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 export function withSurfaceRungs(palette) {
     const surfaces = namedSurfaces(palette);
+    const accentSurfaces = [...surfaces, ...Object.values(listRowBackgrounds(palette))];
     const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
     const settle = (ink, target) => settleAcross(ink, surfaces, target);
     const rule = (ink) => ruleInk(ink, [palette.backgroundColor.main, palette.background[50]], CHROME_RULE);
@@ -25,7 +27,7 @@ export function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, AA_NORMAL_TEXT),
-        accentText: pickAccentText(palette.primary, hardestSurface(palette.accentText, surfaces)),
+        accentText: pickAccentText(palette.primary, hardestSurface(palette.accentText, accentSurfaces)),
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },

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

@@ -1,6 +1,7 @@
 import { isDarkCanvas } from "./accentText.js";
 import { compositeOver } from "./color.js";
 import { liftToContrast } from "./outlineRung.js";
+import { memoize } from "./memo.js";
 export const TONES = ["neutral", "info", "success", "warning", "error"];
 export const toneToColorScheme = {
     neutral: "gray",
@@ -26,10 +27,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. */
-export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+const softToneMemo = memoize((hue, surface) => {
     const dark = 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);
@@ -44,4 +43,6 @@ export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.
         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. */
+export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });

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

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

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

@@ -1,11 +1,13 @@
 export { default as space } from "./space.js";
 export { default as sizes } from "./sizes.js";
-export { default as radii } from "./radii.js";
-export { default as shadows } from "./shadows.js";
+export { default as radii, RADIUS_ROLE } from "./radii.js";
+export * from "./borderWidths.js";
+export * from "./states.js";
+export { default as shadows, shadowsDark, shadowsFor, shadowCss, ELEVATION_LAYERS, SHADOW_INK } from "./shadows.js";
 export { default as zIndices } from "./zIndices.js";
 export { default as breakpoints } from "./breakpoints.js";
 export { default as lineHeights } from "./lineHeights.js";
 export { default as letterSpacings } from "./letterSpacings.js";
-export { default as typography, fonts, fontSizes, fontWeights } from "./typography.js";
+export { default as typography, fonts, fontSizes, fontWeights, NUMERIC_TEXT, TEXT_STYLES } from "./typography.js";
 export * from "./controlSizes.js";
 export * from "./motion.js";

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

@@ -1,8 +1,25 @@
-export const MOTION_MS = { fast: 150, base: 200 };
-export const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+export const MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+export const MOTION_BEZIER = {
+    standard: [0.2, 0, 0, 1],
+    out: [0.16, 1, 0.3, 1],
+    in: [0.3, 0, 1, 1],
+};
+export const cubicBezierCss = (curve) => `cubic-bezier(${curve.join(", ")})`;
+export const MOTION_EASE = cubicBezierCss(MOTION_BEZIER.standard);
+export const MOTION_EASE_OUT = cubicBezierCss(MOTION_BEZIER.out);
+export const MOTION_EASE_IN = cubicBezierCss(MOTION_BEZIER.in);
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+export const MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
+export const MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
-export const transitionFor = (properties, speed = "fast") => {
+export 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} ${MOTION_MS[speed]}ms ${MOTION_EASE}`).join(", ");
+    const ease = cubicBezierCss(MOTION_BEZIER[curve]);
+    return properties.map((p) => `${p} ${MOTION_MS[speed]}ms ${ease}`).join(", ");
+};
+export const motionTransition = (speed = "base", curve = "standard") => {
+    const [x1, y1, x2, y2] = MOTION_BEZIER[curve];
+    return { duration: MOTION_MS[speed] / 1000, ease: [x1, y1, x2, y2] };
 };