pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

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

@@ -1,19 +1,7 @@
 import type { PaletteProps } from "../types";
 /** A field always renders on at least one surface — the first is the reference backdrop. */
 export type FieldSurfaces = readonly [string, ...string[]];
-/**
- * The hint ink for a field: the brand's authored rung settled onto `PLACEHOLDER_TEXT` against the
- * hardest surface a field can land on — lifted when it falls short, softened when it overshoots.
- *
- * Settled rather than floored because the authored rungs measured 3.96-7.73:1 across the brands,
- * and anything much past the floor reads as a field already typed into. The floor is the look:
- * one hint weight for every brand in both modes, instead of a per-brand accident.
- */
 export declare const placeholderInkOn: (palette: PaletteProps, surfaces: FieldSurfaces) => string;
-/**
- * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
- * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
- */
 export declare const fieldSurfaces: (palette: PaletteProps) => FieldSurfaces;
 /** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
 export declare const placeholderInk: (palette: PaletteProps) => string;

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

@@ -4,14 +4,7 @@ exports.placeholderInk = exports.fieldSurfaces = exports.placeholderInkOn = void
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const surfaceRungs_1 = require("./surfaceRungs");
-/**
- * The hint ink for a field: the brand's authored rung settled onto `PLACEHOLDER_TEXT` against the
- * hardest surface a field can land on — lifted when it falls short, softened when it overshoots.
- *
- * Settled rather than floored because the authored rungs measured 3.96-7.73:1 across the brands,
- * and anything much past the floor reads as a field already typed into. The floor is the look:
- * one hint weight for every brand in both modes, instead of a per-brand accident.
- */
+// NOTE: settled (not floored) onto PLACEHOLDER_TEXT — one hint weight across brands, not a per-brand accident.
 const placeholderInkOn = (palette, surfaces) => {
     const rung = palette.placeholder[500];
     const hardest = surfaces.reduce((worst, s) => (0, color_1.contrastRatio)(rung, s) < (0, color_1.contrastRatio)(rung, worst) ? s : worst);
@@ -20,10 +13,7 @@ const placeholderInkOn = (palette, surfaces) => {
         : (0, outlineRung_1.liftToContrast)(rung, hardest, surfaceRungs_1.PLACEHOLDER_TEXT);
 };
 exports.placeholderInkOn = placeholderInkOn;
-/**
- * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
- * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
- */
+// NOTE: enabled fields only — 1.4.3 exempts disabled ones, and folding their dimmer fill in would darken every other field's hint.
 const fieldSurfaces = (palette) => [
     palette.gray[50],
     palette.background[50],

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

@@ -1,10 +1,5 @@
 import { AA_NON_TEXT } from "./outlineRung";
 import type { PaletteProps } from "../types";
-/**
- * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
- * an empty field looked like one already typed into — and the published library ships this rung
- * as the brand authored it. See CHROME-CONSISTENCY.md.
- */
 export declare function withPlaceholderRung(palette: PaletteProps): PaletteProps;
 /** The hover row is a SURFACE, so it steps away from the ink rather than the ink moving. */
 export declare function withTableHoverRung(palette: PaletteProps): PaletteProps;

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

@@ -7,11 +7,7 @@ const outlineRung_1 = require("./outlineRung");
 Object.defineProperty(exports, "AA_NON_TEXT", { enumerable: true, get: function () { return outlineRung_1.AA_NON_TEXT; } });
 const accentText_1 = require("./accentText");
 const surfaceRungs_1 = require("./surfaceRungs");
-/**
- * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
- * an empty field looked like one already typed into — and the published library ships this rung
- * as the brand authored it. See CHROME-CONSISTENCY.md.
- */
+// NOTE: hint floored at 3:1, not 4.5:1 — held to body-text contrast it read as already-typed-into. See CHROME-CONSISTENCY.md.
 function withPlaceholderRung(palette) {
     const resolved = (0, outlineRung_1.liftToContrast)(palette.placeholder[500], palette.background[50], surfaceRungs_1.PLACEHOLDER_TEXT);
     if (resolved === palette.placeholder[500])

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

@@ -4,10 +4,4 @@ export interface RowStateBackgrounds {
     selected: string;
     selectedActive: string;
 }
-/**
- * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
- * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
- * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
- * solid brand fill under unreadable text.
- */
 export declare const listRowBackgrounds: (colors: PaletteProps) => RowStateBackgrounds;

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

@@ -2,16 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listRowBackgrounds = void 0;
 const outlineRung_1 = require("./outlineRung");
-/**
- * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
- * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
- * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
- * solid brand fill under unreadable text.
- */
+// NOTE: rungs stay neutral/pale — seeding from primary[500] instead once painted SelectV2's hover solid brand fill.
 const listRowBackgrounds = (colors) => {
-    const selected = colors.backgroundColor.tertiary;
+    // Dark aliases backgroundColor.tertiary to the panel, leaving the selected row at 1.025:1.
+    const selected = (0, outlineRung_1.liftToContrast)(colors.backgroundColor.tertiary, colors.surfaceRaised, outlineRung_1.MIN_PERCEPTIBLE_STEP);
     return {
-        active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.backgroundColor.light),
+        active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.surfaceRaised),
         selected,
         selectedActive: (0, outlineRung_1.resolveHoverTint)(selected, selected),
     };

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

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+export declare const SCRIM_OPACITY = 0.6;
+export declare const BACKDROP_SCRIM_OPACITY = 0.5;
+/** Modal/Drawer backdrop: `black` never remaps between modes, so one alpha works in both. */
+export declare const overlayScrim: (colors: Pick<PaletteProps, "black">) => string;
+export declare const backdropScrim: (colors: Pick<PaletteProps, "black">) => string;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backdropScrim = exports.overlayScrim = exports.BACKDROP_SCRIM_OPACITY = exports.SCRIM_OPACITY = void 0;
+const color_1 = require("./color");
+exports.SCRIM_OPACITY = 0.6;
+exports.BACKDROP_SCRIM_OPACITY = 0.5;
+/** Modal/Drawer backdrop: `black` never remaps between modes, so one alpha works in both. */
+const overlayScrim = (colors) => {
+    const { r, g, b } = (0, color_1.hexToRgb)(colors.black);
+    return `rgba(${r}, ${g}, ${b}, ${exports.SCRIM_OPACITY})`;
+};
+exports.overlayScrim = overlayScrim;
+const backdropScrim = (colors) => {
+    const { r, g, b } = (0, color_1.hexToRgb)(colors.black);
+    return `rgba(${r}, ${g}, ${b}, ${exports.BACKDROP_SCRIM_OPACITY})`;
+};
+exports.backdropScrim = backdropScrim;

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

@@ -3,10 +3,6 @@ export type ScrollbarStyle = Record<string, unknown>;
 /** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
 export declare const SCROLLBAR_WIDTH = "6px";
 export type ScrollbarVariant = "default" | "overlay" | "hover";
-/**
- * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
- * card; `hover` keeps the thumb invisible until the region is hovered.
- */
 export declare function scrollbarStyles(palette: PaletteProps, variant?: ScrollbarVariant): ScrollbarStyle;
 /** The same chrome for the document itself, where `&` selectors do not apply. */
 export declare function globalScrollbarStyles(palette: PaletteProps): ScrollbarStyle;

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

@@ -6,10 +6,7 @@ exports.globalScrollbarStyles = globalScrollbarStyles;
 /** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
 exports.SCROLLBAR_WIDTH = "6px";
 const RADIUS = "6px";
-/**
- * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
- * card; `hover` keeps the thumb invisible until the region is hovered.
- */
+// NOTE: single source of scrollbar chrome — `overlay` drops the track, `hover` hides the thumb until hovered.
 function scrollbarStyles(palette, variant = "default") {
     const { gray } = palette;
     const track = variant === "default" ? gray[100] : "transparent";

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

@@ -1,10 +1,5 @@
 import type { SemanticColors, SemanticTextTokens, SemanticTone } from "../types";
 export declare const SEMANTIC_TONES: readonly SemanticTone[];
-/**
- * `semantic[tone][500]` is a FILL rung — as ink on a light canvas it measures 1.84-3.68:1 across
- * every brand. Each tone is stepped here until it clears AA as text, so a call site that wants
- * "error-coloured text" cannot pick the unreadable one.
- */
 export declare const buildSemanticText: (semantic: SemanticColors, canvas: string) => SemanticTextTokens;
 /** Ink ON the fill, not on the canvas — the pair a CSS module needs but cannot compute. */
 export declare const buildOnSemantic: (semantic: SemanticColors, white: string, black: string) => SemanticTextTokens;

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

@@ -4,11 +4,7 @@ exports.buildOnSemantic = exports.buildSemanticText = exports.SEMANTIC_TONES = v
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 exports.SEMANTIC_TONES = ["success", "error", "warning", "info"];
-/**
- * `semantic[tone][500]` is a FILL rung — as ink on a light canvas it measures 1.84-3.68:1 across
- * every brand. Each tone is stepped here until it clears AA as text, so a call site that wants
- * "error-coloured text" cannot pick the unreadable one.
- */
+// NOTE: semantic[tone][500] is a fill rung (1.84-3.68:1 as text) — stepped here until it clears AA.
 const buildSemanticText = (semantic, canvas) => exports.SEMANTIC_TONES.reduce((acc, tone) => {
     acc[tone] = (0, outlineRung_1.liftToContrast)(semantic[tone][500], canvas, accentText_1.AA_NORMAL_TEXT);
     return acc;

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

@@ -4,6 +4,14 @@ export declare const AA_NORMAL_TEXT = 4.5;
 /** Lightest surface an active row reaches: Chakra `whiteAlpha.400` (0.24) on hover. */
 export declare const ACTIVE_SURFACE_TINT = "#ffffff3d";
 export declare const sidebarActiveSurface: (background: ColorScale) => string;
+/** Lightest a row ever gets on ANY rail surface — what chrome inside a row must clear. */
+export declare const sidebarRowPeak: (surface: string) => string;
+/** Stronger than the divider — a hover fill must read as an action, not a rule. */
+export declare const HOVER_SURFACE_TINT = "#ffffff20";
+/** Chakra whiteAlpha.100 (0.06) — a divider only needs to read, not shout. */
+export declare const DIVIDER_SURFACE_TINT = "#ffffff0f";
+export declare const sidebarHoverSurface: (background: ColorScale) => string;
+export declare const sidebarDivider: (background: ColorScale) => string;
 /** The rail never inverts, so both modes take the accent from the LIGHT primary. */
 export declare const buildSidebarTokens: (background: ColorScale, lightPrimary: ColorScale, semantic: SemanticColors) => SidebarTokens;
 export declare const withSidebarTokens: (source: BrandPaletteSource) => SidebarTokens;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSidebarTokens = exports.buildSidebarTokens = exports.sidebarActiveSurface = exports.ACTIVE_SURFACE_TINT = exports.AA_NORMAL_TEXT = void 0;
+exports.withSidebarTokens = exports.buildSidebarTokens = exports.sidebarDivider = exports.sidebarHoverSurface = exports.DIVIDER_SURFACE_TINT = exports.HOVER_SURFACE_TINT = exports.sidebarRowPeak = exports.sidebarActiveSurface = exports.ACTIVE_SURFACE_TINT = exports.AA_NORMAL_TEXT = void 0;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const semanticText_1 = require("./semanticText");
@@ -10,6 +10,17 @@ exports.AA_NORMAL_TEXT = 4.5;
 exports.ACTIVE_SURFACE_TINT = "#ffffff3d";
 const sidebarActiveSurface = (background) => (0, color_1.compositeOver)(exports.ACTIVE_SURFACE_TINT, background[500]);
 exports.sidebarActiveSurface = sidebarActiveSurface;
+/** Lightest a row ever gets on ANY rail surface — what chrome inside a row must clear. */
+const sidebarRowPeak = (surface) => (0, color_1.compositeOver)(exports.ACTIVE_SURFACE_TINT, surface);
+exports.sidebarRowPeak = sidebarRowPeak;
+/** Stronger than the divider — a hover fill must read as an action, not a rule. */
+exports.HOVER_SURFACE_TINT = "#ffffff20";
+/** Chakra whiteAlpha.100 (0.06) — a divider only needs to read, not shout. */
+exports.DIVIDER_SURFACE_TINT = "#ffffff0f";
+const sidebarHoverSurface = (background) => (0, outlineRung_1.resolveHoverTint)((0, color_1.compositeOver)(exports.HOVER_SURFACE_TINT, background[500]), background[500]);
+exports.sidebarHoverSurface = sidebarHoverSurface;
+const sidebarDivider = (background) => (0, outlineRung_1.resolveHoverTint)((0, color_1.compositeOver)(exports.DIVIDER_SURFACE_TINT, background[500]), background[500]);
+exports.sidebarDivider = sidebarDivider;
 /** The rail never inverts, so both modes take the accent from the LIGHT primary. */
 const buildSidebarTokens = (background, lightPrimary, semantic) => {
     const surface = (0, exports.sidebarActiveSurface)(background);
@@ -22,6 +33,9 @@ const buildSidebarTokens = (background, lightPrimary, semantic) => {
         mutedIcon: (0, outlineRung_1.liftToContrast)(background[300], elevated, outlineRung_1.AA_NON_TEXT),
         mutedLabel: (0, outlineRung_1.liftToContrast)(background[100], elevated, exports.AA_NORMAL_TEXT),
         semanticText: (0, semanticText_1.buildSemanticText)(semantic, elevated),
+        hoverBg: (0, exports.sidebarHoverSurface)(background),
+        activeBg: surface,
+        divider: (0, exports.sidebarDivider)(background),
     };
 };
 exports.buildSidebarTokens = buildSidebarTokens;

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

@@ -7,28 +7,10 @@ export type StatusTone = {
     /** 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. */
+/** @deprecated Use `resolveAvatarColorway(seed, colors)` — different arity and returns `{bg, color}`. */
 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;

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

@@ -7,15 +7,7 @@ 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.
- */
+// NOTE: X.500-on-X.100 measured 3.3-4.4:1 (under AA) — ink is resolved per brand/mode instead of pinned.
 function resolveStatusTone(scale, mode) {
     const bg = scale[100];
     const inkSeed = mode === "dark" ? scale[300] : scale[700];
@@ -26,18 +18,11 @@ function resolveStatusTone(scale, mode) {
         border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, 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.
- */
+// NOTE: seed hues measured as low as 1.92:1 for white initials — darkened here to clear AA, hue kept.
 function resolveAvatarFill(hex, target = accentText_1.AA_NORMAL_TEXT) {
     return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", target);
 }
-/**
- * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
- * `resolveAvatarFill` so the white initials stay legible.
- */
+// Seeds only, not final fills — always pass through resolveAvatarFill so white initials stay legible.
 exports.AVATAR_SEEDS = [
     "#ef4444",
     "#f97316",
@@ -49,7 +34,7 @@ exports.AVATAR_SEEDS = [
     "#8b5cf6",
     "#ec4899",
 ];
-/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+/** @deprecated Use `resolveAvatarColorway(seed, colors)` — different arity and returns `{bg, color}`. */
 function avatarFillFor(seedText) {
     let hash = 0;
     for (let i = 0; i < seedText.length; i++) {

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

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+export declare const RAISED_OVERLAY = 0.07;
+export type SurfaceRaisedSource = Pick<PaletteProps, "backgroundColor" | "background" | "white">;
+export declare const buildSurfaceRaised: (source: SurfaceRaisedSource) => string;
+export declare const withSurfaceRaised: (palette: PaletteProps) => PaletteProps;
+export declare const raisedRule: (colors: Pick<PaletteProps, "boxborder" | "background" | "surfaceRaised">) => string;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.RAISED_OVERLAY = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.RAISED_OVERLAY = 0.07;
+// Never below the card, and at least one white-overlay step above the canvas.
+const buildSurfaceRaised = (source) => {
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const card = source.background[50];
+    return (0, color_1.relativeLuminance)(overlay) > (0, color_1.relativeLuminance)(card) ? overlay : card;
+};
+exports.buildSurfaceRaised = buildSurfaceRaised;
+const withSurfaceRaised = (palette) => ({
+    ...palette,
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette),
+});
+exports.withSurfaceRaised = withSurfaceRaised;
+// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)(colors.boxborder[200], colors.background[50]));
+exports.raisedRule = raisedRule;

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

@@ -1,8 +1,4 @@
 import type { PaletteProps } from "../types";
-/**
- * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
- * reads as one already typed into. See CHROME-CONSISTENCY.md.
- */
 export declare const PLACEHOLDER_TEXT = 3;
 export declare const namedSurfaces: (palette: PaletteProps) => string[];
 /** The surface an ink is closest to — clearing it clears every other one. */

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

@@ -6,14 +6,12 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
-/**
- * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
- * reads as one already typed into. See CHROME-CONSISTENCY.md.
- */
+// 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.
 exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
+    palette.surfaceRaised,
     palette.table.hover[500],
 ];
 exports.namedSurfaces = namedSurfaces;
@@ -37,14 +35,10 @@ function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },
-        // `placeholder` is deliberately absent: the brand authors that rung and the published
-        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
-        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
-        // Settled, not lifted: this rung already passed through `withOutlineRung`, and lifting it
-        // again here to AA_NON_TEXT is what shipped 3.85-4.95:1 outlines. See CHROME_BORDER.
         boxborder: {
             ...palette.boxborder,
             200: rule(palette.boxborder[200]),
+            // NOTE: settled, not lifted — lifting again here to AA_NON_TEXT shipped 3.85-4.95:1 outlines.
             500: settle(palette.boxborder[500], outlineRung_1.CHROME_BORDER),
         },
         // The 200 rung of both ramps is the same job under two names; settle them together or an

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

@@ -0,0 +1,22 @@
+import type { ColorScale, PaletteProps, SemanticTone } from "../types";
+export type Tone = "neutral" | "info" | "success" | "warning" | "error";
+export type ToneColorScheme = "gray" | "blue" | "green" | "orange" | "red";
+export declare const TONES: readonly Tone[];
+export declare const toneToColorScheme: Readonly<Record<Tone, ToneColorScheme>>;
+export declare const toneToSemantic: Readonly<Record<Exclude<Tone, "neutral">, SemanticTone>>;
+export declare const isTone: (value: unknown) => value is Tone;
+export declare const toneScale: (colors: PaletteProps, tone: Tone) => ColorScale;
+/** Status ink on the canvas: `semanticText.<tone>`, or `textMuted` for neutral. */
+export declare const toneInk: (colors: PaletteProps, tone: Tone) => string;
+/** A soft fill + its hover/active steps, all translucent so they read correctly on any surface. */
+export type SoftTone = {
+    bg: string;
+    fg: string;
+    border: string;
+    hoverBg: string;
+    hoverBorder: string;
+    activeBg: string;
+    activeBorder: string;
+};
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+export declare const resolveSoftTone: (colors: PaletteProps, scale: ColorScale, surface?: string) => SoftTone;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.isTone = exports.toneToSemantic = exports.toneToColorScheme = exports.TONES = void 0;
+const accentText_1 = require("./accentText");
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.TONES = ["neutral", "info", "success", "warning", "error"];
+exports.toneToColorScheme = {
+    neutral: "gray",
+    info: "blue",
+    success: "green",
+    warning: "orange",
+    error: "red",
+};
+exports.toneToSemantic = {
+    info: "info",
+    success: "success",
+    warning: "warning",
+    error: "error",
+};
+const isTone = (value) => typeof value === "string" && exports.TONES.includes(value);
+exports.isTone = isTone;
+const toneScale = (colors, tone) => colors[exports.toneToColorScheme[tone]];
+exports.toneScale = toneScale;
+/** Status ink on the canvas: `semanticText.<tone>`, or `textMuted` for neutral. */
+const toneInk = (colors, tone) => tone === "neutral" ? colors.textMuted : colors.semanticText[exports.toneToSemantic[tone]];
+exports.toneInk = toneInk;
+const BG_ALPHA = { light: 0.1, dark: 0.17 };
+const RING_ALPHA = { light: 0.22, dark: 0.28 };
+const STATE_STEP = 0.08;
+const SOFT_INK_TARGET = 6.5;
+const withAlpha = (hex, alpha) => `${hex}${Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, "0")}`;
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+    const dark = (0, accentText_1.isDarkCanvas)(surface);
+    const hue = scale[500];
+    const bgAlpha = dark ? BG_ALPHA.dark : BG_ALPHA.light;
+    const ringAlpha = dark ? RING_ALPHA.dark : RING_ALPHA.light;
+    const bg = withAlpha(hue, bgAlpha);
+    const border = withAlpha(hue, ringAlpha);
+    const fg = (0, outlineRung_1.liftToContrast)(hue, (0, color_1.compositeOver)(bg, surface), SOFT_INK_TARGET);
+    return {
+        bg,
+        fg,
+        border,
+        hoverBg: withAlpha(hue, bgAlpha + STATE_STEP),
+        hoverBorder: withAlpha(hue, ringAlpha + STATE_STEP * 1.5),
+        activeBg: withAlpha(hue, bgAlpha + STATE_STEP * 1.75),
+        activeBorder: withAlpha(hue, ringAlpha + STATE_STEP * 2),
+    };
+};
+exports.resolveSoftTone = resolveSoftTone;

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

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+/** The one tooltip chip: the rail surface stays dark in both modes, so it floats over either canvas. */
+export declare const tooltipSurface: (colors: PaletteProps) => {
+    bg: string;
+    fg: string;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipSurface = void 0;
+const accentText_1 = require("./accentText");
+/** The one tooltip chip: the rail surface stays dark in both modes, so it floats over either canvas. */
+const tooltipSurface = (colors) => {
+    const bg = colors.sidebar.background[500];
+    return { bg, fg: (0, accentText_1.onFilled)(bg, colors.white, colors.black) };
+};
+exports.tooltipSurface = tooltipSurface;

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

@@ -0,0 +1,8 @@
+/** Full viewport height. `dvh` excludes mobile browser chrome; `vh` does not. */
+export declare const fullViewportHeight: {
+    height: string;
+    "@supports (height: 100dvh)": {
+        height: string;
+    };
+};
+export default fullViewportHeight;

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/controlSizes.d.ts

@@ -0,0 +1,12 @@
+export type ControlSize = "xs" | "sm" | "md" | "lg";
+export type ControlSizeSpec = {
+    height: string;
+    fontSize: string;
+    paddingX: string;
+    iconSize: number;
+};
+/** One height scale for fields, selects and buttons, so controls side by side line up. */
+export declare const CONTROL_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,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
+/** One height scale for fields, selects and buttons, so controls side by side line up. */
+exports.CONTROL_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

@@ -7,3 +7,5 @@ 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 * from "./controlSizes";
+export * from "./motion";

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

@@ -1,4 +1,18 @@
 "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 };
 };
@@ -25,3 +39,5 @@ 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; } });
+__exportStar(require("./controlSizes"), exports);
+__exportStar(require("./motion"), exports);

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

@@ -0,0 +1,8 @@
+export declare const MOTION_MS: {
+    readonly fast: 150;
+    readonly base: 200;
+};
+export type MotionSpeed = keyof typeof MOTION_MS;
+export declare const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+/** A `transition` value for named properties only — `all` also animates layout and colour flips. */
+export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed) => string;