pixelize-design-library 2.4.1 → 2.4.2-beta.1

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

@@ -1,26 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.labelOnSeries = exports.chartMode = exports.CATEGORICAL_SERIES = void 0;
+exports.getCategoricalSeriesColors = getCategoricalSeriesColors;
 exports.getDefaultSeriesColors = getDefaultSeriesColors;
+exports.chartInk = chartInk;
 exports.mergeChartTitleStyle = mergeChartTitleStyle;
 exports.chartAxisLabelColor = chartAxisLabelColor;
-/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+const accentText_1 = require("./accentText");
+/**
+ * Categorical series palette. Generated in OKLCH on one fixed hue sequence per mode, so a
+ * theme switch never repaints a series. Verified with the six-check validator: lightness
+ * band, chroma floor, CVD separation, normal-vision floor and contrast all pass on both
+ * surfaces. Worst adjacent protan/deutan separation is 10.9 (light) / 11.6 (dark) OKLab
+ * dE, against a target of 8 — the previous four-color default scored 4.8 and was
+ * unreadable for red-green color blindness. Re-run the validator before editing a value.
+ */
+exports.CATEGORICAL_SERIES = {
+    light: ["#009068", "#3177dc", "#5a8b00", "#8b5dce", "#9b7300", "#af4da9", "#cb4a2a", "#009d82"],
+    dark: ["#00976d", "#377ee3", "#5f9200", "#9163d5", "#a27900", "#b654b0", "#d25030", "#00aa8e"],
+};
+const chartMode = (colors) => (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+exports.chartMode = chartMode;
+function getCategoricalSeriesColors(colors) {
+    return [...exports.CATEGORICAL_SERIES[(0, exports.chartMode)(colors)]];
+}
 function getDefaultSeriesColors(colors) {
-    return [
-        colors.primary[500],
-        colors.semantic.error[500],
-        colors.semantic.success[500],
-        colors.orange[500],
-    ];
+    return getCategoricalSeriesColors(colors);
+}
+/** Ink, grid and surface tokens every chart type shares. */
+function chartInk(colors) {
+    const surface = colors.backgroundColor.main;
+    return {
+        surface,
+        text: colors.text[900],
+        muted: colors.text[500],
+        grid: colors.border[500],
+        axis: colors.text[500],
+        tooltipBg: colors.backgroundColor.secondary,
+    };
 }
+/** Ink for a label drawn on top of a filled mark. Always clears AA. */
+const labelOnSeries = (fill, colors) => (0, accentText_1.onFilled)(fill, colors.white, colors.black);
+exports.labelOnSeries = labelOnSeries;
 function mergeChartTitleStyle(colors, titleStyle) {
     return {
-        fontSize: "16px",
+        fontSize: "14px",
         fontWeight: 600,
-        fontFamily: "Arial",
-        color: colors.primary[500],
+        fontFamily: "inherit",
+        color: colors.text[900],
         ...titleStyle,
     };
 }
 function chartAxisLabelColor(colors) {
-    return colors.gray[700];
+    return colors.text[500];
 }

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

@@ -47,4 +47,3 @@ export declare function mix(a: string, b: string, weight: number): string;
 export declare function relativeLuminance(hex: string): number;
 /** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
 export declare function contrastRatio(a: string, b: string): number;
-//# sourceMappingURL=color.d.ts.map

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

@@ -3,4 +3,3 @@ export * from "./buildBrandTokens";
 export * from "./buildDarkPalette";
 export * from "./chartColorsFromTheme";
 export * from "./color";
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+import type { ColorScale } from "../types";
+/** WCAG 1.4.3 — muted is still body text. */
+export declare const AA_NORMAL_TEXT = 4.5;
+/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
+export declare const buildMutedText: (text: ColorScale, canvas: string) => string;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMutedText = exports.AA_NORMAL_TEXT = void 0;
+const outlineRung_1 = require("./outlineRung");
+/** WCAG 1.4.3 — muted is still body text. */
+exports.AA_NORMAL_TEXT = 4.5;
+/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
+const buildMutedText = (text, canvas) => (0, outlineRung_1.liftToContrast)(text[400], canvas, exports.AA_NORMAL_TEXT);
+exports.buildMutedText = buildMutedText;

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

@@ -0,0 +1,35 @@
+import type { PaletteProps } from "../types";
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+export declare const MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+export declare const AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
+ * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
+ * with the backdrop in every call site, and a redundant argument is one that can be wrong.
+ * Tries the far side first, falls back to the near side, and stops at the first passing step.
+ */
+export declare function liftToContrast(hex: string, backdrop: string, target?: number): string;
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+export declare function withOutlineRung(palette: PaletteProps): PaletteProps;
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+export declare function resolveHoverTint(seed: string, restSurface: string): string;

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

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

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

@@ -0,0 +1,7 @@
+import { AA_NON_TEXT } from "./outlineRung";
+import type { PaletteProps } from "../types";
+/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+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,25 @@
+"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");
+/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+function withPlaceholderRung(palette) {
+    const resolved = (0, outlineRung_1.liftToContrast)(palette.placeholder[500], palette.background[50], accentText_1.AA_NORMAL_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/semanticText.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,22 @@
+"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"];
+/**
+ * `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.
+ */
+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,9 @@
+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;
+/** 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,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSidebarTokens = exports.buildSidebarTokens = 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;
+/** 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]);
+    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),
+        semanticText: (0, semanticText_1.buildSemanticText)(semantic, elevated),
+    };
+};
+exports.buildSidebarTokens = buildSidebarTokens;
+const withSidebarTokens = (source) => (0, exports.buildSidebarTokens)(source.sidebar.background, source.primary, source.semantic);
+exports.withSidebarTokens = withSidebarTokens;

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

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

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.meetsBodyText = exports.AVATAR_SEEDS = void 0;
+exports.resolveStatusTone = resolveStatusTone;
+exports.resolveAvatarFill = resolveAvatarFill;
+exports.avatarFillFor = avatarFillFor;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+const outlineRung_1 = require("./outlineRung");
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+function resolveStatusTone(scale, mode) {
+    const bg = scale[100];
+    const inkSeed = mode === "dark" ? scale[300] : scale[700];
+    const edgeSeed = mode === "dark" ? scale[400] : scale[300];
+    return {
+        bg,
+        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, accentText_1.AA_NORMAL_TEXT),
+        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.
+ */
+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.
+ */
+exports.AVATAR_SEEDS = [
+    "#ef4444",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#10b981",
+    "#06b6d4",
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+function avatarFillFor(seedText) {
+    let hash = 0;
+    for (let i = 0; i < seedText.length; i++) {
+        hash = (hash * 31 + seedText.charCodeAt(i)) >>> 0;
+    }
+    return resolveAvatarFill(exports.AVATAR_SEEDS[hash % exports.AVATAR_SEEDS.length]);
+}
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+const meetsBodyText = (fg, bg) => (0, color_1.contrastRatio)(fg, bg) >= accentText_1.AA_NORMAL_TEXT;
+exports.meetsBodyText = meetsBodyText;

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

@@ -0,0 +1,5 @@
+import type { PaletteProps } from "../types";
+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,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hardestSurface = exports.namedSurfaces = 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 namedSurfaces = (palette) => [
+    ...Object.values(palette.backgroundColor),
+    palette.background[50],
+    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 lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
+    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, surfaces)),
+        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: {
+            ...palette.placeholder,
+            500: lift(palette.placeholder[500], accentText_1.AA_NORMAL_TEXT),
+        },
+        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], outlineRung_1.AA_NON_TEXT) },
+    };
+}

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

@@ -12,4 +12,3 @@ export * from "./types";
 export * from "./primitives";
 export * from "./brands";
 export * from "./builders";
-//# sourceMappingURL=index.d.ts.map

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

@@ -6,4 +6,3 @@ declare const breakpoints: {
     "2xl": string;
 };
 export default breakpoints;
-//# sourceMappingURL=breakpoints.d.ts.map

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

@@ -7,4 +7,3 @@ export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";
 export { default as letterSpacings } from "./letterSpacings";
 export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
-//# sourceMappingURL=index.d.ts.map

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

@@ -7,4 +7,3 @@ declare const letterSpacings: {
     widest: string;
 };
 export default letterSpacings;
-//# sourceMappingURL=letterSpacings.d.ts.map

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

@@ -16,4 +16,3 @@ declare const lineHeights: {
     "10": string;
 };
 export default lineHeights;
-//# sourceMappingURL=lineHeights.d.ts.map

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

@@ -10,4 +10,3 @@ declare const radii: {
     full: string;
 };
 export default radii;
-//# sourceMappingURL=radii.d.ts.map

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

@@ -13,4 +13,3 @@ declare const shadows: {
     darkLg: string;
 };
 export default shadows;
-//# sourceMappingURL=shadows.d.ts.map

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

@@ -60,4 +60,3 @@ declare const sizes: {
     96: string;
 };
 export default sizes;
-//# sourceMappingURL=sizes.d.ts.map

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

@@ -31,4 +31,3 @@ declare const space: {
     96: string;
 };
 export default space;
-//# sourceMappingURL=space.d.ts.map

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

@@ -70,4 +70,3 @@ declare const typography: {
     };
 };
 export default typography;
-//# sourceMappingURL=typography.d.ts.map

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

@@ -14,4 +14,3 @@ declare const zIndices: {
     tooltip: number;
 };
 export default zIndices;
-//# sourceMappingURL=zIndices.d.ts.map

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

@@ -30,12 +30,10 @@ export type OpacityScale = {
 export type BrandScale = ColorScale & {
     opacity: OpacityScale;
 };
-export type SemanticColors = {
-    success: ColorScale;
-    error: ColorScale;
-    warning: ColorScale;
-    info: ColorScale;
-};
+export type SemanticTone = "success" | "error" | "warning" | "info";
+export type SemanticColors = Record<SemanticTone, ColorScale>;
+/** Each tone as TEXT on the canvas, resolved to 4.5:1. The `[500]` rung is a fill, never ink. */
+export type SemanticTextTokens = Record<SemanticTone, string>;
 /** Named (non-numeric) surface keys. Elevation order inverts between light and dark. */
 export type NamedSurfaces = {
     main: string;
@@ -51,6 +49,22 @@ export type NamedSurfaces = {
     base: string;
     tableHeader: string;
 };
+/** The permanently-dark rail. Accents are derived from the light primary, never hand-written. */
+export type SidebarTokens = {
+    background: ColorScale;
+    /** Icon on the active surface, resolved to 3:1. */
+    activeIcon: string;
+    /** Label on the active surface, resolved to 4.5:1. */
+    activeLabel: string;
+    /** Flyout/menu surface raised off the rail. `background[200]` is a mid-grey on 6 of 9 brands. */
+    elevated: string;
+    /** Secondary icon on the rail, resolved to 3:1. Replaces an opacity guess at the call site. */
+    mutedIcon: string;
+    /** Secondary label on the rail, resolved to 4.5:1. `textMuted` is canvas-relative, not rail. */
+    mutedLabel: string;
+    /** Status ink resolved against the RAIL. `semanticText` is canvas-relative, not rail. */
+    semanticText: SemanticTextTokens;
+};
 export type BoxShadowTokens = {
     primary: string;
     error: string;
@@ -88,9 +102,7 @@ export type PaletteProps = {
     header: ColorScale;
     placeholder: ColorScale;
     boxShadow: BoxShadowTokens;
-    sidebar: {
-        background: ColorScale;
-    };
+    sidebar: SidebarTokens;
     boxborder: ColorScale;
     border: ColorScale;
     table: {
@@ -101,11 +113,22 @@ export type PaletteProps = {
      * Accent color for accent-COLORED TEXT on the canvas. Distinct from `primary[500]`, which
      * must stay dark enough to carry a white label on a filled button and therefore cannot also
      * be light enough to read as text on a dark canvas. Derived per brand (see `pickAccentText`).
-     *
-     * Optional so that a consumer who hand-builds a palette object against this type keeps
-     * compiling; every shipped brand palette always populates it.
      */
-    accentText?: string;
+    accentText: string;
+    semanticText: SemanticTextTokens;
+    /** Secondary text on the canvas, resolved to 4.5:1 in both modes. */
+    textMuted: string;
+    /** Ink for a `primary[500]`-FILLED surface — never an ink on the canvas. */
+    onPrimary: string;
+    /** Ink for a `semantic[tone][500]`-FILLED surface — never an ink on the canvas. */
+    onSemantic: SemanticTextTokens;
+};
+/** What a brand writes by hand; every token required, so a gap is a compile error. */
+/** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic"> & {
+    sidebar: {
+        background: ColorScale;
+    };
 };
 /** Brand identities shipped by the library. */
 export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront" | "zinc";
@@ -113,4 +136,3 @@ export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate"
 export type ColorMode = "light" | "dark" | "system";
 /** Color mode after `system` has been resolved against the OS. */
 export type ResolvedColorMode = "light" | "dark";
-//# sourceMappingURL=types.d.ts.map

package/dist/Theme/useCustomTheme.d.ts

@@ -1,3 +1,2 @@
 import { CustomThemeProps } from "./themeProps";
 export declare const useCustomTheme: () => CustomThemeProps;
-//# sourceMappingURL=useCustomTheme.d.ts.map

package/dist/Theme/useCustomTheme.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCustomTheme = void 0;
 const react_1 = require("@chakra-ui/react");
+const assertPalette_1 = require("./assertPalette");
 const useCustomTheme = () => {
-    return (0, react_1.useTheme)();
+    const theme = (0, react_1.useTheme)();
+    (0, assertPalette_1.assertPixelizePalette)(theme);
+    return theme;
 };
 exports.useCustomTheme = useCustomTheme;