pixelize-design-library 2.3.31 → 2.4.1-beta.10

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.liftToContrast = liftToContrast;
+exports.withOutlineRung = withOutlineRung;
+exports.resolveHoverTint = resolveHoverTint;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+exports.MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+exports.AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
+ * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
+ * stops at the FIRST passing step so nothing overshoots to black or white.
+ */
+function liftToContrast(hex, backdrop, mode, target = exports.AA_NON_TEXT) {
+    if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
+        return hex;
+    const { s } = (0, color_1.hexToHsl)(hex);
+    const step = mode === "dark" ? 1 : -1;
+    let { l } = (0, color_1.hexToHsl)(hex);
+    while (l > 0 && l < 100) {
+        l += step;
+        const next = (0, color_1.withLightness)(hex, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(hex, mode === "dark" ? 100 : 0, s);
+}
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+function withOutlineRung(palette, mode) {
+    const current = palette.boxborder[500];
+    // The border sits between the control's fill and the surface behind it; hold it to the
+    // harder of the two.
+    const backdrop = (0, color_1.contrastRatio)(current, palette.backgroundColor.main) <=
+        (0, color_1.contrastRatio)(current, palette.background[50])
+        ? palette.backgroundColor.main
+        : palette.background[50];
+    const resolved = liftToContrast(current, backdrop, mode);
+    if (resolved === current)
+        return palette;
+    return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
+}
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+function resolveHoverTint(seed, restSurface) {
+    const mode = (0, accentText_1.isDarkCanvas)(restSurface) ? "dark" : "light";
+    return liftToContrast(seed, restSurface, mode, exports.MIN_PERCEPTIBLE_STEP);
+}

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

@@ -0,0 +1,35 @@
+import type { ColorScale, ResolvedColorMode } from "../types";
+export type StatusTone = {
+    /** Chip fill. */
+    bg: string;
+    /** Label ink, guaranteed >= 4.5:1 on `bg`. */
+    fg: string;
+    /** Chip outline, guaranteed >= 3:1 on `bg`. */
+    border: string;
+};
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+export declare function resolveStatusTone(scale: ColorScale, mode: ResolvedColorMode): StatusTone;
+/**
+ * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
+ * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
+ * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
+ */
+export declare function resolveAvatarFill(hex: string, target?: number): string;
+/**
+ * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
+ * `resolveAvatarFill` so the white initials stay legible.
+ */
+export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+export declare function avatarFillFor(seedText: string): string;
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+export declare const meetsBodyText: (fg: string, bg: string) => boolean;
+//# sourceMappingURL=statusTone.d.ts.map

package/dist/Theme/tokens/builders/statusTone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusTone.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/statusTone.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAUxF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAuB,GAAG,MAAM,CAGtF;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,8GAUf,CAAC;AAEX,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMtD;AAED,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,OACd,CAAC"}

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.meetsBodyText = exports.AVATAR_SEEDS = void 0;
+exports.resolveStatusTone = resolveStatusTone;
+exports.resolveAvatarFill = resolveAvatarFill;
+exports.avatarFillFor = avatarFillFor;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+const outlineRung_1 = require("./outlineRung");
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+function resolveStatusTone(scale, mode) {
+    const bg = scale[100];
+    const inkSeed = mode === "dark" ? scale[300] : scale[700];
+    const edgeSeed = mode === "dark" ? scale[400] : scale[300];
+    return {
+        bg,
+        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, mode, accentText_1.AA_NORMAL_TEXT),
+        border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, mode, outlineRung_1.AA_NON_TEXT),
+    };
+}
+/**
+ * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
+ * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
+ * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
+ */
+function resolveAvatarFill(hex, target = accentText_1.AA_NORMAL_TEXT) {
+    // "light" walks downward in lightness — i.e. darken until white ink clears the bar.
+    return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", "light", target);
+}
+/**
+ * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
+ * `resolveAvatarFill` so the white initials stay legible.
+ */
+exports.AVATAR_SEEDS = [
+    "#ef4444",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#10b981",
+    "#06b6d4",
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+function avatarFillFor(seedText) {
+    let hash = 0;
+    for (let i = 0; i < seedText.length; i++) {
+        hash = (hash * 31 + seedText.charCodeAt(i)) >>> 0;
+    }
+    return resolveAvatarFill(exports.AVATAR_SEEDS[hash % exports.AVATAR_SEEDS.length]);
+}
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+const meetsBodyText = (fg, bg) => (0, color_1.contrastRatio)(fg, bg) >= accentText_1.AA_NORMAL_TEXT;
+exports.meetsBodyText = meetsBodyText;

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

@@ -0,0 +1,15 @@
+/**
+ * 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";
+export * from "./builders";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/dist/Theme/tokens/index.js

@@ -0,0 +1,30 @@
+"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);
+    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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./primitives"), exports);
+__exportStar(require("./brands"), exports);
+__exportStar(require("./builders"), exports);

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

@@ -0,0 +1,9 @@
+declare const breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};
+export default breakpoints;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/Theme/tokens/primitives/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/breakpoints.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW;;;;;;CAMhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const breakpoints = {
+    sm: "30em",
+    md: "48em",
+    lg: "62em",
+    xl: "80em",
+    "2xl": "96em",
+};
+exports.default = breakpoints;

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

@@ -0,0 +1,10 @@
+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 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";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,27 @@
+"use strict";
+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;
+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; } });
+var shadows_1 = require("./shadows");
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
+var zIndices_1 = require("./zIndices");
+Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
+var breakpoints_1 = require("./breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return __importDefault(breakpoints_1).default; } });
+var lineHeights_1 = require("./lineHeights");
+Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return __importDefault(lineHeights_1).default; } });
+var letterSpacings_1 = require("./letterSpacings");
+Object.defineProperty(exports, "letterSpacings", { enumerable: true, get: function () { return __importDefault(letterSpacings_1).default; } });
+var typography_1 = require("./typography");
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return __importDefault(typography_1).default; } });
+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; } });

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

@@ -0,0 +1,10 @@
+declare const letterSpacings: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+};
+export default letterSpacings;
+//# sourceMappingURL=letterSpacings.d.ts.map

package/dist/Theme/tokens/primitives/letterSpacings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"letterSpacings.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/letterSpacings.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc;;;;;;;CAOnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const letterSpacings = {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+};
+exports.default = letterSpacings;

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

@@ -0,0 +1,19 @@
+declare const lineHeights: {
+    normal: string;
+    none: number;
+    shorter: number;
+    short: number;
+    base: number;
+    tall: number;
+    taller: string;
+    "3": string;
+    "4": string;
+    "5": string;
+    "6": string;
+    "7": string;
+    "8": string;
+    "9": string;
+    "10": string;
+};
+export default lineHeights;
+//# sourceMappingURL=lineHeights.d.ts.map

package/dist/Theme/tokens/primitives/lineHeights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineHeights.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/lineHeights.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lineHeights = {
+    normal: "normal",
+    none: 1,
+    shorter: 1.25,
+    short: 1.375,
+    base: 1.5,
+    tall: 1.625,
+    taller: "2",
+    "3": ".75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+};
+exports.default = lineHeights;

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

@@ -0,0 +1,13 @@
+declare const radii: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+};
+export default radii;
+//# sourceMappingURL=radii.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/radii.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const radii = {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+exports.default = radii;

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

@@ -0,0 +1,16 @@
+/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+declare const shadows: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    outline: string;
+    inner: string;
+    none: string;
+    darkLg: string;
+};
+export default shadows;
+//# sourceMappingURL=shadows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/shadows.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,QAAA,MAAM,OAAO;;;;;;;;;;;;CAaZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+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)",
+    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)",
+};
+exports.default = shadows;

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

@@ -0,0 +1,63 @@
+/**
+ * `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;
+    screenH: string;
+    max: string;
+    min: string;
+    "3xs": string;
+    "2xs": string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    container: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    px: string;
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+};
+export default sizes;
+//# sourceMappingURL=sizes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/sizes.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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.
+ */
+const sizes = {
+    ...space_1.default,
+    full: "100%",
+    screenW: "100vw",
+    screenH: "100vh",
+    max: "max-content",
+    min: "min-content",
+    "3xs": "14rem",
+    "2xs": "16rem",
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+    "8xl": "90rem",
+    container: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+    },
+};
+exports.default = sizes;

package/dist/Theme/tokens/primitives/space.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/space.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,73 @@
+/**
+ * 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: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    "9xl": string;
+};
+export declare const fontWeights: {
+    hairline: number;
+    thin: number;
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+    black: number;
+};
+declare const typography: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default typography;
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/typography.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAcrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;CAUvB,CAAC;AAEF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAoC,CAAC;AAErD,eAAe,UAAU,CAAC"}