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

package/dist/Theme/chakra/componentStyles.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentStyles = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const react_1 = require("@chakra-ui/react");
 const Button_styles_1 = require("../../Components/Button/Button.styles");
 const Checkbox_styles_1 = require("../../Components/Checkbox/Checkbox.styles");
 const TextInput_styles_1 = require("../../Components/Input/TextInput.styles");
@@ -10,6 +13,15 @@ const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextA
 const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
 const accentText_1 = require("../tokens/builders/accentText");
 const color_1 = require("../tokens/builders/color");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
+const Drawer_styles_1 = require("./Drawer.styles");
+const Menu_styles_1 = require("./Menu.styles");
+const Modal_styles_1 = require("./Modal.styles");
+const Popover_styles_1 = require("./Popover.styles");
+const Slider_styles_1 = require("./Slider.styles");
+const Switch_styles_1 = require("./Switch.styles");
+const Tabs_styles_1 = require("./Tabs.styles");
+const Avatar_styles_1 = require("./Avatar.styles");
 // `colorScheme` accepts any Chakra scale, including built-ins we never themed (blackAlpha,
 // whiteAlpha) whose rungs are translucent `rgba(...)` strings, not opaque hex — our contrast
 // math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
@@ -20,14 +32,12 @@ const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a
 const Badge = {
     variants: {
         solid: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = swatch === null || swatch === void 0 ? void 0 : swatch[500];
-            const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#fff";
-            const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000";
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const bg = swatch[500];
             return {
                 bg,
-                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, white, black) : swatch === null || swatch === void 0 ? void 0 : swatch[800],
+                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, palette.white, palette.black) : swatch[800],
             };
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
@@ -35,11 +45,11 @@ const Badge = {
         // it always takes the light-mode branch. Applied to our mode-reversed dark scales, that
         // branch's fixed rung pair (100/800) measures 4.06 in dark mode, just under AA.
         subtle: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = (_e = swatch === null || swatch === void 0 ? void 0 : swatch[100]) !== null && _e !== void 0 ? _e : swatch === null || swatch === void 0 ? void 0 : swatch[50];
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const bg = swatch[100];
             if (!isHexColor(bg))
-                return { bg, color: swatch === null || swatch === void 0 ? void 0 : swatch[800] };
+                return { bg, color: swatch[800] };
             // accentTextOnCanvas keeps brand hue by trying this scale's own rungs first, but some
             // narrow-gamut hues (e.g. yellow) don't reach far enough at either end to clear AA against
             // every bg they can land on in dark mode (measured 4.42 for a reversed-yellow badge) — its
@@ -49,9 +59,7 @@ const Badge = {
             const accent = (0, accentText_1.accentTextOnCanvas)(swatch, bg);
             if ((0, color_1.contrastRatio)(accent, bg) >= 4.5)
                 return { bg, color: accent };
-            const white = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.white) !== null && _g !== void 0 ? _g : "#fff";
-            const black = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.black) !== null && _j !== void 0 ? _j : "#000";
-            return { bg, color: (0, accentText_1.onFilled)(bg, white, black) };
+            return { bg, color: (0, accentText_1.onFilled)(bg, palette.white, palette.black) };
         },
     },
     defaultProps: {
@@ -65,18 +73,144 @@ const Badge = {
 // unfixed.
 const FormError = {
     baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d;
         // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
         // the icon stays on Chakra's raw `red.500`.
-        const color = (0, accentText_1.accentTextOnCanvas)((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.red, (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const color = (0, accentText_1.accentTextOnCanvas)(palette.red, palette.backgroundColor.main);
         return {
             text: { color },
             icon: { color },
         };
     },
 };
+const $alertFg = (0, react_1.cssVar)("alert-fg");
+const $alertBg = (0, react_1.cssVar)("alert-bg");
+const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.alertAnatomy.keys);
+const Alert = defineAlertStyles({
+    variants: {
+        solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const bg = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
+            if (!isHexColor(bg))
+                return { container: {} };
+            return {
+                container: {
+                    [$alertBg.variable]: bg,
+                    [$alertFg.variable]: (0, accentText_1.onFilled)(bg, palette.white, palette.black),
+                },
+            };
+        }),
+    },
+});
+const $tooltipBg = (0, react_1.cssVar)("tooltip-bg");
+const $tooltipFg = (0, react_1.cssVar)("tooltip-fg");
+/**
+ * Chakra's own Tooltip baseStyle hardcodes `--tooltip-bg`/`--tooltip-fg` to `colors.gray.700`/
+ * `colors.whiteAlpha.900` (gated behind `_dark`, which this theme-swap app never triggers — see
+ * Menu.styles.ts / createBrandTheme's colorMode comment). Our reversed dark gray ramp makes
+ * `gray.700` LIGHT (~L79), so every bare `<Tooltip>` renders a near-white bubble with near-white
+ * text on the dark canvas — invisible. A tooltip floats over arbitrary content in either mode, so
+ * unlike Menu/Modal/Drawer (which follow the canvas) it needs a FIXED high-contrast chip that
+ * doesn't invert with the palette — `black`/`white` are exactly the two tokens `buildDarkPalette`
+ * deliberately never remaps, so they stay a stable dark-bg/white-text pair in both modes.
+ */
+const Tooltip = {
+    baseStyle: ({ theme }) => ({
+        [$tooltipBg.variable]: theme.colors.black,
+        [$tooltipFg.variable]: theme.colors.white,
+    }),
+};
+const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
+const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
+/**
+ * Chakra's own Skeleton baseStyle hardcodes `--skeleton-start-color`/`--skeleton-end-color` to
+ * `colors.gray.100`/`colors.gray.400` the same `_dark`-gated way Menu/Popover did (Wave G/H), so
+ * every bare `<Skeleton>` shimmers between two near-white tones on the dark canvas. Fixed at the
+ * theme level rather than in `Skeletons.tsx`: Chakra's `Skeleton` only writes these vars from its
+ * `startColor`/`endColor` PROPS when a caller actually passes them (`useToken` on an empty string
+ * resolves to `undefined`, so the prop-driven `cssVarStyles` object stays empty) — an explicit
+ * prop still wins via that mechanism, this only supplies the default the base style already owns.
+ */
+const Skeleton = {
+    baseStyle: ({ theme }) => ({
+        [$skeletonStart.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
+        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
+        background: $skeletonStart.reference,
+        borderColor: $skeletonEnd.reference,
+    }),
+};
+// Chakra's `extendTheme` does not REPLACE a component's stock baseStyle when ours is also a
+// function — it calls BOTH and deep-merges the two returned plain objects, key by key. Chakra's
+// own stock Radio (@chakra-ui/theme radio.mjs) writes its checked dot with the shorthand style
+// props `bg`/`w`/`h`/`pos`; an earlier version of this override used the full CSS property names
+// (`background`/`width`/`height`/`position`). A deep merge treats those as DIFFERENT keys, so
+// both survived into the final style object instead of one cleanly overwriting the other — and
+// in practice Chakra's own `bg: "currentColor"` rung won, leaving a hardcoded-black dot. Using
+// the exact same keys Chakra's stock style uses makes every one of ours a scalar overwrite, and
+// `!important` on the two colour-bearing declarations removes any remaining doubt about which
+// value survives serialization — verified against the actual rendered cascade, not just this
+// function's return value (see componentStyles.radioDotMerge.test.ts, which asserts the merge
+// behavior directly rather than only the function output).
+const Radio = {
+    baseStyle: ({ theme, colorScheme }) => {
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const fill = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
+        const dot = (0, accentText_1.onFilled)(fill, palette.white, palette.black);
+        // A browser probe found the checked radio's hover repeating its own resting `fill` —
+        // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
+        // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;
+        // ours must supply a value that actually differs from resting, same fix shape as
+        // NavigationBar/OrgSwitcher's "hand a fill its own resting bg as the backdrop" pattern.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
+        return {
+            control: {
+                borderColor: palette.boxborder[500],
+                _checked: {
+                    bg: `${fill} !important`,
+                    borderColor: `${fill} !important`,
+                    color: `${dot} !important`,
+                    _before: {
+                        content: `""`,
+                        display: "inline-block",
+                        pos: "relative",
+                        w: "50%",
+                        h: "50%",
+                        borderRadius: "50%",
+                        bg: `${dot} !important`,
+                    },
+                    _hover: { bg: `${hoverFill} !important`, borderColor: `${hoverFill} !important` },
+                },
+            },
+        };
+    },
+    defaultProps: { colorScheme: "primary" },
+};
+const $closeButtonBg = (0, react_1.cssVar)("close-button-bg");
+/**
+ * Chakra's stock CloseButton hover/active wash (`blackAlpha.100`/`.200`) only swaps to
+ * `whiteAlpha.100`/`.200` under `_dark` — dead in this app (see createBrandTheme's colorMode
+ * comment) — so a CloseButton on a dark canvas keeps the light-mode blackAlpha wash, which reads
+ * as almost no affordance against a dark surface. The light-mode values themselves also measure
+ * borderline against `background[50]` (1.14/1.19, under `MIN_PERCEPTIBLE_STEP`). Branch on the
+ * palette's own actual canvas (`isDarkCanvas`), not Chakra's dead colorMode, and step one rung up
+ * each scale (`.200`/`.300`) — verified >=1.19 across all 9 brands x both modes
+ * (closeButtonHover.test.ts).
+ */
+const CloseButton = {
+    baseStyle: ({ theme }) => {
+        const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+        const dark = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main);
+        const alpha = (0, paletteFromTheme_1.scaleFor)(palette, dark ? "whiteAlpha" : "blackAlpha");
+        return {
+            _hover: { [$closeButtonBg.variable]: alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha[300] },
+        };
+    },
+};
 exports.componentStyles = {
+    Alert,
     Checkbox: Checkbox_styles_1.Checkbox,
+    Radio,
     Input: TextInput_styles_1.Input,
     Button: Button_styles_1.Button,
     Select: Select_styles_1.Select,
@@ -85,4 +219,15 @@ exports.componentStyles = {
     NumberInput: NumberInput_styles_1.NumberInput,
     Badge,
     FormError,
+    Drawer: Drawer_styles_1.Drawer,
+    Menu: Menu_styles_1.Menu,
+    Modal: Modal_styles_1.Modal,
+    Popover: Popover_styles_1.Popover,
+    Slider: Slider_styles_1.Slider,
+    Switch: Switch_styles_1.Switch,
+    Tabs: Tabs_styles_1.Tabs,
+    Avatar: Avatar_styles_1.Avatar,
+    Skeleton,
+    Tooltip,
+    CloseButton,
 };

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -15,4 +15,3 @@ export interface CreateBrandThemeOptions {
  */
 export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
 export default createBrandTheme;
-//# sourceMappingURL=createBrandTheme.d.ts.map

package/dist/Theme/chakra/createBrandTheme.js

@@ -8,6 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const common_web_1 = __importDefault(require("./common.web"));
 const fonts_web_1 = __importDefault(require("./fonts.web"));
 const componentStyles_1 = require("./componentStyles");
+const accentText_1 = require("../tokens/builders/accentText");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -63,10 +64,56 @@ const createBrandTheme = (palette, options = {}) => {
             ? {
                 styles: {
                     global: {
+                        // Native widgets the page cannot style — the `<select>` dropdown list and the
+                        // time/date picker popups — are painted by the browser, which defaults to light
+                        // and produced white popups on the dark canvas. `color-scheme` is the only way to
+                        // tell it otherwise.
+                        html: {
+                            colorScheme: "dark",
+                        },
                         body: {
                             bg: palette.backgroundColor.main,
                             color: palette.text[900],
                         },
+                        // Text selection is another browser-painted surface `color-scheme` doesn't cover —
+                        // the UA default `::selection` stays a light highlight regardless of theme, so
+                        // selecting text anywhere (e.g. a table cell) shows a stray white/lavender patch on
+                        // the dark canvas. Brand it instead, with WCAG-safe ink via the same `onFilled` math
+                        // used for buttons/badges.
+                        "::selection": {
+                            background: palette.primary[500],
+                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        "::-moz-selection": {
+                            background: palette.primary[500],
+                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
+                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
+                        // canvas instead of floating as a mismatched gray bar.
+                        "::-webkit-scrollbar": {
+                            width: "10px",
+                            height: "10px",
+                        },
+                        "::-webkit-scrollbar-track": {
+                            background: palette.backgroundColor.main,
+                        },
+                        "::-webkit-scrollbar-thumb": {
+                            background: palette.gray[600],
+                            borderRadius: "6px",
+                        },
+                        "::-webkit-scrollbar-thumb:hover": {
+                            background: palette.gray[500],
+                        },
+                        // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
+                        // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
+                        // reaches it — a bright light box survives on every dark autofilled field unless
+                        // overridden with the same trick.
+                        "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus": {
+                            WebkitBoxShadow: `0 0 0px 1000px ${palette.backgroundColor.secondary} inset`,
+                            WebkitTextFillColor: palette.text[900],
+                            caretColor: palette.text[900],
+                        },
                     },
                 },
             }

package/dist/Theme/chakra/fonts.web.d.ts

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

package/dist/Theme/chakra/paletteFromTheme.d.ts

@@ -0,0 +1,10 @@
+import type { ColorScale, PaletteProps } from "../tokens/types";
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+export declare const paletteOf: (theme: {
+    colors?: unknown;
+}) => PaletteProps;
+/**
+ * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
+ * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
+ */
+export declare const scaleFor: (palette: PaletteProps, colorScheme: string) => ColorScale;

package/dist/Theme/chakra/paletteFromTheme.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleFor = exports.paletteOf = void 0;
+const assertPalette_1 = require("../assertPalette");
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+const paletteOf = (theme) => (0, assertPalette_1.assertPixelizePalette)(theme);
+exports.paletteOf = paletteOf;
+const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
+/**
+ * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
+ * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
+ */
+const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+exports.scaleFor = scaleFor;

package/dist/Theme/index.d.ts

@@ -36,4 +36,3 @@ export declare const ThemesList: {
 export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, ReturnType<typeof createBrandTheme>>>;
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 export declare const brandThemes: BrandThemes;
-//# sourceMappingURL=index.d.ts.map

package/dist/Theme/index.js

@@ -47,15 +47,31 @@ exports.ThemesList = {
     storefront: storefront,
     zinc: zinc,
 };
+/**
+ * `dark` is built on first read, not at import. Nine `createBrandTheme` calls measure ~15ms on a
+ * dev machine, and a light-only app (tickets, and every app before it opts in) never reads one.
+ * A getter — rather than a lazy map — keeps `Object.keys(brandThemes)` and its order intact,
+ * which `ThemeSwitcher` iterates to render the brand picker.
+ */
+const withLazyDark = (brand, light) => {
+    let dark;
+    return {
+        light,
+        get dark() {
+            dark !== null && dark !== void 0 ? dark : (dark = (0, createBrandTheme_1.default)(brands_1.darkPalettes[brand], { colorMode: "dark" }));
+            return dark;
+        },
+    };
+};
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 exports.brandThemes = {
-    lavender: { light: lavender, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.lavender, { colorMode: "dark" }) },
-    meadow: { light: meadow, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.meadow, { colorMode: "dark" }) },
-    radiant: { light: radiant, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.radiant, { colorMode: "dark" }) },
-    skyline: { light: skyline, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.skyline, { colorMode: "dark" }) },
-    slate: { light: slate, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.slate, { colorMode: "dark" }) },
-    emerald: { light: emerald, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.emerald, { colorMode: "dark" }) },
-    rosewood: { light: rosewood, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.rosewood, { colorMode: "dark" }) },
-    storefront: { light: storefront, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.storefront, { colorMode: "dark" }) },
-    zinc: { light: zinc, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.zinc, { colorMode: "dark" }) },
+    lavender: withLazyDark("lavender", lavender),
+    meadow: withLazyDark("meadow", meadow),
+    radiant: withLazyDark("radiant", radiant),
+    skyline: withLazyDark("skyline", skyline),
+    slate: withLazyDark("slate", slate),
+    emerald: withLazyDark("emerald", emerald),
+    rosewood: withLazyDark("rosewood", rosewood),
+    storefront: withLazyDark("storefront", storefront),
+    zinc: withLazyDark("zinc", zinc),
 };

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

@@ -10,12 +10,31 @@ 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;
+    /**
+     * App-specific theme overrides (fonts, sizes, component defaultProps, zIndices, ...) merged
+     * onto the resolved `brandThemes[brand][resolvedMode]` via `extendTheme`. Re-evaluated whenever
+     * `brand`/`resolvedMode` change, so overrides always layer onto the CURRENT palette rather than
+     * a stale one. Safe to merge post-resolution: `createBrandTheme` already fixes
+     * `config.initialColorMode` to `"light"` on every palette, and `extendTheme` is a pure additive
+     * merge — it does not re-derive `_dark:` blocks or re-run color-mode resolution, so this cannot
+     * reintroduce the double-adaptation bug `forcedLightColorModeManager` avoids (see above).
+     */
+    themeOverrides?: Record<string, unknown>;
 };
 export declare const ThemeModeContext: React.Context<ThemeModeContextValue | undefined>;
 /**
@@ -32,5 +51,4 @@ 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, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PixelizeThemeProvider.d.ts.map
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -48,12 +48,14 @@ 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, }) => {
-    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
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = (0, react_1.useState)("light");
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+    // Seed from storage during the first render: StrictMode re-runs the persist effect, and a
+    // ref guard cannot stop that second pass writing defaults over the stored value.
+    const [mode, setModeState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
+    const [brand, setBrandState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
     (0, react_1.useEffect)(() => {
         setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
         return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
@@ -67,6 +69,28 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
         if (stored.brand)
             setBrandState(stored.brand);
     }, [disablePersistence, storageKey]);
+    // `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. Sync it here instead so every consumer gets it for free.
+    // Compare the previous prop, never a "first run" flag: StrictMode double-invokes effects while
+    // refs survive, so a flag guard lets pass 2 reset state to the prop and clobber stored values.
+    const prevBrandProp = (0, react_1.useRef)(brandProp);
+    (0, react_1.useEffect)(() => {
+        if (prevBrandProp.current === brandProp)
+            return;
+        prevBrandProp.current = brandProp;
+        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 prevModeProp = (0, react_1.useRef)(defaultMode);
+    (0, react_1.useEffect)(() => {
+        if (prevModeProp.current === defaultMode)
+            return;
+        prevModeProp.current = defaultMode;
+        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);
@@ -80,12 +104,113 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
         (0, colorModeStorage_1.writeStoredTheme)(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
-    const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
-    const setBrand = (0, react_1.useCallback)((next) => setBrandState(next), []);
+    /**
+     * Native browser UI (the `<select>` dropdown popup chrome, the `<input type="date">` calendar
+     * picker) is painted by the browser's own UA stylesheet keyed off the CSS `color-scheme`
+     * property, entirely separate from Chakra/React theming — no component style or palette swap
+     * above can reach it. Without this, that chrome always renders light, even on an otherwise dark
+     * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
+     * light-only, see the module doc's "Key rules" — are untouched.
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        document.documentElement.style.colorScheme = resolvedMode;
+    }, [resolvedMode]);
+    // Chakra's ColorModeProvider re-writes color-scheme in a passive effect, after the layout
+    // effect above, and forcedLightColorModeManager pins it to "light". Re-assert after it.
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.colorScheme = resolvedMode;
+    }, [resolvedMode]);
+    // 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. Written in a layout
+    // effect, not during render — a render-phase write is unsafe under StrictMode's double
+    // invocation, and this still lands before any click handler can fire.
+    const onModeChangeRef = (0, react_1.useRef)(onModeChange);
+    const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
+    (0, react_1.useLayoutEffect)(() => {
+        onModeChangeRef.current = onModeChange;
+        onBrandChangeRef.current = onBrandChange;
+    }, [onModeChange, 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]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: index_1.brandThemes[brand][resolvedMode], colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
+    // `themeOverrides` is caller-supplied, and the idiomatic way to pass it is an inline object
+    // literal — a new identity every render. Keying the memo on identity would re-run `extendTheme`
+    // and hand `ChakraProvider` a new theme on every render of the consuming app, invalidating
+    // emotion's style resolution for everything beneath it. Compare by value instead.
+    const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
+    const resolvedTheme = (0, react_1.useMemo)(() => {
+        const base = index_1.brandThemes[brand][resolvedMode];
+        return themeOverrides ? (0, react_2.extendTheme)(base, themeOverrides) : base;
+        // Keyed on the serialized overrides, not their identity. `brand`/`resolvedMode` must stay:
+        // overrides re-layer onto the CURRENT palette (see the prop's doc comment above).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [brand, resolvedMode, overridesKey]);
+    /**
+     * The library ships its `var(--color-*)` tokens light-only on `:root` (global.css), so any
+     * consumer that styles with those CSS vars rather than Chakra tokens stays light in dark mode —
+     * invisible text on the dark canvas, white panels. In dark, re-point every used var at the
+     * already-dark-correct resolved palette; in light, clear them so the static `:root` values apply
+     * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
+     * `data-mode` for consumers that want to hook their own dark CSS.
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const root = document.documentElement;
+        root.dataset.mode = resolvedMode;
+        const colors = resolvedTheme.colors;
+        const sem = (_a = colors.semantic) !== null && _a !== void 0 ? _a : {};
+        const gray = colors.gray;
+        const HUE_SCALES = [
+            "primary", "gray", "red", "orange", "yellow",
+            "green", "teal", "blue", "cyan", "purple", "pink",
+        ];
+        const SEMANTIC_SCALES = ["success", "error", "warning", "info"]; // nested under colors.semantic
+        const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+        // Single-value semantic vars → palette scale+rung. The dark gray ramp runs dark(50) → light(900),
+        // so low rungs read as surfaces and high rungs as text — correct in dark, cleared in light.
+        const SEMANTIC_VARS = {
+            "text-heading": gray === null || gray === void 0 ? void 0 : gray[900], "text-body": gray === null || gray === void 0 ? void 0 : gray[700],
+            "text-subtle": gray === null || gray === void 0 ? void 0 : gray[500], "text-input": gray === null || gray === void 0 ? void 0 : gray[500],
+            "bg-main": gray === null || gray === void 0 ? void 0 : gray[50], "bg-secondary": gray === null || gray === void 0 ? void 0 : gray[100], "bg-tertiary": gray === null || gray === void 0 ? void 0 : gray[100],
+            "bg-quaternary": gray === null || gray === void 0 ? void 0 : gray[200], "bg-light": gray === null || gray === void 0 ? void 0 : gray[50], "bg-medium": gray === null || gray === void 0 ? void 0 : gray[100],
+            "bg-accent": gray === null || gray === void 0 ? void 0 : gray[200], "bg-subtle": gray === null || gray === void 0 ? void 0 : gray[100], "bg-muted": gray === null || gray === void 0 ? void 0 : gray[200],
+            "bg-neutral": gray === null || gray === void 0 ? void 0 : gray[100], "bg-base": gray === null || gray === void 0 ? void 0 : gray[50], "bg-table-header": gray === null || gray === void 0 ? void 0 : gray[100],
+            "border-default": gray === null || gray === void 0 ? void 0 : gray[200], "border-light": gray === null || gray === void 0 ? void 0 : gray[100],
+            "border-dark": gray === null || gray === void 0 ? void 0 : gray[300], "border-input": gray === null || gray === void 0 ? void 0 : gray[300],
+            "border-error": (_b = sem.error) === null || _b === void 0 ? void 0 : _b[500], "border-success": (_c = sem.success) === null || _c === void 0 ? void 0 : _c[500],
+            "border-warning": (_d = sem.warning) === null || _d === void 0 ? void 0 : _d[500], "border-info": (_e = sem.info) === null || _e === void 0 ? void 0 : _e[500],
+        };
+        const set = (name, val) => val && root.style.setProperty(`--color-${name}`, val);
+        const clear = (name) => root.style.removeProperty(`--color-${name}`);
+        const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
+        if (resolvedMode === "dark") {
+            for (const s of HUE_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, (_f = colors[s]) === null || _f === void 0 ? void 0 : _f[r]);
+            for (const s of SEMANTIC_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, (_g = sem[s]) === null || _g === void 0 ? void 0 : _g[r]);
+            for (const [name, val] of Object.entries(SEMANTIC_VARS))
+                set(name, val);
+        }
+        else {
+            for (const name of allRampNames)
+                clear(name);
+            for (const name of Object.keys(SEMANTIC_VARS))
+                clear(name);
+        }
+    }, [resolvedMode, resolvedTheme]);
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
 };
 exports.PixelizeThemeProvider = PixelizeThemeProvider;

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

@@ -5,4 +5,3 @@ export type ThemeSwitcherProps = {
     "aria-label"?: string;
 };
 export declare const ThemeSwitcher: ({ variant, showBrandPicker, size, "aria-label": ariaLabel, }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeSwitcher.d.ts.map