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

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,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, }: 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;CAC9B,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8EAMnC,0BAA0B,4CA0D5B,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, }) => {
+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
@@ -67,6 +67,30 @@ 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.
+    const isFirstBrandPropRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (isFirstBrandPropRun.current) {
+            isFirstBrandPropRun.current = false;
+            return;
+        }
+        // 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).
+        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);
@@ -80,12 +104,98 @@ 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.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.
+    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]);
-    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 }) }) }));
+    const resolvedTheme = (0, react_1.useMemo)(() => {
+        const base = index_1.brandThemes[brand][resolvedMode];
+        return themeOverrides
+            ? (0, react_2.extendTheme)(base, themeOverrides)
+            : base;
+    }, [brand, resolvedMode, themeOverrides]);
+    /**
+     * 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.useEffect)(() => {
+        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.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAgQF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAkSF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}

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/tokens/brands/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAe3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgB3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAKF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}

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.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":"AAqLA,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,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/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/dist/Theme/tokens/builders/outlineRung.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"outlineRung.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/outlineRung.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,+EAA+E;AAC/E,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,iBAAiB,EACvB,MAAM,GAAE,MAAoB,GAC3B,MAAM,CAaR;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,iBAAiB,GAAG,YAAY,CAc5F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAG1E"}

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

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