pixelize-design-library 2.4.2 → 3.0.0

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fullViewportHeight = void 0;
+/** Full viewport height. `dvh` excludes mobile browser chrome; `vh` does not. */
+exports.fullViewportHeight = {
+    height: "100vh",
+    "@supports (height: 100dvh)": { height: "100dvh" },
+};
+exports.default = exports.fullViewportHeight;

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

@@ -1,13 +1,3 @@
-/**
- * Pixelize design tokens — the portable core of the design system.
- *
- * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
- * TypeScript data + pure functions, so the mobile design library can consume this
- * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
- *
- * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
- * live in `Theme/chakra/` instead.
- */
 export * from "./types";
 export * from "./primitives";
 export * from "./brands";

package/dist/Theme/tokens/index.js

@@ -1,14 +1,4 @@
 "use strict";
-/**
- * Pixelize design tokens — the portable core of the design system.
- *
- * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
- * TypeScript data + pure functions, so the mobile design library can consume this
- * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
- *
- * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
- * live in `Theme/chakra/` instead.
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -24,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// NOTE: purity contract — nothing here imports Chakra/React/CSS, so the mobile design library can consume it as-is.
 __exportStar(require("./types"), exports);
 __exportStar(require("./primitives"), exports);
 __exportStar(require("./brands"), exports);

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

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

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

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

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

@@ -0,0 +1,13 @@
+export type ControlSize = "xs" | "sm" | "md" | "lg";
+export type ControlSizeSpec = {
+    height: string;
+    fontSize: string;
+    paddingX: string;
+    iconSize: number;
+};
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
+export declare const CONTROL_SIZES: Readonly<Record<ControlSize, ControlSizeSpec>>;
+export declare const BUTTON_SIZES: Readonly<Record<ControlSize, ControlSizeSpec>>;
+export declare const CONTROL_SIZE_NAMES: readonly ControlSize[];
+export declare const DEFAULT_CONTROL_SIZE: ControlSize;
+export declare const isControlSize: (value: unknown) => value is ControlSize;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.BUTTON_SIZES = exports.CONTROL_SIZES = void 0;
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
+exports.CONTROL_SIZES = {
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
+};
+exports.BUTTON_SIZES = {
+    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
+};
+exports.CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];
+exports.DEFAULT_CONTROL_SIZE = "sm";
+const isControlSize = (value) => typeof value === "string" && exports.CONTROL_SIZE_NAMES.includes(value);
+exports.isControlSize = isControlSize;

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

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

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

@@ -1,17 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadows = exports.radii = exports.sizes = exports.space = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.SHADOW_INK = exports.ELEVATION_LAYERS = exports.shadowCss = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
 var space_1 = require("./space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_1).default; } });
 var sizes_1 = require("./sizes");
 Object.defineProperty(exports, "sizes", { enumerable: true, get: function () { return __importDefault(sizes_1).default; } });
 var radii_1 = require("./radii");
 Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+Object.defineProperty(exports, "RADIUS_ROLE", { enumerable: true, get: function () { return radii_1.RADIUS_ROLE; } });
+__exportStar(require("./borderWidths"), exports);
+__exportStar(require("./states"), exports);
 var shadows_1 = require("./shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
+Object.defineProperty(exports, "shadowsDark", { enumerable: true, get: function () { return shadows_1.shadowsDark; } });
+Object.defineProperty(exports, "shadowsFor", { enumerable: true, get: function () { return shadows_1.shadowsFor; } });
+Object.defineProperty(exports, "shadowCss", { enumerable: true, get: function () { return shadows_1.shadowCss; } });
+Object.defineProperty(exports, "ELEVATION_LAYERS", { enumerable: true, get: function () { return shadows_1.ELEVATION_LAYERS; } });
+Object.defineProperty(exports, "SHADOW_INK", { enumerable: true, get: function () { return shadows_1.SHADOW_INK; } });
 var zIndices_1 = require("./zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 var breakpoints_1 = require("./breakpoints");
@@ -25,3 +47,7 @@ Object.defineProperty(exports, "typography", { enumerable: true, get: function (
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return typography_1.fonts; } });
 Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return typography_1.fontSizes; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return typography_1.fontWeights; } });
+Object.defineProperty(exports, "NUMERIC_TEXT", { enumerable: true, get: function () { return typography_1.NUMERIC_TEXT; } });
+Object.defineProperty(exports, "TEXT_STYLES", { enumerable: true, get: function () { return typography_1.TEXT_STYLES; } });
+__exportStar(require("./controlSizes"), exports);
+__exportStar(require("./motion"), exports);

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

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

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

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

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

@@ -0,0 +1,20 @@
+import type { ControlSize } from "./controlSizes";
+export type OptionRowSpec = {
+    minH: string;
+    px: string;
+    py: string;
+    gap: string;
+    /** Inset so the row's rounded fill stops short of the popup edge. */
+    mx: string;
+    fontSize: string;
+    descriptionFontSize: string;
+    iconSize: number;
+    /** Avatar token for rows that lead with one — an `sm` avatar alone outgrows an `sm` row. */
+    avatarSize: "2xs" | "xs" | "sm";
+    /** Fixed row height the virtualiser scrolls by; must match a single-line row. */
+    virtualRowHeightPx: number;
+};
+/** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
+export declare const OPTION_ROW_SIZES: Readonly<Record<ControlSize, OptionRowSpec>>;
+export declare const OPTION_ROW_RADIUS: "md";
+export declare const optionRowSpec: (size: ControlSize) => OptionRowSpec;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = void 0;
+const radii_1 = require("./radii");
+/** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
+exports.OPTION_ROW_SIZES = {
+    xs: {
+        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
+        avatarSize: "2xs", virtualRowHeightPx: 24,
+    },
+    sm: {
+        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
+        avatarSize: "xs", virtualRowHeightPx: 30,
+    },
+    md: {
+        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
+        avatarSize: "xs", virtualRowHeightPx: 34,
+    },
+    lg: {
+        minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",
+        fontSize: "1rem", descriptionFontSize: "0.8125rem", iconSize: 18,
+        avatarSize: "sm", virtualRowHeightPx: 40,
+    },
+};
+exports.OPTION_ROW_RADIUS = radii_1.RADIUS_ROLE.option;
+const optionRowSpec = (size) => exports.OPTION_ROW_SIZES[size];
+exports.optionRowSpec = optionRowSpec;

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

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

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

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

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

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

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

@@ -1,17 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+exports.shadowsFor = exports.shadowsDark = exports.shadowCss = exports.ELEVATION_LAYERS = exports.SHADOW_INK = void 0;
+const layer = (x, y, blur, spread, alphaHex) => ({
+    x,
+    y,
+    blur,
+    spread,
+    alphaHex,
+});
+exports.SHADOW_INK = { light: "#141828", dark: "#000000" };
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+exports.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;
+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(", ");
+exports.shadowCss = shadowCss;
+const elevationRamp = (mode) => {
+    const css = (role) => (0, exports.shadowCss)(exports.ELEVATION_LAYERS[mode][role], exports.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,
 };
+exports.shadowsDark = { ...shadows, ...elevationRamp("dark") };
+const shadowsFor = (mode) => mode === "dark" ? exports.shadowsDark : shadows;
+exports.shadowsFor = shadowsFor;
 exports.default = shadows;

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

@@ -1,7 +1,3 @@
-/**
- * `screenW`/`screenH` use viewport units — a web concept. The mobile port should
- * map these to `Dimensions.get("window")` rather than consuming them literally.
- */
 declare const sizes: {
     full: string;
     screenW: string;

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

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const space_1 = __importDefault(require("./space"));
-/**
- * `screenW`/`screenH` use viewport units — a web concept. The mobile port should
- * map these to `Dimensions.get("window")` rather than consuming them literally.
- */
+// NOTE: screenW/screenH use viewport units — the mobile port should map these to Dimensions.get("window").
 const sizes = {
     ...space_1.default,
     full: "100%",

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

@@ -0,0 +1 @@
+export declare const DISABLED_OPACITY = 0.5;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DISABLED_OPACITY = void 0;
+exports.DISABLED_OPACITY = 0.5;

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

@@ -1,17 +1,12 @@
-/**
- * Pure typography tokens. Platform-agnostic.
- *
- * NOTE: the web build must additionally load the Inter Variable font face
- * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
- * deliberately NOT here — a CSS import would break the mobile port of this folder.
- */
 export declare const fonts: {
     body: string;
     heading: string;
     mono: string;
 };
 export declare const fontSizes: {
+    "xs-minus": string;
     xs: string;
+    "xs-plus": string;
     sm: string;
     md: string;
     lg: string;
@@ -36,6 +31,19 @@ export declare const fontWeights: {
     extrabold: number;
     black: number;
 };
+export declare const NUMERIC_TEXT: {
+    readonly fontVariantNumeric: "tabular-nums";
+};
+export type TextStyleSpec = {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+    letterSpacing: string;
+    textTransform?: "uppercase";
+};
+export type TextStyleName = "title" | "heading" | "subheading" | "body" | "ui" | "label" | "caption" | "overline";
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+export declare const TEXT_STYLES: Readonly<Record<TextStyleName, TextStyleSpec>>;
 declare const typography: {
     fonts: {
         body: string;
@@ -43,7 +51,9 @@ declare const typography: {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;

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

@@ -1,20 +1,16 @@
 "use strict";
-/**
- * Pure typography tokens. Platform-agnostic.
- *
- * NOTE: the web build must additionally load the Inter Variable font face
- * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
- * deliberately NOT here — a CSS import would break the mobile port of this folder.
- */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
+// NOTE: pure/platform-agnostic — the Inter font-face CSS import lives in Theme/chakra/fonts.web.ts, not here.
 exports.fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",
-    mono: "Inter Variable, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 };
 exports.fontSizes = {
+    "xs-minus": "0.6875rem",
     xs: "0.75rem",
+    "xs-plus": "0.8125rem",
     sm: "0.875rem",
     md: "1rem",
     lg: "1.125rem",
@@ -39,5 +35,23 @@ exports.fontWeights = {
     extrabold: 800,
     black: 900,
 };
+exports.NUMERIC_TEXT = { fontVariantNumeric: "tabular-nums" };
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+exports.TEXT_STYLES = {
+    title: { fontSize: "1.5rem", lineHeight: "1.875rem", fontWeight: 700, letterSpacing: "-0.02em" },
+    heading: { fontSize: "1.25rem", lineHeight: "1.625rem", fontWeight: 600, letterSpacing: "-0.015em" },
+    subheading: { fontSize: "1rem", lineHeight: "1.375rem", fontWeight: 600, letterSpacing: "-0.006em" },
+    body: { fontSize: "0.875rem", lineHeight: "1.25rem", fontWeight: 400, letterSpacing: "0" },
+    ui: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 500, letterSpacing: "0" },
+    label: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 600, letterSpacing: "0" },
+    caption: { fontSize: "0.75rem", lineHeight: "1rem", fontWeight: 500, letterSpacing: "0" },
+    overline: {
+        fontSize: "0.6875rem",
+        lineHeight: "0.875rem",
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+};
 const typography = { fonts: exports.fonts, fontSizes: exports.fontSizes, fontWeights: exports.fontWeights };
 exports.default = typography;

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

@@ -9,6 +9,7 @@ declare const zIndices: {
     overlay: number;
     modal: number;
     popover: number;
+    popoverNested: number;
     skipLink: number;
     toast: number;
     tooltip: number;

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

@@ -11,6 +11,7 @@ const zIndices = {
     overlay: 1300,
     modal: 1400,
     popover: 1500,
+    popoverNested: 1510,
     skipLink: 1600,
     toast: 1700,
     tooltip: 1800,