pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.2

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

@@ -5,7 +5,6 @@ exports.liftToContrast = liftToContrast;
 exports.withOutlineRung = withOutlineRung;
 exports.resolveHoverTint = resolveHoverTint;
 const color_1 = require("./color");
-const accentText_1 = require("./accentText");
 /**
  * The floor a hover/active state's step off its own resting surface must clear to be seen at
  * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
@@ -15,23 +14,27 @@ exports.MIN_PERCEPTIBLE_STEP = 1.15;
 /** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 exports.AA_NON_TEXT = 3;
 /**
- * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
- * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
- * stops at the FIRST passing step so nothing overshoots to black or white.
+ * 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, mode, target = exports.AA_NON_TEXT) {
+function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
         return hex;
-    const { s } = (0, color_1.hexToHsl)(hex);
-    const step = mode === "dark" ? 1 : -1;
-    let { l } = (0, color_1.hexToHsl)(hex);
-    while (l > 0 && l < 100) {
-        l += step;
-        const next = (0, color_1.withLightness)(hex, l, s);
-        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
-            return next;
+    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;
+        }
     }
-    return (0, color_1.withLightness)(hex, mode === "dark" ? 100 : 0, s);
+    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
@@ -42,7 +45,7 @@ function liftToContrast(hex, backdrop, mode, target = exports.AA_NON_TEXT) {
  * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
  * and outside 1.4.11.
  */
-function withOutlineRung(palette, mode) {
+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.
@@ -50,7 +53,7 @@ function withOutlineRung(palette, mode) {
         (0, color_1.contrastRatio)(current, palette.background[50])
         ? palette.backgroundColor.main
         : palette.background[50];
-    const resolved = liftToContrast(current, backdrop, mode);
+    const resolved = liftToContrast(current, backdrop);
     if (resolved === current)
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
@@ -64,6 +67,5 @@ function withOutlineRung(palette, mode) {
  * its OWN list background, not necessarily the page canvas.
  */
 function resolveHoverTint(seed, restSurface) {
-    const mode = (0, accentText_1.isDarkCanvas)(restSurface) ? "dark" : "light";
-    return liftToContrast(seed, restSurface, mode, exports.MIN_PERCEPTIBLE_STEP);
+    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.js

@@ -22,8 +22,8 @@ function resolveStatusTone(scale, mode) {
     const edgeSeed = mode === "dark" ? scale[400] : scale[300];
     return {
         bg,
-        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, mode, accentText_1.AA_NORMAL_TEXT),
-        border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, mode, outlineRung_1.AA_NON_TEXT),
+        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, accentText_1.AA_NORMAL_TEXT),
+        border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, outlineRung_1.AA_NON_TEXT),
     };
 }
 /**
@@ -32,8 +32,7 @@ function resolveStatusTone(scale, mode) {
  * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
  */
 function resolveAvatarFill(hex, target = accentText_1.AA_NORMAL_TEXT) {
-    // "light" walks downward in lightness — i.e. darken until white ink clears the bar.
-    return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", "light", target);
+    return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", target);
 }
 /**
  * Hue set for generated avatars. Values are seeds, not final fills — always pass them through

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/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,12 +113,28 @@ 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;
+    };
 };
+/** Utility scales carrying no brand identity. The only tokens a brand may inherit. */
+export type NeutralPaletteKey = "transparent" | "black" | "white" | "semantic" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+export type NeutralPaletteTokens = Pick<BrandPaletteSource, NeutralPaletteKey>;
+/** Everything a brand must state itself — never by spreading another brand. */
+export type BrandIdentityTokens = Omit<BrandPaletteSource, NeutralPaletteKey>;
 /** Brand identities shipped by the library. */
 export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront" | "zinc";
 /** User-selectable color mode. `system` follows the OS setting. */

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;

package/dist/Utils/table.d.ts

@@ -18,13 +18,7 @@ export type TablePaletteColor = {
 };
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 export declare function pickTableColor(value: string | number, palette: TablePaletteColor[], override?: string, theme?: CustomThemeProps): TablePaletteColor;
 export type TableGroup = {
     value: string | number;

package/dist/Utils/table.js

@@ -45,6 +45,7 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../Theme/tokens/builders/statusTone");
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
 const COLLATOR = new Intl.Collator(undefined, {
@@ -98,33 +99,31 @@ function SortMultiColumnData(data, sortConfig) {
     });
 }
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
-const FALLBACK_SOLID = "#8B3FC8";
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
-    const white = c.white || "#FFFFFF";
-    const black = c.black || "#000000";
-    const bases = [
-        (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
-        (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
-        (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.info) === null || _f === void 0 ? void 0 : _f[500],
-        (_h = (_g = c.semantic) === null || _g === void 0 ? void 0 : _g.warning) === null || _h === void 0 ? void 0 : _h[500],
-        (_j = c.teal) === null || _j === void 0 ? void 0 : _j[500],
-        (_k = c.blue) === null || _k === void 0 ? void 0 : _k[500],
-        (_l = c.pink) === null || _l === void 0 ? void 0 : _l[500],
-        (_o = (_m = c.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500],
-        (_p = c.orange) === null || _p === void 0 ? void 0 : _p[500],
-        (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
+    const c = theme.colors;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
     ];
-    const list = bases.filter(Boolean);
-    const fallback = [FALLBACK_SOLID];
-    return (list.length ? list : fallback).map((solid) => ({
-        solid,
-        soft: withAlpha(solid, "22"),
-        text: solid,
-        onSolid: (0, accentText_1.onFilled)(solid, white, black),
-    }));
+    return scales.map((scale) => {
+        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        return {
+            solid: scale[500],
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+        };
+    });
 }
 const hashKey = (value) => {
     const s = String(value);
@@ -133,22 +132,15 @@ const hashKey = (value) => {
         h = (h * 31 + s.charCodeAt(i)) >>> 0;
     return h;
 };
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
-    var _a, _b;
-    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
-    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
         return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
     }
     if (!palette.length) {
-        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: (0, accentText_1.onFilled)(FALLBACK_SOLID, white, black) };
+        throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }

package/dist/esm/Components/Accordion/Accordion.js

@@ -3,31 +3,29 @@ import { useMemo } from "react";
 import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { getAccordionHoverColors } from "./accordionColors.js";
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const theme = useCustomTheme();
-    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const isDark = isDarkCanvas((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS);
-    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
-    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
-    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
-    const { expandedBg, softHover } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    const { colors } = useCustomTheme();
+    const isDark = isDarkCanvas(colors.backgroundColor.main);
+    const border = colors.boxborder[300];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c;
                     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
-                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outline: `0.125rem solid ${colors.primary[300]}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
-                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
-                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -9,22 +9,19 @@ import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
  */
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (isDark) {
         // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
         // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
         // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
-            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
-            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+            expandedBg: colors.gray[200],
+            softHover: colors.gray[200],
         };
     }
-    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
-    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
-        ? compositeOver(colors.primary.opacity[8], rest)
-        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
+    const rest = colors.background[50];
+    const expandedTint = compositeOver(colors.primary.opacity[8], rest);
     return {
-        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
-        softHover: liftToContrast((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
+        expandedBg: liftToContrast(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    var _a;
     const { colors } = useCustomTheme();
-    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
 };
 export default AlertDialog;

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
     const isSpark = variant === "sparkline";

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
 const getValidLegendPosition = (position) => {
@@ -14,8 +14,7 @@ const getValidLegendPosition = (position) => {
 };
 const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
     var _a;
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);

package/dist/esm/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.js";
 const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const options = useMemo(() => ({