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

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/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/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 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/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/index.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 } 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

@@ -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 } 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";

package/dist/index.js

@@ -44,11 +44,11 @@ exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemain
 exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanActions = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = void 0;
 exports.setRef = exports.mergeRefs = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.listRowBackgrounds = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = void 0;
 exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.optionRowDescriptionInk = exports.optionRowWeight = exports.optionRowInk = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.useChartTheme = exports.labelOnSeries = exports.getDefaultSeriesColors = exports.getCategoricalSeriesColors = exports.chartMode = exports.chartInk = exports.chartAxisLabelColor = exports.CATEGORICAL_SERIES = exports.useDebouncedValue = exports.useDebouncedCallback = exports.toWords = exports.rafThrottle = void 0;
-exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.shadowsFor = exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.DISABLED_OPACITY = exports.BORDER_WIDTHS = exports.RADIUS_ROLE = exports.motionTransition = exports.transitionFor = exports.MOTION_LOOP_MS = exports.MOTION_BEZIER = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = void 0;
-exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.AudioRecorder = exports.CalendarGrid = exports.SectionRail = exports.BulkSelectionBar = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.FormDrawer = exports.CircularProgress = exports.StatusTag = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.MOTION_KEEP_CLASS = void 0;
-exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = void 0;
-exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = void 0;
-exports.TagInput = exports.TimePicker = exports.DEFAULT_DATE_FALLBACK = exports.formatDateRange = exports.formatDateTime = exports.formatDate = exports.SkipLink = exports.VisuallyHidden = exports.FormField = exports.IconButton = exports.ChoiceCardGroup = exports.ChoiceCard = exports.defaultPaginationLabels = exports.Pagination = void 0;
+exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.cardRule = exports.recessOn = exports.bandOn = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.shadowsFor = exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.DISABLED_OPACITY = exports.BORDER_WIDTHS = exports.RADIUS_ROLE = exports.motionTransition = exports.transitionFor = exports.MOTION_LOOP_MS = exports.MOTION_BEZIER = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = void 0;
+exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.AudioRecorder = exports.CalendarGrid = exports.SectionRail = exports.BulkSelectionBar = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.FormDrawer = exports.CircularProgress = exports.StatusTag = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.MOTION_KEEP_CLASS = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = void 0;
+exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = void 0;
+exports.WizardDialog = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = void 0;
+exports.TagInput = exports.TimePicker = exports.DEFAULT_DATE_FALLBACK = exports.formatDateRange = exports.formatDateTime = exports.formatDate = exports.SkipLink = exports.VisuallyHidden = exports.FormField = exports.IconButton = exports.ChoiceCardGroup = exports.ChoiceCard = exports.defaultPaginationLabels = exports.Pagination = exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -464,6 +464,10 @@ var surfaceRaised_1 = require("./Theme/tokens/builders/surfaceRaised");
 Object.defineProperty(exports, "buildSurfaceRaised", { enumerable: true, get: function () { return surfaceRaised_1.buildSurfaceRaised; } });
 Object.defineProperty(exports, "raisedRule", { enumerable: true, get: function () { return surfaceRaised_1.raisedRule; } });
 Object.defineProperty(exports, "RAISED_OVERLAY", { enumerable: true, get: function () { return surfaceRaised_1.RAISED_OVERLAY; } });
+var planeStep_1 = require("./Theme/tokens/builders/planeStep");
+Object.defineProperty(exports, "bandOn", { enumerable: true, get: function () { return planeStep_1.bandOn; } });
+Object.defineProperty(exports, "recessOn", { enumerable: true, get: function () { return planeStep_1.recessOn; } });
+Object.defineProperty(exports, "cardRule", { enumerable: true, get: function () { return planeStep_1.cardRule; } });
 var overlay_styles_1 = require("./Theme/chakra/overlay.styles");
 Object.defineProperty(exports, "overlayScrimStyles", { enumerable: true, get: function () { return overlay_styles_1.overlayScrimStyles; } });
 Object.defineProperty(exports, "OVERLAY_BLUR", { enumerable: true, get: function () { return overlay_styles_1.OVERLAY_BLUR; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.62",
+  "version": "2.4.2-beta.63",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",