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

package/dist/esm/Theme/chakra/Menu.styles.js

@@ -0,0 +1,47 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { menuAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
+const $bg = cssVar("menu-bg");
+/**
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
+ * ThemeSwitcher's BrandMenu/MenuVariant).
+ *
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
+ * the list fix.
+ */
+const $itemBg = cssVar("menu-item-bg");
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
+    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    return {
+        list: {
+            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            bg: $bg.reference,
+            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+        },
+        // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
+        // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
+        // here for the item's resting bg risked the two colliding under the same custom
+        // property. A dedicated var keeps the item's hover/focus tint fully independent of the
+        // list's background var.
+        item: {
+            bg: "transparent",
+            _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
+            _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+        },
+    };
+});
+export const Menu = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Modal.styles.js

@@ -0,0 +1,21 @@
+import { paletteOf } from "./paletteFromTheme.js";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { modalAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(modalAnatomy.keys);
+const $bg = cssVar("modal-bg");
+/**
+ * Chakra's own Modal baseStyle hardcodes `--modal-bg` to "colors.white" (gated behind `_dark`,
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * `<ModalContent>` in every consuming app renders a white dialog on the dark canvas — the same
+ * bug class `Menu.styles.ts` already fixes for dropdowns.
+ */
+const baseStyle = definePartsStyle(({ theme }) => ({
+    dialog: {
+        [$bg.variable]: paletteOf(theme).backgroundColor.light,
+        bg: $bg.reference,
+        color: paletteOf(theme).text[900],
+    },
+}));
+export const Modal = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Popover.styles.js

@@ -0,0 +1,27 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { popoverAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
+const $popperBg = cssVar("popper-bg");
+const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
+/**
+ * Same bug class as Menu (Wave G): Chakra's own Popover baseStyle hardcodes `--popper-bg` to
+ * "#fff" and `--popper-arrow-shadow-color` to `colors.gray.200`, both gated behind `_dark`, which
+ * this theme-swap app never triggers (see Menu.styles.ts / createBrandTheme's colorMode comment).
+ * Every bare `<PopoverContent>` renders a white card with a light arrow shadow on the dark canvas.
+ * `--popper-arrow-bg` is left alone — Chakra's own baseStyle already points it at `$popperBg`, so
+ * fixing `$popperBg` here fixes the arrow fill too.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    return ({
+        content: {
+            [$popperBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $popperBg.reference,
+            [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
+            color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
+        },
+    });
+});
+export const Popover = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Slider.styles.js

@@ -0,0 +1,20 @@
+import { paletteOf } from "./paletteFromTheme.js";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { sliderAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
+const $thumbBg = cssVar("slider-thumb-bg");
+/**
+ * Chakra's own Slider thumb baseStyle hardcodes `bg: "white"` with no `_dark` gate at all (unlike
+ * track/filledTrack, which at least have one Chakra's own colorMode never triggers here) — so
+ * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
+ * same bug class as Menu/Modal but without even the dead `_dark` branch.
+ */
+const baseStyle = definePartsStyle(({ theme }) => ({
+    thumb: {
+        [$thumbBg.variable]: paletteOf(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
+export const Slider = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Switch.styles.js

@@ -0,0 +1,21 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { switchAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
+const $thumbBg = cssVar("switch-thumb-bg");
+/**
+ * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
+ * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
+ * regardless of mode.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        thumb: {
+            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $thumbBg.reference,
+        },
+    });
+});
+export const Switch = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/esm/Theme/chakra/Tabs.styles.js

@@ -0,0 +1,33 @@
+import { paletteOf } from "./paletteFromTheme.js";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { tabsAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
+const $bg = cssVar("tabs-bg");
+const $border = cssVar("tabs-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
+ * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
+ * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
+ * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
+ * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
+ */
+const variantEnclosed = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$border.variable]: paletteOf(theme).backgroundColor.light,
+        },
+    },
+}));
+const variantEnclosedColored = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$bg.variable]: paletteOf(theme).backgroundColor.light,
+        },
+    },
+}));
+export const Tabs = defineMultiStyleConfig({
+    variants: {
+        enclosed: variantEnclosed,
+        "enclosed-colored": variantEnclosedColored,
+    },
+});

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

@@ -0,0 +1,22 @@
+import { space, sizes, radii, shadows, zIndices, breakpoints, lineHeights, letterSpacings, } from "../tokens/primitives/index.js";
+/**
+ * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
+ * concern, which is why this assembly lives here and not in `tokens/`.
+ */
+const common = {
+    lineHeights,
+    letterSpacings,
+    space,
+    sizes,
+    breakpoints,
+    shadows,
+    radii,
+    zIndices,
+    config: {
+        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
+        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
+        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        cssVarPrefix: "chakra",
+    },
+};
+export default common;

package/dist/esm/Theme/chakra/componentStyles.js

@@ -0,0 +1,230 @@
+import { paletteOf, scaleFor } from "./paletteFromTheme.js";
+import { alertAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, cssVar, } from "@chakra-ui/react";
+import { Button } from "../../Components/Button/Button.styles.js";
+import { Checkbox } from "../../Components/Checkbox/Checkbox.styles.js";
+import { Input } from "../../Components/Input/TextInput.styles.js";
+import { Select } from "../../Components/Select/Select.styles.js";
+import { Tag } from "../../Components/Tag/Tag.styles.js";
+import { Textarea } from "../../Components/InputTextArea/InputTextArea.style.js";
+import { NumberInput } from "../../Components/NumberInput/NumberInput.styles.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../tokens/builders/accentText.js";
+import { contrastRatio } from "../tokens/builders/color.js";
+import { resolveHoverTint } from "../tokens/builders/outlineRung.js";
+import { Drawer } from "./Drawer.styles.js";
+import { Menu } from "./Menu.styles.js";
+import { Modal } from "./Modal.styles.js";
+import { Popover } from "./Popover.styles.js";
+import { Slider } from "./Slider.styles.js";
+import { Switch } from "./Switch.styles.js";
+import { Tabs } from "./Tabs.styles.js";
+import { Avatar } from "./Avatar.styles.js";
+// `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
+// Chakra's own original fixed rung instead of computing contrast on a color it can't parse.
+const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
+// Badge isn't its own component family (no Components/Badge/), so its style config lives here —
+// Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
+const Badge = {
+    variants: {
+        solid: ({ theme, colorScheme = "gray" }) => {
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            const bg = swatch[500];
+            return {
+                bg,
+                color: isHexColor(bg) ? onFilled(bg, palette.white, palette.black) : swatch[800],
+            };
+        },
+        // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
+        // colorMode — which this app never toggles (dark mode swaps the palette object instead), so
+        // 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" }) => {
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            const bg = swatch[100];
+            if (!isHexColor(bg))
+                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
+            // own doc admits it falls back to "the most extreme rung" rather than guaranteeing AA. Verify
+            // the candidate actually clears AA; if not, drop brand hue for the guaranteed white/black ink
+            // (onFilled is provably >=4.5 against any bg) rather than ship a near-miss.
+            const accent = accentTextOnCanvas(swatch, bg);
+            if (contrastRatio(accent, bg) >= 4.5)
+                return { bg, color: accent };
+            return { bg, color: onFilled(bg, palette.white, palette.black) };
+        },
+    },
+    defaultProps: {
+        variant: "subtle",
+        colorScheme: "gray",
+    },
+};
+// Chakra's stock FormErrorMessage hardcodes `colors.red.500` (our own `red[500]`, since
+// `createBrandTheme` sets `theme.colors = palette`) — same AA gap as our own ErrorMessage/
+// ErrorComponent, fixed the same way rather than leaving Chakra's raw usage (e.g. FeedbackForm)
+// unfixed.
+const FormError = {
+    baseStyle: ({ theme }) => {
+        // `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 palette = paletteOf(theme);
+        const color = accentTextOnCanvas(palette.red, palette.backgroundColor.main);
+        return {
+            text: { color },
+            icon: { color },
+        };
+    },
+};
+const $alertFg = cssVar("alert-fg");
+const $alertBg = cssVar("alert-bg");
+const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = createMultiStyleConfigHelpers(alertAnatomy.keys);
+const Alert = defineAlertStyles({
+    variants: {
+        solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
+            const palette = paletteOf(theme);
+            const bg = scaleFor(palette, colorScheme)[500];
+            if (!isHexColor(bg))
+                return { container: {} };
+            return {
+                container: {
+                    [$alertBg.variable]: bg,
+                    [$alertFg.variable]: onFilled(bg, palette.white, palette.black),
+                },
+            };
+        }),
+    },
+});
+const $tooltipBg = cssVar("tooltip-bg");
+const $tooltipFg = 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 = cssVar("skeleton-start-color");
+const $skeletonEnd = 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]: paletteOf(theme).gray[100],
+        [$skeletonEnd.variable]: 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 = paletteOf(theme);
+        const fill = scaleFor(palette, colorScheme)[500];
+        const dot = 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 = 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 = 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 = paletteOf(theme);
+        const dark = isDarkCanvas(palette.backgroundColor.main);
+        const alpha = scaleFor(palette, dark ? "whiteAlpha" : "blackAlpha");
+        return {
+            _hover: { [$closeButtonBg.variable]: alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha[300] },
+        };
+    },
+};
+export const componentStyles = {
+    Alert,
+    Checkbox,
+    Radio,
+    Input,
+    Button,
+    Select,
+    Tag,
+    Textarea,
+    NumberInput,
+    Badge,
+    FormError,
+    Drawer,
+    Menu,
+    Modal,
+    Popover,
+    Slider,
+    Switch,
+    Tabs,
+    Avatar,
+    Skeleton,
+    Tooltip,
+    CloseButton,
+};

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -0,0 +1,118 @@
+import { extendTheme } from "@chakra-ui/react";
+import common from "./common.web.js";
+import fonts from "./fonts.web.js";
+import { componentStyles } from "./componentStyles.js";
+import { onFilled } from "../tokens/builders/accentText.js";
+/**
+ * Builds a Chakra theme from a pure brand palette.
+ *
+ * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
+ * which palette they imported.
+ *
+ * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
+ * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
+ * the palette automatically without any per-component `_dark` overrides.
+ */
+export const createBrandTheme = (palette, options = {}) => {
+    var _a;
+    const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const brand = {
+        colors: palette,
+        ...fonts,
+        ...common,
+    };
+    return extendTheme({
+        ...brand,
+        config: {
+            ...common.config,
+            // Deliberately ALWAYS "light", even for the dark theme — this is not a bug.
+            //
+            // Dark works by swapping the palette, so the palette is ALREADY mode-adapted by the time
+            // Chakra sees it. Telling Chakra it is in dark mode makes it adapt a second time: its
+            // built-ins carry `_dark` blocks that reach for `gray.700`/`gray.800` assuming a scale where
+            // those rungs are dark. Our dark gray ramp runs dark -> light, so those rungs are LIGHT —
+            // producing a light Card/Skeleton/Menu on a dark canvas. Adapting twice cancels out.
+            //
+            // Keeping Chakra on its `_light` branch is what makes the swap work: those defaults are
+            // gray-RUNG references (`gray.100`, `gray.200`, `gray.600`), and our reversed ramp already
+            // maps each rung to the right value per mode. `semanticTokens` below patches the one default
+            // that hardcodes a literal color instead of a rung.
+            initialColorMode: "light",
+            useSystemColorMode: false,
+        },
+        // `chakra-body-bg` is the only stock semantic token that resolves to a LITERAL (`white`)
+        // rather than a gray rung, so it is the only one the palette swap cannot correct on its own —
+        // it is what paints a white Card/Modal/Menu on the dark canvas. `background[50]` is the
+        // canvas-following equivalent: byte-identical `#ffffff` in light, the canvas in dark.
+        // `chakra-inverse-text` is the same literal-`white` problem in text form.
+        semanticTokens: {
+            colors: {
+                "chakra-body-bg": palette.background[50],
+                "chakra-inverse-text": palette.background[50],
+            },
+        },
+        // Light themes intentionally declare no global styles — that is the pre-existing
+        // behavior, and adding any would shift every consuming app's light rendering.
+        // Dark needs a canvas, otherwise the page stays white behind the components.
+        ...(colorMode === "dark"
+            ? {
+                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: onFilled(palette.primary[500], palette.white, palette.black),
+                        },
+                        "::-moz-selection": {
+                            background: palette.primary[500],
+                            color: 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],
+                        },
+                    },
+                },
+            }
+            : {}),
+        components: componentStyles,
+    });
+};
+export default createBrandTheme;

package/dist/esm/Theme/chakra/fonts.web.js

@@ -0,0 +1,10 @@
+/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
+import "@fontsource-variable/inter/index.css";
+import typography from "../tokens/primitives/typography.js";
+/**
+ * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
+ * typography tokens. The CSS import lives here rather than in `tokens/` so the token
+ * layer stays portable to mobile.
+ */
+const fonts = typography;
+export default fonts;

package/dist/esm/Theme/chakra/paletteFromTheme.js

@@ -0,0 +1,9 @@
+import { assertPixelizePalette } from "../assertPalette.js";
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+export const paletteOf = (theme) => assertPixelizePalette(theme);
+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.
+ */
+export const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };

package/dist/esm/Theme/index.js

@@ -0,0 +1,63 @@
+import createBrandTheme from "./chakra/createBrandTheme.js";
+import { lightPalettes, darkPalettes } from "./tokens/brands/index.js";
+/**
+ * Chakra themes per brand, built from the pure palettes in `tokens/brands`.
+ *
+ * These used to be seven near-identical `<Brand>/theme.ts` files that differed only in
+ * which palette they imported; `createBrandTheme` is that shared body.
+ */
+const lavender = createBrandTheme(lightPalettes.lavender);
+const meadow = createBrandTheme(lightPalettes.meadow);
+const radiant = createBrandTheme(lightPalettes.radiant);
+const skyline = createBrandTheme(lightPalettes.skyline);
+const slate = createBrandTheme(lightPalettes.slate);
+const emerald = createBrandTheme(lightPalettes.emerald);
+const rosewood = createBrandTheme(lightPalettes.rosewood);
+const storefront = createBrandTheme(lightPalettes.storefront);
+const zinc = createBrandTheme(lightPalettes.zinc);
+export { skyline, meadow, radiant, lavender, slate, emerald, rosewood, storefront, zinc };
+/**
+ * Published contract — consumers iterate this to render theme pickers, so both the keys
+ * and their order are load-bearing. Stays light-only: these are the exact theme objects
+ * apps already pass to `withTheme`, and dark is opt-in via `PixelizeThemeProvider`.
+ * `storefront`/`zinc` are appended at the end — additive, doesn't reorder existing entries.
+ */
+export const ThemesList = {
+    lavender: lavender,
+    meadow: meadow,
+    skyline: skyline,
+    emerald: emerald,
+    rosewood: rosewood,
+    slate: slate,
+    radiant: radiant,
+    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 = createBrandTheme(darkPalettes[brand], { colorMode: "dark" }));
+            return dark;
+        },
+    };
+};
+/** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
+export const brandThemes = {
+    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),
+};