pixelize-design-library 2.4.1-beta.10 → 2.4.1-beta.11

package/dist/Theme/chakra/common.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/common.web.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"common.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/common.web.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Theme/chakra/common.web.js

@@ -15,7 +15,10 @@ const common = {
     radii: primitives_1.radii,
     zIndices: primitives_1.zIndices,
     config: {
-        cssVarPrefix: "ck",
+        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
+        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
+        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        cssVarPrefix: "chakra",
     },
 };
 exports.default = common;

package/dist/Theme/provider/PixelizeThemeProvider.d.ts

@@ -10,10 +10,19 @@ export type ThemeModeContextValue = {
 };
 export type PixelizeThemeProviderProps = {
     children: React.ReactNode;
-    /** Initial brand. A persisted brand wins over this. */
+    /** Initial brand. A persisted brand wins over this. Re-synced if the prop changes after mount. */
     brand?: ThemeName;
-    /** Initial color mode. A persisted mode wins over this. */
+    /** Brand counterpart of `onModeChange`, with the same user-intent-only contract. */
+    onBrandChange?: (brand: ThemeName) => void;
+    /** Initial color mode. A persisted mode wins over this. Re-synced if the prop changes after mount. */
     defaultMode?: ColorMode;
+    /**
+     * Fired only when the mode changes through `setMode`/`toggle` — i.e. user intent. It is NOT
+     * fired when a changed `defaultMode` prop is synced in, which is what makes it safe to persist
+     * from: an app that instead mirrors `mode` in an effect re-persists its own echo, and if that
+     * store feeds `defaultMode` back the two ends flip each other forever.
+     */
+    onModeChange?: (mode: ColorMode) => void;
     storageKey?: string;
     disablePersistence?: boolean;
     /**
@@ -42,5 +51,5 @@ export declare const ThemeModeContext: React.Context<ThemeModeContextValue | und
  * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
  * unaffected: they are light-only, where that argument was always the one returned anyway.
  */
-export declare const PixelizeThemeProvider: ({ children, brand: brandProp, defaultMode, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PixelizeThemeProvider.d.ts.map

package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8FAOnC,0BAA0B,4CAwJ5B,CAAC"}
+{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kGAAkG;IAClG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,sGAAsG;IACtG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,2HASnC,0BAA0B,4CA8K5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -48,7 +48,7 @@ exports.ThemeModeContext = (0, react_1.createContext)(undefined);
  * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
  * unaffected: they are light-only, where that argument was always the one returned anyway.
  */
-const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
     const [mode, setModeState] = (0, react_1.useState)(defaultMode);
     const [brand, setBrandState] = (0, react_1.useState)(brandProp);
     // Deterministic on the server and on the first client render — the real OS value lands in
@@ -70,19 +70,27 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
     // `brandProp` only seeds initial state above, so a consumer that re-renders with a new
     // `brand` prop after mount (e.g. persisting the pick through its own store, like tickets'
     // Settings page dispatching Redux instead of calling `setBrand`) would otherwise never see
-    // it applied — the same gap `colorMode` has, which callers work around with an effect
-    // mirroring `mode`. Sync it here instead so every consumer gets it for free.
+    // it applied. Sync it here instead so every consumer gets it for free.
     const isFirstBrandPropRun = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
         if (isFirstBrandPropRun.current) {
             isFirstBrandPropRun.current = false;
             return;
         }
-        setBrandState(brandProp);
         // Only re-sync when the prop itself changes — not on every local `setBrand` call (that
         // would fight the user's own in-session brand picking, e.g. via ThemeSwitcher).
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        setBrandState(brandProp);
     }, [brandProp]);
+    // Same prop-sync for the mode, so an app owning it in its own store no longer needs the
+    // `mode` -> store mirror effect that deadlocks against this one.
+    const isFirstModePropRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (isFirstModePropRun.current) {
+            isFirstModePropRun.current = false;
+            return;
+        }
+        setModeState(defaultMode);
+    }, [defaultMode]);
     // Skipping the mount run keeps the defaults from being written over a stored value before
     // the rehydrate effect above has applied it.
     const isFirstPersistRun = (0, react_1.useRef)(true);
@@ -107,11 +115,25 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
     (0, react_1.useEffect)(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
-    const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
-    const setBrand = (0, react_1.useCallback)((next) => setBrandState(next), []);
+    // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
+    // invalidate the context value on every render of the consuming app.
+    const onModeChangeRef = (0, react_1.useRef)(onModeChange);
+    onModeChangeRef.current = onModeChange;
+    const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
+    onBrandChangeRef.current = onBrandChange;
+    const setMode = (0, react_1.useCallback)((next) => {
+        var _a;
+        setModeState(next);
+        (_a = onModeChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onModeChangeRef, next);
+    }, []);
+    const setBrand = (0, react_1.useCallback)((next) => {
+        var _a;
+        setBrandState(next);
+        (_a = onBrandChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBrandChangeRef, next);
+    }, []);
     // From "system", flip to the opposite of what the OS currently gives, so a click always
     // visibly changes the UI.
-    const toggle = (0, react_1.useCallback)(() => setModeState(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode]);
+    const toggle = (0, react_1.useCallback)(() => setMode(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode, setMode]);
     const value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
     const resolvedTheme = (0, react_1.useMemo)(() => {
         const base = index_1.brandThemes[brand][resolvedMode];

package/dist/Theme/tokens/brands/lavender/palette.light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/lavender/palette.light.ts"],"names":[],"mappings":"AA4SA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/lavender/palette.light.ts"],"names":[],"mappings":"AAmTA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -150,7 +150,8 @@ const backgroundColor = {
     secondary: "#f2edf8",
     tertiary: "#ebe3f4",
     quaternary: "#e2d8ef",
-    light: "#fdfcfe",
+    // A card must read as lifted off the tinted canvas; the old #fdfcfe was 2% away from it.
+    light: "#ffffff",
     medium: "#e8e0f2",
     accent: "#e0d5ed",
     subtle: "#f5f1fa",
@@ -227,25 +228,31 @@ const sidebar = {
     },
 };
 const boxborder = {
-    50: "#fefefe",
-    100: "#f5f3f9",
-    200: "#ece8f3",
-    300: "#e3deed",
-    400: "#dad4e8",
-    500: "#d1c9e2",
-    600: "#bdb5cf",
+    50: "#f5f3f9",
+    100: "#ece8f3",
+    200: "#dad4e8",
+    300: "#d1c9e2",
+    400: "#c7bcda",
+    500: "#bcb0d1",
+    600: "#a79ac3",
     700: "#918ba1",
     800: "#6d6879",
     900: "#52505b",
 };
+/**
+ * The low rungs sat two steps too pale to draw anything: `200` — the default hairline for
+ * cards, dividers and inputs — was L94 against a L98 canvas, so a card had no visible edge.
+ * It now lands at L88, contrast 1.22 against a white card, matching Chakra's gray.200 hairline.
+ * Rungs 700+ are unchanged; they were never the problem.
+ */
 const border = {
-    50: "#fefefe",
-    100: "#f6f4f9",
-    200: "#ede9f4",
-    300: "#e5dfef",
-    400: "#dcd5e9",
-    500: "#d3cbe3",
-    600: "#beb7d0",
+    50: "#f6f4f9",
+    100: "#ede9f4",
+    200: "#dcd5e9",
+    300: "#d3cbe3",
+    400: "#c9bedb",
+    500: "#beb2d2",
+    600: "#a99cc4",
     700: "#938da3",
     800: "#6f6a7c",
     900: "#54505e",

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAuLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAwLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -93,15 +93,16 @@ const header = {
     900: "#ffffff",
 };
 // muted-foreground = gray[500] = #a1a1aa (5.81:1 on the #27272a muted surface); it also serves
-// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung:
-// #6b6b75 (matching border[500]) measured 2.95:1 on the LIGHTEST named surface, just under the 3:1
-// non-text bar it is used at, so it is one step lighter than border[500] here.
+// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung,
+// and is the one value here NOT ported verbatim: it is pinned to whatever clears the 3:1 non-text
+// bar on the LIGHTEST named surface, which is derived rather than ported. shadcn's own #71717a
+// measures 2.81 there, so this sits two steps lighter (3.19).
 const gray = {
     50: "#18181b",
     100: "#27272a",
     200: "#3f3f46",
     300: "#52525b",
-    400: "#71717a",
+    400: "#7a7a83",
     500: "#a1a1aa",
     600: "#b4b4bb",
     700: "#d4d4d8",

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildDarkPalette.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildDarkPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2CrE,uEAAuE;AACvE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAOH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MAWvE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,KAAG,UAM5D,CAAC;AAqIF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAsElE;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"buildDarkPalette.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildDarkPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2CrE,uEAAuE;AACvE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAOH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MAWvE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,KAAG,UAM5D,CAAC;AAkJF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAwElE;AAED,eAAe,gBAAgB,CAAC"}

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

@@ -169,8 +169,11 @@ const TEXT_TARGETS = {
 const PLACEHOLDER_TARGETS = {
     50: 25, 100: 30, 200: 35, 300: 42, 400: 48, 500: 54, 600: 60, 700: 66, 800: 72, 900: 80,
 };
+// Rung 200 is the default hairline. At L18 it sat 5 points off a card at L13 — below the
+// perceptible step, so dark cards read as edgeless. L22 draws the same 1.2x edge the light
+// ramp does, which is what makes a card look like a card in either mode.
 const BORDER_TARGETS = {
-    50: 12, 100: 15, 200: 18, 300: 21, 400: 24, 500: 27, 600: 33, 700: 42, 800: 52, 900: 62,
+    50: 14, 100: 18, 200: 22, 300: 24, 400: 26, 500: 27, 600: 33, 700: 42, 800: 52, 900: 62,
 };
 const DISABLED_TARGETS = {
     50: 14, 100: 18, 200: 22, 300: 26, 400: 30, 500: 34, 600: 42, 700: 52, 800: 62, 900: 72,
@@ -215,12 +218,22 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-const SURFACE_SAT = 14;
+/**
+ * Surfaces are hue-NEUTRAL in dark: every brand shares one canvas, so switching theme recolors the
+ * accents and nothing else. Tinting them instead (this was 14) made a full-screen wash — Meadow's
+ * whole app read green — which reads as a different product per brand rather than a different
+ * accent. Light mode keeps its tinted canvas; there the tint is a hint on white, not the whole
+ * screen. Brand identity in dark lives in `primary`/semantic/text, which stay hued.
+ */
+const SURFACE_SAT = 0;
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
 const DISABLED_SAT = 8;
-const GRAY_SAT = 6;
+// Neutral for the same reason as SURFACE_SAT — gray's low rungs ARE surfaces, and a tinted ramp
+// on a neutral canvas reads as a mismatch. It also buys back the contrast the neutral canvas
+// cost: `gray[400]` on `muted` was 2.99 on lavender/zinc at sat 6, and is 3.16 at 0.
+const GRAY_SAT = 0;
 function buildDarkPalette(light) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
@@ -265,7 +278,9 @@ function buildDarkPalette(light) {
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
         border: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
         boxborder: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
-        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, BORDER_SAT) },
+        // Neutral: a row hover is a surface fill, and across a full table its tint is exactly the
+        // brand wash the canvas was changed to avoid.
+        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, SURFACE_SAT) },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         // Derived from the LIFTED accent against the dark canvas: the lift stops at the white-label
         // floor (~4.55), which leaves primary[500] short of AA as text, so text needs its own rung.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.1-beta.10",
+  "version": "2.4.1-beta.11",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/App.d.ts

@@ -1,4 +0,0 @@
-import "./global.css";
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;
-//# sourceMappingURL=App.d.ts.map

package/dist/App.js

@@ -1,95 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
-const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
-const NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
-const useSidebarPrefs_1 = require("./Hooks/useSidebarPrefs");
-const provider_1 = require("./Theme/provider");
-const useCustomTheme_1 = require("./Theme/useCustomTheme");
-const Layout_1 = __importDefault(require("./Layout"));
-require("./global.css");
-// --- Static demo data (module scope so it isn't re-created each render) ------
-const menu = [
-    {
-        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
-        secondaryItems: [
-            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
-            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-    {
-        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
-        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
-    },
-    {
-        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
-            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
-        ],
-    },
-    {
-        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 33, title: "SubMenu1", url: "submenu1" },
-            { id: 34, title: "SubMenu2", url: "submenu2" },
-        ],
-    },
-    {
-        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
-        subMenu: [
-            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
-            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-];
-const navmenus = [
-    { title: "Account Settings", url: "myaccount", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cuboid, {}) },
-    { title: "Reset password", url: "resetpassword" },
-    { title: "Billing", url: "billing" },
-    { title: "Notifications", url: "notifications" },
-];
-function useWindowSize() {
-    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
-    (0, react_1.useEffect)(() => {
-        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
-}
-function App() {
-    const { height } = useWindowSize();
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Persisted layout choices — restored to exactly the same state on reload/new
-    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
-    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
-    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
-    // so this app does not re-implement the navbar-mode/drawer behavior.
-    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = (0, useSidebarPrefs_1.useSidebarPrefs)();
-    const [activeMenu, setActiveMenu] = (0, react_1.useState)(2);
-    const [activeSecondaryItem, setActiveSecondaryItem] = (0, react_1.useState)(null);
-    const handleMenuClick = (menu) => {
-        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
-        setActiveSecondaryItem(null);
-    };
-    const handleSecondaryNavClick = (item) => {
-        var _a, _b;
-        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
-    };
-    const handleNavOnClick = () => { };
-    const handleLogout = () => { };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
-                                        text: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Dashboard" }),
-                                        onIconClick: () => { },
-                                    }, moreIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, {}) }, "navbar"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "icon" })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: (0, jsx_runtime_1.jsx)(Layout_1.default, {}) })] })] })] }) }));
-}
-exports.default = App;

package/dist/Layout.d.ts

@@ -1,3 +0,0 @@
-declare const Layout: () => import("react/jsx-runtime").JSX.Element;
-export default Layout;
-//# sourceMappingURL=Layout.d.ts.map