pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../types";
+export interface RowStateBackgrounds {
+    active: string;
+    selected: string;
+    selectedActive: string;
+}
+export declare const listRowBackgrounds: (colors: PaletteProps) => RowStateBackgrounds;
+export declare const SELECTED_ROW_STEP = 1.28;
+export declare const DISTINCT_ROW_STEP = 1.1;
+export interface SelectRowBackgrounds extends RowStateBackgrounds {
+    keyboardRing: string;
+}
+export declare const selectRowBackgrounds: (colors: PaletteProps) => SelectRowBackgrounds;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRowBackgrounds = exports.DISTINCT_ROW_STEP = exports.SELECTED_ROW_STEP = exports.listRowBackgrounds = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const listRowBackgrounds = (colors) => {
+    // Raw tertiary reaches 1.29:1 and reads as pressed; dark aliases it to the panel at 1.025:1.
+    const selected = (0, outlineRung_1.tintStep)(colors.backgroundColor.tertiary, colors.surfaceRaised, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    return {
+        active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.surfaceRaised),
+        selected,
+        selectedActive: (0, outlineRung_1.tintStep)(selected, selected, outlineRung_1.STACKED_STATE_STEP),
+    };
+};
+exports.listRowBackgrounds = listRowBackgrounds;
+exports.SELECTED_ROW_STEP = 1.28;
+exports.DISTINCT_ROW_STEP = 1.1;
+// NOTE: every rung is a neutral step off the panel, so hover and selected carry no brand hue in either mode.
+const selectRowBackgrounds = (colors) => {
+    const panel = colors.surfaceRaised;
+    const active = (0, outlineRung_1.neutralStep)(panel, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    const selectedStep = Math.max(exports.SELECTED_ROW_STEP, (0, color_1.contrastRatio)(active, panel) * exports.DISTINCT_ROW_STEP);
+    const selected = (0, outlineRung_1.neutralStep)(panel, selectedStep);
+    const selectedActive = (0, outlineRung_1.neutralStep)(selected, outlineRung_1.STACKED_STATE_STEP);
+    return { active, selected, selectedActive, keyboardRing: (0, outlineRung_1.neutralStep)(selectedActive, outlineRung_1.AA_NON_TEXT) };
+};
+exports.selectRowBackgrounds = selectRowBackgrounds;

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

@@ -0,0 +1,3 @@
+export type ScrollShadowStyle = Record<string, unknown>;
+export declare function scrollShadowStyles(surface: string): ScrollShadowStyle;
+export declare function scrollShadowStylesVertical(surface: string): ScrollShadowStyle;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollShadowStyles = scrollShadowStyles;
+exports.scrollShadowStylesVertical = scrollShadowStylesVertical;
+const accentText_1 = require("./accentText");
+const EDGE = "24px";
+const TINT = "rgba(0, 0, 0, 0.08)";
+const TINT_ON_DARK = "rgba(0, 0, 0, 0.32)";
+const VERTICAL_SHADOW = "8px";
+// CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
+function scrollShadowStyles(surface) {
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(to right, ${surface}, ${surface}), linear-gradient(to left, ${surface}, ${surface}), linear-gradient(to right, ${TINT}, transparent), linear-gradient(to left, ${TINT}, transparent)`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${EDGE} 100%, ${EDGE} 100%, 8px 100%, 8px 100%`,
+        backgroundPosition: "0 0, 100% 0, 0 0, 100% 0",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}
+// NOTE: dark panels swallow an 8% black edge, so the vertical hint steps up on a dark surface.
+function scrollShadowStylesVertical(surface) {
+    const tint = (0, accentText_1.isDarkCanvas)(surface) ? TINT_ON_DARK : TINT;
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(${surface}, ${surface}), linear-gradient(${surface}, ${surface}), linear-gradient(${tint}, transparent), linear-gradient(transparent, ${tint})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `100% ${EDGE}, 100% ${EDGE}, 100% ${VERTICAL_SHADOW}, 100% ${VERTICAL_SHADOW}`,
+        backgroundPosition: "0 0, 0 100%, 0 0, 0 100%",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

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,18 +10,34 @@ 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);
     const elevated = (0, outlineRung_1.resolveHoverTint)(background[500], background[500]);
+    // Muted chrome must clear contrast on the bare rail AND the lightest row-hover overlay.
+    const rowPeak = (0, exports.sidebarRowPeak)(elevated);
     return {
         background,
         elevated,
         activeIcon: (0, outlineRung_1.liftToContrast)(lightPrimary[300], surface, outlineRung_1.AA_NON_TEXT),
         activeLabel: (0, outlineRung_1.liftToContrast)(lightPrimary[100], surface, exports.AA_NORMAL_TEXT),
-        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),
+        mutedIcon: (0, outlineRung_1.settleAcross)(background[300], [elevated, rowPeak], outlineRung_1.AA_NON_TEXT),
+        mutedLabel: (0, outlineRung_1.settleAcross)(background[100], [elevated, rowPeak], 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/skeletonShimmer.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../types";
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+export declare const SKELETON_SHIMMER_CONTRAST = 1.35;
+export interface SkeletonShimmer {
+    start: string;
+    end: string;
+}
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+export declare const skeletonShimmer: (palette: PaletteProps) => SkeletonShimmer;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonShimmer = exports.SKELETON_SHIMMER_CONTRAST = void 0;
+const color_1 = require("./color");
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+exports.SKELETON_SHIMMER_CONTRAST = 1.35;
+const settleAway = (seed, base, target) => {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    let near = (0, color_1.hexToHsl)(base).l;
+    let far = (0, color_1.relativeLuminance)(base) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (near + far) / 2;
+        if ((0, color_1.contrastRatio)((0, color_1.withLightness)(seed, mid, s), base) < target)
+            near = mid;
+        else
+            far = mid;
+    }
+    return (0, color_1.withLightness)(seed, far, s);
+};
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+const skeletonShimmer = (palette) => ({
+    start: palette.gray[100],
+    end: settleAway(palette.gray[300], palette.gray[100], exports.SKELETON_SHIMMER_CONTRAST),
+});
+exports.skeletonShimmer = skeletonShimmer;

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

@@ -0,0 +1,3 @@
+export declare const STAR_ON_LIGHT = "#f5a70a";
+export declare const STAR_ON_DARK = "#f6b93b";
+export declare const buildStar: (canvas: string) => string;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStar = exports.STAR_ON_DARK = exports.STAR_ON_LIGHT = void 0;
+const color_1 = require("./color");
+exports.STAR_ON_LIGHT = "#f5a70a";
+exports.STAR_ON_DARK = "#f6b93b";
+const buildStar = (canvas) => (0, color_1.relativeLuminance)(canvas) > 0.18 ? exports.STAR_ON_LIGHT : exports.STAR_ON_DARK;
+exports.buildStar = buildStar;

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,8 @@
+import type { PaletteProps } from "../types";
+export declare const RAISED_OVERLAY = 0.07;
+export type SurfaceRaisedSource = Pick<PaletteProps, "backgroundColor" | "background" | "white">;
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+export declare const filledMarks: (colors: Pick<PaletteProps, "primary" | "semantic">) => string[];
+export declare const buildSurfaceRaised: (source: SurfaceRaisedSource, marks?: readonly string[]) => 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,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.filledMarks = exports.RAISED_OVERLAY = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const planeStep_1 = require("./planeStep");
+const semanticText_1 = require("./semanticText");
+exports.RAISED_OVERLAY = 0.07;
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+const filledMarks = (colors) => [
+    colors.primary[500],
+    ...semanticText_1.SEMANTIC_TONES.map((tone) => colors.semantic[tone][500]),
+];
+exports.filledMarks = filledMarks;
+// Never below the card: the lighter of one white-overlay step off the canvas and a RAISED_LIFT step off the card.
+const buildSurfaceRaised = (source, marks = []) => {
+    const card = source.background[50];
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const stepped = (0, planes_1.liftUnder)(source.white, card, planes_1.RAISED_LIFT, marks);
+    return [overlay, stepped].reduce((top, c) => ((0, color_1.relativeLuminance)(c) > (0, color_1.relativeLuminance)(top) ? c : top), card);
+};
+exports.buildSurfaceRaised = buildSurfaceRaised;
+const withSurfaceRaised = (palette) => ({
+    ...palette,
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette, (0, exports.filledMarks)(palette)),
+});
+exports.withSurfaceRaised = withSurfaceRaised;
+// A divider inside an overlay, at the weight a rule has inside a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)((0, planeStep_1.cardRule)(colors), 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,13 @@ 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.
- */
+const rowStates_1 = require("./rowStates");
+// 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;
@@ -23,7 +22,10 @@ exports.hardestSurface = hardestSurface;
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
+    const accentSurfaces = [...surfaces, ...Object.values((0, rowStates_1.listRowBackgrounds)(palette))];
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
+    const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
+    const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
     const semanticText = semanticText_1.SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], accentText_1.AA_NORMAL_TEXT);
         return acc;
@@ -31,13 +33,18 @@ function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, accentText_1.AA_NORMAL_TEXT),
-        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, surfaces)),
+        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, accentSurfaces)),
         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.
-        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], outlineRung_1.AA_NON_TEXT) },
+        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
+        // app picking `border` gets a heavier rule than one picking `boxborder`.
+        border: { ...palette.border, 200: rule(palette.border[200]) },
     };
 }

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,55 @@
+"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");
+const memo_1 = require("./memo");
+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")}`;
+const softToneMemo = (0, memo_1.memoize)((hue, surface) => {
+    const dark = (0, accentText_1.isDarkCanvas)(surface);
+    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),
+    };
+}, (hue, surface) => `${hue}|${surface}`);
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });
+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);