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

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,108 @@ 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]);
+    // 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

package/dist/Theme/provider/ThemeSwitcher.js

@@ -19,13 +19,24 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
+/**
+ * Same swatch each brand's own theme carries at `colors.primary[500]` (the
+ * anchor a filled button reads) — resolved per brand from its OWN palette so
+ * the dot always matches what selecting that brand actually looks like,
+ * regardless of which brand/mode is currently active.
+ */
+const brandSwatchColor = (brand) => {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
+};
+const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
  * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
  */
 const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     return {
         trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
@@ -34,19 +45,20 @@ const useSwitcherColors = () => {
         mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
         hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
         borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // Chakra's MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`,
-        // which this theme-swap app never triggers) — same bug class already fixed in
-        // NavigationBar/ButtonGroupIcon. `bg` alone only recolors the list's own box, not the
-        // var other pseudo-states read, so both must be set.
-        menuBg: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _x === void 0 ? void 0 : _x.light) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.background) === null || _z === void 0 ? void 0 : _z[50]) !== null && _0 !== void 0 ? _0 : "white",
-        menuColor: (_4 = (_2 = (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[900]) !== null && _2 !== void 0 ? _2 : (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[900]) !== null && _4 !== void 0 ? _4 : "gray.900",
+        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
+        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
+        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
+        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
+        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
+        // needs) but stop duplicating menuBg.
+        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, menuBg, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor } = useSwitcherColors();
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: toBrandLabel(brand) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
@@ -82,10 +94,10 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg, menuBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

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

@@ -7,4 +7,3 @@ export declare const readStoredTheme: (storageKey: string) => StoredTheme;
 export declare const writeStoredTheme: (storageKey: string, value: StoredTheme) => void;
 export declare const getSystemColorMode: () => ResolvedColorMode;
 export declare const subscribeToSystemColorMode: (callback: (mode: ResolvedColorMode) => void) => (() => void);
-//# sourceMappingURL=colorModeStorage.d.ts.map

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

@@ -0,0 +1,9 @@
+export type FontSizeOption = {
+    id: string;
+    label: string;
+};
+export declare const DEFAULT_FONT_SIZE = "100%";
+export declare const FONT_SIZE_OPTIONS: FontSizeOption[];
+export declare const isFontSize: (value: string | null | undefined) => value is string;
+export declare const resolveFontSize: (value: string | null | undefined) => string;
+export declare const useFontSizeSync: (fontSize: string | null | undefined) => void;

package/dist/Theme/provider/fontSize.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = void 0;
+const react_1 = require("react");
+exports.DEFAULT_FONT_SIZE = "100%";
+exports.FONT_SIZE_OPTIONS = [
+    { id: "80%", label: "Small" },
+    { id: "90%", label: "Medium Small" },
+    { id: exports.DEFAULT_FONT_SIZE, label: "Default" },
+    { id: "110%", label: "Medium Large" },
+    { id: "120%", label: "Large" },
+    { id: "130%", label: "Extra Large" },
+];
+// The value lands on html { font-size }, so a junk stored value must not reach it.
+const isFontSize = (value) => !!value && exports.FONT_SIZE_OPTIONS.some((option) => option.id === value);
+exports.isFontSize = isFontSize;
+const resolveFontSize = (value) => (0, exports.isFontSize)(value) ? value : exports.DEFAULT_FONT_SIZE;
+exports.resolveFontSize = resolveFontSize;
+const useFontSizeSync = (fontSize) => {
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.fontSize = (0, exports.resolveFontSize)(fontSize);
+    }, [fontSize]);
+};
+exports.useFontSizeSync = useFontSizeSync;

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

@@ -3,4 +3,5 @@ export type { PixelizeThemeProviderProps, ThemeModeContextValue, } from "./Pixel
 export { useThemeMode } from "./useThemeMode";
 export { ThemeSwitcher } from "./ThemeSwitcher";
 export type { ThemeSwitcherProps } from "./ThemeSwitcher";
-//# sourceMappingURL=index.d.ts.map
+export { DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./fontSize";
+export type { FontSizeOption } from "./fontSize";

package/dist/Theme/provider/index.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
 var PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
 Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return PixelizeThemeProvider_1.PixelizeThemeProvider; } });
 var useThemeMode_1 = require("./useThemeMode");
 Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return useThemeMode_1.useThemeMode; } });
 var ThemeSwitcher_1 = require("./ThemeSwitcher");
 Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });
+var fontSize_1 = require("./fontSize");
+Object.defineProperty(exports, "DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return fontSize_1.DEFAULT_FONT_SIZE; } });
+Object.defineProperty(exports, "FONT_SIZE_OPTIONS", { enumerable: true, get: function () { return fontSize_1.FONT_SIZE_OPTIONS; } });
+Object.defineProperty(exports, "isFontSize", { enumerable: true, get: function () { return fontSize_1.isFontSize; } });
+Object.defineProperty(exports, "resolveFontSize", { enumerable: true, get: function () { return fontSize_1.resolveFontSize; } });
+Object.defineProperty(exports, "useFontSizeSync", { enumerable: true, get: function () { return fontSize_1.useFontSizeSync; } });

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

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

package/dist/Theme/themeProps.d.ts

@@ -116,4 +116,3 @@ export type CustomThemeProps = {
     };
 };
 export type { PaletteProps, ColorScale, BrandScale, OpacityScale, SemanticColors, NamedSurfaces, BoxShadowTokens, ThemeName, ColorMode, ResolvedColorMode, } from "./tokens/types";
-//# sourceMappingURL=themeProps.d.ts.map

package/dist/Theme/tokens/brands/emerald/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/emerald/palette.light.d.ts

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

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

@@ -25,4 +25,3 @@ export declare const lightPalettes: Record<ThemeName, PaletteProps>;
 export declare const darkPalettes: Record<ThemeName, PaletteProps>;
 export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;
 export declare const themeNames: ThemeName[];
-//# sourceMappingURL=index.d.ts.map

package/dist/Theme/tokens/brands/index.js

@@ -41,6 +41,7 @@ exports.storefrontDark = palette_dark_8.default;
 const palette_dark_9 = __importDefault(require("./zinc/palette.dark"));
 exports.zincDark = palette_dark_9.default;
 const accentText_1 = require("../builders/accentText");
+const outlineRung_1 = require("../builders/outlineRung");
 /**
  * Derived here rather than hand-written into each brand's literal: it must track that brand's
  * own primary scale and canvas, and a stale hand-copied hex would silently fail AA.
@@ -53,29 +54,30 @@ const withAccentText = (palette) => {
         accentText: (_a = palette.accentText) !== null && _a !== void 0 ? _a : (0, accentText_1.pickAccentText)(palette.primary, palette.backgroundColor.main, "light"),
     });
 };
+const lightBrand = (palette) => (0, outlineRung_1.withOutlineRung)(withAccentText(palette), "light");
 /** Light palette per brand. `lavender` is the base the other six extend. */
 exports.lightPalettes = {
-    lavender: withAccentText(palette_light_1.default),
-    meadow: withAccentText(palette_light_2.default),
-    radiant: withAccentText(palette_light_3.default),
-    skyline: withAccentText(palette_light_4.default),
-    slate: withAccentText(palette_light_5.default),
-    emerald: withAccentText(palette_light_6.default),
-    rosewood: withAccentText(palette_light_7.default),
-    storefront: withAccentText(palette_light_8.default),
-    zinc: withAccentText(palette_light_9.default),
+    lavender: lightBrand(palette_light_1.default),
+    meadow: lightBrand(palette_light_2.default),
+    radiant: lightBrand(palette_light_3.default),
+    skyline: lightBrand(palette_light_4.default),
+    slate: lightBrand(palette_light_5.default),
+    emerald: lightBrand(palette_light_6.default),
+    rosewood: lightBrand(palette_light_7.default),
+    storefront: lightBrand(palette_light_8.default),
+    zinc: lightBrand(palette_light_9.default),
 };
 /** Dark palette per brand, derived from the matching light palette. */
 exports.darkPalettes = {
-    lavender: palette_dark_1.default,
-    meadow: palette_dark_2.default,
-    radiant: palette_dark_3.default,
-    skyline: palette_dark_4.default,
-    slate: palette_dark_5.default,
-    emerald: palette_dark_6.default,
-    rosewood: palette_dark_7.default,
-    storefront: palette_dark_8.default,
-    zinc: palette_dark_9.default,
+    lavender: (0, outlineRung_1.withOutlineRung)(palette_dark_1.default, "dark"),
+    meadow: (0, outlineRung_1.withOutlineRung)(palette_dark_2.default, "dark"),
+    radiant: (0, outlineRung_1.withOutlineRung)(palette_dark_3.default, "dark"),
+    skyline: (0, outlineRung_1.withOutlineRung)(palette_dark_4.default, "dark"),
+    slate: (0, outlineRung_1.withOutlineRung)(palette_dark_5.default, "dark"),
+    emerald: (0, outlineRung_1.withOutlineRung)(palette_dark_6.default, "dark"),
+    rosewood: (0, outlineRung_1.withOutlineRung)(palette_dark_7.default, "dark"),
+    storefront: (0, outlineRung_1.withOutlineRung)(palette_dark_8.default, "dark"),
+    zinc: (0, outlineRung_1.withOutlineRung)(palette_dark_9.default, "dark"),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

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

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

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/meadow/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/meadow/palette.light.d.ts

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

package/dist/Theme/tokens/brands/radiant/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/radiant/palette.light.d.ts

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

package/dist/Theme/tokens/brands/rosewood/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/rosewood/palette.light.d.ts

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

package/dist/Theme/tokens/brands/skyline/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/skyline/palette.light.d.ts

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

package/dist/Theme/tokens/brands/slate/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/slate/palette.light.d.ts

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

package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/storefront/palette.light.d.ts

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

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

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

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

@@ -93,13 +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 #6b6b75 interactive border.
+// 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: "#6b6b75",
+    400: "#7a7a83",
     500: "#a1a1aa",
     600: "#b4b4bb",
     700: "#d4d4d8",

package/dist/Theme/tokens/brands/zinc/palette.light.d.ts

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

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

@@ -19,6 +19,11 @@ declare const AA_NORMAL_TEXT = 4.5;
  * keep walking rather than crashing `contrastRatio` on `undefined`.
  */
 export declare const pickAccentText: (primary: ColorScale | undefined, canvas: string, mode: "light" | "dark") => string;
+/** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
+export declare const DEFAULT_CANVAS = "#ffffff";
+/** Mode-stable ink absolutes, used when no theme supplies `colors.white` / `colors.black`. */
+export declare const DEFAULT_WHITE = "#ffffff";
+export declare const DEFAULT_BLACK = "#000000";
 /** Below this relative luminance a canvas is treated as dark. Well clear of both real canvases. */
 declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
@@ -53,4 +58,3 @@ export declare const onFilled: (fill: string, white: string, black: string) => s
  */
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };
-//# sourceMappingURL=accentText.d.ts.map