pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRechartsTheme = buildRechartsTheme;
+const radii_1 = __importDefault(require("../primitives/radii"));
+const chartColorsFromTheme_1 = require("./chartColorsFromTheme");
+const FONT = "inherit";
+const FONT_SIZE = "12px";
+const DASH = "4 4";
+// Reuses chartInk/getCategoricalSeriesColors — no parallel color derivation. No recharts import.
+function buildRechartsTheme(colors) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(colors);
+    return {
+        seriesColors: (0, chartColorsFromTheme_1.getCategoricalSeriesColors)(colors),
+        grid: { stroke: ink.grid, strokeDasharray: DASH },
+        axis: {
+            stroke: ink.grid,
+            tick: { fill: ink.axis, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        tooltip: {
+            contentStyle: {
+                backgroundColor: ink.tooltipBg,
+                border: `1px solid ${ink.grid}`,
+                borderRadius: radii_1.default.md,
+                color: ink.text,
+                fontSize: FONT_SIZE,
+                fontFamily: FONT,
+            },
+            labelStyle: { color: ink.text, fontWeight: 600 },
+            itemStyle: { color: ink.text },
+            cursor: { stroke: ink.grid, strokeDasharray: DASH },
+        },
+        legend: {
+            wrapperStyle: { color: ink.muted, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        referenceLine: { stroke: ink.muted, strokeDasharray: DASH },
+        surface: ink.surface,
+        text: ink.text,
+        muted: ink.muted,
+    };
+}

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

@@ -0,0 +1,6 @@
+import { AA_NON_TEXT } from "./outlineRung";
+import type { PaletteProps } from "../types";
+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;
+export { AA_NON_TEXT };

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AA_NON_TEXT = void 0;
+exports.withPlaceholderRung = withPlaceholderRung;
+exports.withTableHoverRung = withTableHoverRung;
+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");
+// 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])
+        return palette;
+    return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };
+}
+/** The hover row is a SURFACE, so it steps away from the ink rather than the ink moving. */
+function withTableHoverRung(palette) {
+    const resolved = (0, outlineRung_1.liftToContrast)(palette.table.hover[500], palette.text[500], accentText_1.AA_NORMAL_TEXT);
+    if (resolved === palette.table.hover[500])
+        return palette;
+    return {
+        ...palette,
+        table: { hover: { ...palette.table.hover, 500: resolved } },
+    };
+}

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

@@ -0,0 +1,8 @@
+import type { PaletteProps } from "../types";
+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";
+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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCROLLBAR_WIDTH = void 0;
+exports.scrollbarStyles = scrollbarStyles;
+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";
+// 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";
+    const thumb = variant === "hover" ? "transparent" : gray[400];
+    return {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${thumb} ${track}`,
+        "&::-webkit-scrollbar": {
+            width: exports.SCROLLBAR_WIDTH,
+            height: exports.SCROLLBAR_WIDTH,
+        },
+        "&::-webkit-scrollbar-track": {
+            background: track,
+            borderRadius: RADIUS,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: thumb,
+            borderRadius: RADIUS,
+            transition: "background 0.2s ease",
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: gray[500],
+        },
+        "&::-webkit-scrollbar-corner": {
+            background: track,
+        },
+        ...(variant === "hover"
+            ? {
+                "&:hover": { scrollbarColor: `${gray[400]} ${track}` },
+                "&:hover::-webkit-scrollbar-thumb": { background: gray[400] },
+            }
+            : {}),
+    };
+}
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+function globalScrollbarStyles(palette) {
+    const { gray } = palette;
+    return {
+        "::-webkit-scrollbar": { width: exports.SCROLLBAR_WIDTH, height: exports.SCROLLBAR_WIDTH },
+        "::-webkit-scrollbar-track": { background: gray[100] },
+        "::-webkit-scrollbar-thumb": { background: gray[400], borderRadius: RADIUS },
+        "::-webkit-scrollbar-thumb:hover": { background: gray[500] },
+        "::-webkit-scrollbar-corner": { background: gray[100] },
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { SemanticColors, SemanticTextTokens, SemanticTone } from "../types";
+export declare const SEMANTIC_TONES: readonly SemanticTone[];
+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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildOnSemantic = exports.buildSemanticText = exports.SEMANTIC_TONES = void 0;
+const outlineRung_1 = require("./outlineRung");
+const accentText_1 = require("./accentText");
+exports.SEMANTIC_TONES = ["success", "error", "warning", "info"];
+// 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;
+}, {});
+exports.buildSemanticText = buildSemanticText;
+/** Ink ON the fill, not on the canvas — the pair a CSS module needs but cannot compute. */
+const buildOnSemantic = (semantic, white, black) => exports.SEMANTIC_TONES.reduce((acc, tone) => {
+    acc[tone] = (0, accentText_1.onFilled)(semantic[tone][500], white, black);
+    return acc;
+}, {});
+exports.buildOnSemantic = buildOnSemantic;

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

@@ -0,0 +1,17 @@
+import type { BrandPaletteSource, ColorScale, SemanticColors, SidebarTokens } from "../types";
+/** WCAG 1.4.3 — the active label is normal-size text. */
+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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/** WCAG 1.4.3 — the active label is normal-size text. */
+exports.AA_NORMAL_TEXT = 4.5;
+/** Lightest surface an active row reaches: Chakra `whiteAlpha.400` (0.24) on hover. */
+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.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;
+const withSidebarTokens = (source) => (0, exports.buildSidebarTokens)(source.sidebar.background, source.primary, source.semantic);
+exports.withSidebarTokens = withSidebarTokens;

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

@@ -0,0 +1,16 @@
+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;
+};
+export declare function resolveStatusTone(scale: ColorScale, mode: ResolvedColorMode): StatusTone;
+export declare function resolveAvatarFill(hex: string, target?: number): string;
+export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+/** @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

@@ -0,0 +1,47 @@
+"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");
+// 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];
+    const edgeSeed = mode === "dark" ? scale[400] : scale[300];
+    return {
+        bg,
+        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, accentText_1.AA_NORMAL_TEXT),
+        border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, outlineRung_1.AA_NON_TEXT),
+    };
+}
+// 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);
+}
+// Seeds only, not final fills — always pass through resolveAvatarFill so white initials stay legible.
+exports.AVATAR_SEEDS = [
+    "#ef4444",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#10b981",
+    "#06b6d4",
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+];
+/** @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++) {
+        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/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

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+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. */
+export declare const hardestSurface: (ink: string, surfaces: string[]) => string;
+export declare function withSurfaceRungs(palette: PaletteProps): PaletteProps;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hardestSurface = exports.namedSurfaces = exports.PLACEHOLDER_TEXT = void 0;
+exports.withSurfaceRungs = withSurfaceRungs;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const accentText_1 = require("./accentText");
+const semanticText_1 = require("./semanticText");
+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;
+/** The surface an ink is closest to — clearing it clears every other one. */
+const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => (0, color_1.contrastRatio)(ink, s) < (0, color_1.contrastRatio)(ink, worst) ? s : worst);
+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;
+    }, {});
+    return {
+        ...palette,
+        textMuted: lift(palette.textMuted, accentText_1.AA_NORMAL_TEXT),
+        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) },
+        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;