pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.64

package/dist/esm/Theme/tokens/brands/radiant/palette.light.js

@@ -15,8 +15,22 @@ const primary = {
     900: "#531a14",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutralTokens,
+    red: danger,
+    semantic: { ...neutralTokens.semantic, error: danger },
     ...buildBrandInk(PRIMARY_500),
     // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
@@ -118,6 +132,7 @@ const palette = {
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
         ...sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/palette.light.js

@@ -1,18 +1,18 @@
 import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
 import { buildBrandInk } from "../../builders/brandInk.js";
-const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const PRIMARY_500 = "#cb6b94";
 const primary = {
-    50: "#fdf2f5",
-    100: "#f9d6de",
-    200: "#f2aaba",
-    300: "#ea7f96",
-    400: "#de627d",
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
     500: PRIMARY_500,
-    600: "#b9556b",
-    700: "#984558",
-    800: "#763646",
-    900: "#552634",
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {

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

@@ -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,20 +116,6 @@ 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 buildPalette = () => {
     const derived = buildDarkPalette(light);
     return {
@@ -154,16 +124,14 @@ const buildPalette = () => {
         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,
+        // NOTE: the planes (backgroundColor, background, table, gray fills) stay derived — they rise with the card.
         text,
         header,
-        gray,
+        gray: { ...derived.gray, ...grayInk },
         border,
         boxborder,
         placeholder,
         disabled,
-        table,
         accentText: pickAccentText(primary, derived.backgroundColor.main),
         onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
         boxShadow: {

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

@@ -19,6 +19,11 @@ const DARK_CANVAS_LUMINANCE = 0.2;
 export const isDarkCanvas = (canvas) => relativeLuminance(canvas) < DARK_CANVAS_LUMINANCE;
 // NOTE: held to AA in both modes now — some brands' light [500] no longer passes through untouched.
 export const accentTextOnCanvas = (scale, canvas) => pickAccentText(scale, canvas);
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+export const accentTextOnPlanes = (scale, planes) => {
+    const found = SEARCH_ORDER.find((rung) => planes.every((plane) => contrastRatio(scale[rung], plane) >= AA_NORMAL_TEXT));
+    return scale[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
+};
 // NOTE: white/black must be the mode-stable absolutes, not an adaptive token — always clears AA.
 export const onFilled = (fill, white, black) => contrastRatio(white, fill) >= AA_NORMAL_TEXT ? white : black;
 // NOTE: resolves against whichever gradient stop is lighter — the harder case for ink to clear.

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

@@ -1,6 +1,6 @@
 import { contrastRatio } from "./color.js";
 import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
-import { AA_NON_TEXT } from "./outlineRung.js";
+import { AA_NON_TEXT, CHROME_BORDER } 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.
@@ -40,15 +40,28 @@ const steppedRung = (base, canvas, step) => {
     const dir = isDarkCanvas(canvas) ? -100 : 100;
     return Math.min(900, Math.max(50, base + dir * step));
 };
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 export const darkerFillRung = (scale, canvas, white, step) => {
     const base = solidFillRung(scale, white, canvas);
+    const wantsWhite = contrastRatio(white, scale[base]) >= AA_NORMAL_TEXT;
+    const holds = (rung) => contrastRatio(scale[rung], canvas) >= CHROME_BORDER &&
+        (contrastRatio(white, scale[rung]) >= AA_NORMAL_TEXT) === wantsWhite;
+    let rung;
     if (base === 500) {
         const mode = isDarkCanvas(canvas) ? "dark" : "light";
-        return FILL_STEP_RUNGS[mode][step];
+        rung = FILL_STEP_RUNGS[mode][step];
     }
-    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
-    return stepped;
+    else {
+        rung = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    }
+    while (rung !== base && !holds(rung))
+        rung = steppedTowardBase(rung, base);
+    return rung;
 };
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);

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/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 ruleOn = (colors, plane) => {
+    const rule = colors.boxborder[200];
+    return holds(rule, plane, CHROME_RULE) ? rule : liftToContrast(rule, plane, CHROME_RULE);
+};
+export const cardRule = (colors) => ruleOn(colors, colors.background[50]);

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/primitives/index.js

@@ -3,7 +3,7 @@ export { default as sizes } from "./sizes.js";
 export { default as radii, RADIUS_ROLE } from "./radii.js";
 export * from "./borderWidths.js";
 export * from "./states.js";
-export { default as shadows, shadowsDark, shadowsFor } from "./shadows.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";

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

@@ -11,6 +11,7 @@ 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", curve = "standard") => {
     if (properties.includes("all"))

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

@@ -1,17 +1,66 @@
+const layer = (x, y, blur, spread, alphaHex) => ({
+    x,
+    y,
+    blur,
+    spread,
+    alphaHex,
+});
+export const SHADOW_INK = { light: "#141828", dark: "#000000" };
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+export const ELEVATION_LAYERS = {
+    light: {
+        cardPress: [layer(0, 1, 2, 0, "0d"), layer(0, 2, 6, -2, "0d")],
+        card: [layer(0, 1, 2, 0, "0a"), layer(0, 3, 10, -2, "0d"), layer(0, 14, 32, -14, "1f")],
+        float: [layer(0, 2, 6, 0, "0f"), layer(0, 16, 40, -10, "38")],
+        dialog: [layer(0, 4, 12, 0, "0f"), layer(0, 28, 64, -16, "4d")],
+        sheet: [layer(0, -2, 8, 0, "0a"), layer(0, -18, 48, -14, "33")],
+    },
+    dark: {
+        cardPress: [layer(0, 1, 1, 0, "3d")],
+        card: [layer(0, 1, 2, 0, "47")],
+        float: [layer(0, 2, 8, 0, "52"), layer(0, 18, 44, -10, "9e")],
+        dialog: [layer(0, 4, 14, 0, "59"), layer(0, 28, 64, -16, "b3")],
+        sheet: [layer(0, -2, 10, 0, "4d"), layer(0, -18, 48, -14, "99")],
+    },
+};
+const length = (n) => (n === 0 ? "0" : `${n}px`);
+const rgbChannels = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(", ");
+const alphaOf = (alphaHex) => Math.round((parseInt(alphaHex, 16) / 255) * 100) / 100;
+export const shadowCss = (layers, ink) => layers
+    .map((l) => `${length(l.x)} ${length(l.y)} ${length(l.blur)} ${length(l.spread)} rgba(${rgbChannels(ink)}, ${alphaOf(l.alphaHex)})`)
+    .join(", ");
+const elevationRamp = (mode) => {
+    const css = (role) => shadowCss(ELEVATION_LAYERS[mode][role], SHADOW_INK[mode]);
+    return {
+        sm: css("cardPress"),
+        base: css("card"),
+        md: css("float"),
+        lg: css("dialog"),
+        card: css("card"),
+        float: css("float"),
+        dialog: css("dialog"),
+        sheet: css("sheet"),
+    };
+};
+const lightElevation = elevationRamp("light");
 /** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 const shadows = {
     xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    sm: lightElevation.sm,
+    base: lightElevation.base,
+    md: lightElevation.md,
+    lg: lightElevation.lg,
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
     "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
     outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
     inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
     none: "none",
     darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+    card: lightElevation.card,
+    float: lightElevation.float,
+    dialog: lightElevation.dialog,
+    sheet: lightElevation.sheet,
 };
-export const shadowsDark = { ...shadows };
+export const shadowsDark = { ...shadows, ...elevationRamp("dark") };
 export const shadowsFor = (mode) => mode === "dark" ? shadowsDark : shadows;
 export default shadows;

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

@@ -2,7 +2,7 @@
 export const fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",
-    mono: "Inter Variable, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 };
 export const fontSizes = {
     "xs-minus": "0.6875rem",

package/dist/esm/Utils/table.js

@@ -66,7 +66,7 @@ export function buildSemanticStatusPalette(toneByValue, theme) {
     return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
         const scale = scales[key];
         const tone = resolveSoftTone(c, scale);
-        const solidRung = solidFillRung(scale, c.white);
+        const solidRung = solidFillRung(scale, c.white, c.backgroundColor.main);
         const solid = scale[solidRung];
         return [
             value,
@@ -108,7 +108,7 @@ export function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = resolveSoftTone(c, scale);
-        const solidRung = solidFillRung(scale, c.white);
+        const solidRung = solidFillRung(scale, c.white, c.backgroundColor.main);
         const solid = scale[solidRung];
         return {
             solid,

package/dist/esm/index.js

@@ -149,12 +149,12 @@ export { useChartTheme } from "./Theme/useChartTheme.js";
 // custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
 // of re-deriving contrast math themselves.
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient.js";
-export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
+export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, accentTextOnPlanes, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
 // Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
 // chips, alerts). Never pair `scale[500]` with `onFilled` or `colors.white` by hand.
 export { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface.js";
 // Ink for a custom option row (a `SearchSelect` `option.view` or `Select` `renderOption` node).
-export { optionRowInk, optionRowWeight, optionRowDescriptionInk, } from "./Components/Select/optionRowInk.js";
+export { optionRowInk, optionRowWeight, optionRowDescriptionInk, optionRowFill, optionRowCursorSx, } from "./Components/Select/optionRowInk.js";
 // Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
 // dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1
 // primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
@@ -170,7 +170,7 @@ export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Them
 export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
 export { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE, isControlSize, } from "./Theme/tokens/primitives/controlSizes.js";
-export { MOTION_MS, MOTION_EASE, MOTION_EASE_OUT, MOTION_EASE_IN, MOTION_BEZIER, MOTION_LOOP_MS, transitionFor, motionTransition, } from "./Theme/tokens/primitives/motion.js";
+export { MOTION_MS, MOTION_EASE, MOTION_EASE_OUT, MOTION_EASE_IN, MOTION_BEZIER, MOTION_LOOP_MS, MOTION_PRESS_SCALE, transitionFor, motionTransition, } from "./Theme/tokens/primitives/motion.js";
 export { RADIUS_ROLE } from "./Theme/tokens/primitives/radii.js";
 export { BORDER_WIDTHS } from "./Theme/tokens/primitives/borderWidths.js";
 export { DISABLED_OPACITY } from "./Theme/tokens/primitives/states.js";
@@ -180,6 +180,7 @@ export { TONES, isTone, toneToColorScheme, toneToSemantic, toneScale, toneInk, r
 export { overlayScrim, SCRIM_OPACITY } from "./Theme/tokens/builders/scrim.js";
 export { tooltipSurface } from "./Theme/tokens/builders/tooltipSurface.js";
 export { buildSurfaceRaised, raisedRule, RAISED_OVERLAY } from "./Theme/tokens/builders/surfaceRaised.js";
+export { bandOn, recessOn, cardRule, ruleOn } from "./Theme/tokens/builders/planeStep.js";
 export { overlayScrimStyles, OVERLAY_BLUR } from "./Theme/chakra/overlay.styles.js";
 export { usePrefersReducedMotion, reducedMotionSx, REDUCED_MOTION_QUERY, MOTION_KEEP_CLASS, } from "./Theme/chakra/motion.js";
 export { useFieldIds } from "./Components/Common/useFieldIds.js";

package/dist/index.d.ts

@@ -99,7 +99,7 @@ import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDe
 export { Accordion, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, AppSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, KanbanActions, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, ToggleSwitch, SegmentedControl, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
-export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
+export type { WorkspaceWindowProps, WorkspaceWindowLabels, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
 export type { RolesPermissionProps, RolesPermissionLabels, RolesPermissionView, RolesPermissionMode, Permission, PermissionKey, RoleData, } from "./Components/RolesPermission/RolesPermissionProps";
 export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, UpdateModulePayload, } from "./Components/CustomModulesTable/CustomModulesTableProps";
 export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
@@ -131,10 +131,10 @@ export { useChartTheme } from "./Theme/useChartTheme";
 export type { RechartsAxisTheme, RechartsChartTheme, RechartsGridTheme, RechartsLegendTheme, RechartsTooltipTheme, } from "./Theme/useChartTheme";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, FocusRingTokens, } from "./Theme/tokens/types";
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
-export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
+export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, accentTextOnPlanes, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
 export { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface";
 export type { FilledSurface } from "./Theme/tokens/builders/filledSurface";
-export { optionRowInk, optionRowWeight, optionRowDescriptionInk, } from "./Components/Select/optionRowInk";
+export { optionRowInk, optionRowWeight, optionRowDescriptionInk, optionRowFill, optionRowCursorSx, } from "./Components/Select/optionRowInk";
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";
 export type { Rgb, Hsl } from "./Theme/tokens/builders/color";
 export type { SelectV2Props, SelectV2Size, OptionProp as SelectV2Option } from "./Components/SelectV2/SelectV2Props";
@@ -194,7 +194,7 @@ export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken,
 export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";
 export { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE, isControlSize, } from "./Theme/tokens/primitives/controlSizes";
 export type { ControlSize, ControlSizeSpec } from "./Theme/tokens/primitives/controlSizes";
-export { MOTION_MS, MOTION_EASE, MOTION_EASE_OUT, MOTION_EASE_IN, MOTION_BEZIER, MOTION_LOOP_MS, transitionFor, motionTransition, } from "./Theme/tokens/primitives/motion";
+export { MOTION_MS, MOTION_EASE, MOTION_EASE_OUT, MOTION_EASE_IN, MOTION_BEZIER, MOTION_LOOP_MS, MOTION_PRESS_SCALE, transitionFor, motionTransition, } from "./Theme/tokens/primitives/motion";
 export type { MotionSpeed, MotionCurve } from "./Theme/tokens/primitives/motion";
 export { RADIUS_ROLE } from "./Theme/tokens/primitives/radii";
 export type { RadiusRole } from "./Theme/tokens/primitives/radii";
@@ -208,6 +208,7 @@ export type { Tone, ToneColorScheme } from "./Theme/tokens/builders/tone";
 export { overlayScrim, SCRIM_OPACITY } from "./Theme/tokens/builders/scrim";
 export { tooltipSurface } from "./Theme/tokens/builders/tooltipSurface";
 export { buildSurfaceRaised, raisedRule, RAISED_OVERLAY } from "./Theme/tokens/builders/surfaceRaised";
+export { bandOn, recessOn, cardRule, ruleOn } from "./Theme/tokens/builders/planeStep";
 export { overlayScrimStyles, OVERLAY_BLUR } from "./Theme/chakra/overlay.styles";
 export { usePrefersReducedMotion, reducedMotionSx, REDUCED_MOTION_QUERY, MOTION_KEEP_CLASS, } from "./Theme/chakra/motion";
 export type { ReducedMotionScope } from "./Theme/chakra/motion";