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

package/dist/Theme/chakra/componentStyles.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStyles = void 0;
+const react_1 = require("@chakra-ui/react");
+const Button_styles_1 = require("../../Components/Button/Button.styles");
+const Checkbox_styles_1 = require("../../Components/Checkbox/Checkbox.styles");
+const TextInput_styles_1 = require("../../Components/Input/TextInput.styles");
+const Select_styles_1 = require("../../Components/Select/Select.styles");
+const Tag_styles_1 = require("../../Components/Tag/Tag.styles");
+const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextArea.style");
+const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
+const accentText_1 = require("../tokens/builders/accentText");
+const color_1 = require("../tokens/builders/color");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
+const Drawer_styles_1 = require("./Drawer.styles");
+const Menu_styles_1 = require("./Menu.styles");
+const Modal_styles_1 = require("./Modal.styles");
+const Popover_styles_1 = require("./Popover.styles");
+const Slider_styles_1 = require("./Slider.styles");
+const Switch_styles_1 = require("./Switch.styles");
+const Tabs_styles_1 = require("./Tabs.styles");
+const Avatar_styles_1 = require("./Avatar.styles");
+// `colorScheme` accepts any Chakra scale, including built-ins we never themed (blackAlpha,
+// whiteAlpha) whose rungs are translucent `rgba(...)` strings, not opaque hex — our contrast
+// math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
+// 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" }) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
+            const bg = swatch === null || swatch === void 0 ? void 0 : swatch[500];
+            const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#fff";
+            const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000";
+            return {
+                bg,
+                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, white, black) : swatch === null || swatch === void 0 ? void 0 : 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" }) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
+            const bg = (_e = swatch === null || swatch === void 0 ? void 0 : swatch[100]) !== null && _e !== void 0 ? _e : swatch === null || swatch === void 0 ? void 0 : swatch[50];
+            if (!isHexColor(bg))
+                return { bg, color: swatch === null || swatch === void 0 ? void 0 : 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 = (0, accentText_1.accentTextOnCanvas)(swatch, bg);
+            if ((0, color_1.contrastRatio)(accent, bg) >= 4.5)
+                return { bg, color: accent };
+            const white = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.white) !== null && _g !== void 0 ? _g : "#fff";
+            const black = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.black) !== null && _j !== void 0 ? _j : "#000";
+            return { bg, color: (0, accentText_1.onFilled)(bg, white, black) };
+        },
+    },
+    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 }) => {
+        var _a, _b, _c, _d;
+        // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
+        // the icon stays on Chakra's raw `red.500`.
+        const color = (0, accentText_1.accentTextOnCanvas)((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.red, (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+        return {
+            text: { color },
+            icon: { color },
+        };
+    },
+};
+const $tooltipBg = (0, react_1.cssVar)("tooltip-bg");
+const $tooltipFg = (0, react_1.cssVar)("tooltip-fg");
+/**
+ * Chakra's own Tooltip baseStyle hardcodes `--tooltip-bg`/`--tooltip-fg` to `colors.gray.700`/
+ * `colors.whiteAlpha.900` (gated behind `_dark`, which this theme-swap app never triggers — see
+ * Menu.styles.ts / createBrandTheme's colorMode comment). Our reversed dark gray ramp makes
+ * `gray.700` LIGHT (~L79), so every bare `<Tooltip>` renders a near-white bubble with near-white
+ * text on the dark canvas — invisible. A tooltip floats over arbitrary content in either mode, so
+ * unlike Menu/Modal/Drawer (which follow the canvas) it needs a FIXED high-contrast chip that
+ * doesn't invert with the palette — `black`/`white` are exactly the two tokens `buildDarkPalette`
+ * deliberately never remaps, so they stay a stable dark-bg/white-text pair in both modes.
+ */
+const Tooltip = {
+    baseStyle: ({ theme }) => {
+        var _a, _b, _c, _d;
+        return ({
+            [$tooltipBg.variable]: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black) !== null && _b !== void 0 ? _b : "colors.gray.700",
+            [$tooltipFg.variable]: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white) !== null && _d !== void 0 ? _d : "colors.whiteAlpha.900",
+        });
+    },
+};
+const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
+const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
+/**
+ * Chakra's own Skeleton baseStyle hardcodes `--skeleton-start-color`/`--skeleton-end-color` to
+ * `colors.gray.100`/`colors.gray.400` the same `_dark`-gated way Menu/Popover did (Wave G/H), so
+ * every bare `<Skeleton>` shimmers between two near-white tones on the dark canvas. Fixed at the
+ * theme level rather than in `Skeletons.tsx`: Chakra's `Skeleton` only writes these vars from its
+ * `startColor`/`endColor` PROPS when a caller actually passes them (`useToken` on an empty string
+ * resolves to `undefined`, so the prop-driven `cssVarStyles` object stays empty) — an explicit
+ * prop still wins via that mechanism, this only supplies the default the base style already owns.
+ */
+const Skeleton = {
+    baseStyle: ({ theme }) => {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            [$skeletonStart.variable]: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "colors.gray.100",
+            [$skeletonEnd.variable]: (_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : "colors.gray.400",
+            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 }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const swatch = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme];
+        const fill = (_b = swatch === null || swatch === void 0 ? void 0 : swatch[500]) !== null && _b !== void 0 ? _b : (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500];
+        const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#ffffff";
+        const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000000";
+        const dot = (0, accentText_1.onFilled)(fill, white, black);
+        // A browser probe found the checked radio's hover repeating its own resting `fill` —
+        // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
+        // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;
+        // ours must supply a value that actually differs from resting, same fix shape as
+        // NavigationBar/OrgSwitcher's "hand a fill its own resting bg as the backdrop" pattern.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
+        return {
+            control: {
+                borderColor: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[500],
+                _checked: {
+                    bg: `${fill} !important`,
+                    borderColor: `${fill} !important`,
+                    color: `${dot} !important`,
+                    _before: {
+                        content: `""`,
+                        display: "inline-block",
+                        pos: "relative",
+                        w: "50%",
+                        h: "50%",
+                        borderRadius: "50%",
+                        bg: `${dot} !important`,
+                    },
+                    _hover: { bg: `${hoverFill} !important`, borderColor: `${hoverFill} !important` },
+                },
+            },
+        };
+    },
+    defaultProps: { colorScheme: "primary" },
+};
+const $closeButtonBg = (0, react_1.cssVar)("close-button-bg");
+/**
+ * Chakra's stock CloseButton hover/active wash (`blackAlpha.100`/`.200`) only swaps to
+ * `whiteAlpha.100`/`.200` under `_dark` — dead in this app (see createBrandTheme's colorMode
+ * comment) — so a CloseButton on a dark canvas keeps the light-mode blackAlpha wash, which reads
+ * as almost no affordance against a dark surface. The light-mode values themselves also measure
+ * borderline against `background[50]` (1.14/1.19, under `MIN_PERCEPTIBLE_STEP`). Branch on the
+ * palette's own actual canvas (`isDarkCanvas`), not Chakra's dead colorMode, and step one rung up
+ * each scale (`.200`/`.300`) — verified >=1.19 across all 9 brands x both modes
+ * (closeButtonHover.test.ts).
+ */
+const CloseButton = {
+    baseStyle: ({ theme }) => {
+        var _a, _b, _c, _d, _e;
+        const dark = (0, accentText_1.isDarkCanvas)((_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+        const alpha = dark ? (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.whiteAlpha : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blackAlpha;
+        return {
+            _hover: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[300] },
+        };
+    },
+};
+exports.componentStyles = {
+    Checkbox: Checkbox_styles_1.Checkbox,
+    Radio,
+    Input: TextInput_styles_1.Input,
+    Button: Button_styles_1.Button,
+    Select: Select_styles_1.Select,
+    Tag: Tag_styles_1.Tag,
+    Textarea: InputTextArea_style_1.Textarea,
+    NumberInput: NumberInput_styles_1.NumberInput,
+    Badge,
+    FormError,
+    Drawer: Drawer_styles_1.Drawer,
+    Menu: Menu_styles_1.Menu,
+    Modal: Modal_styles_1.Modal,
+    Popover: Popover_styles_1.Popover,
+    Slider: Slider_styles_1.Slider,
+    Switch: Switch_styles_1.Switch,
+    Tabs: Tabs_styles_1.Tabs,
+    Avatar: Avatar_styles_1.Avatar,
+    Skeleton,
+    Tooltip,
+    CloseButton,
+};

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

@@ -0,0 +1,18 @@
+import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
+export interface CreateBrandThemeOptions {
+    /** Which palette this theme represents. Defaults to `light`. */
+    colorMode?: ResolvedColorMode;
+}
+/**
+ * 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 declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
+export default createBrandTheme;
+//# sourceMappingURL=createBrandTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createBrandTheme.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/createBrandTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,YAAY,EACrB,UAAS,uBAA4B,wBAuGtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Theme/chakra/createBrandTheme.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBrandTheme = void 0;
+const react_1 = require("@chakra-ui/react");
+const common_web_1 = __importDefault(require("./common.web"));
+const fonts_web_1 = __importDefault(require("./fonts.web"));
+const componentStyles_1 = require("./componentStyles");
+const accentText_1 = require("../tokens/builders/accentText");
+/**
+ * Builds a Chakra theme from a pure brand palette.
+ *
+ * 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.
+ */
+const createBrandTheme = (palette, options = {}) => {
+    var _a;
+    const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const brand = {
+        colors: palette,
+        ...fonts_web_1.default,
+        ...common_web_1.default,
+    };
+    return (0, react_1.extendTheme)({
+        ...brand,
+        config: {
+            ...common_web_1.default.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: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        "::-moz-selection": {
+                            background: palette.primary[500],
+                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
+                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
+                        // canvas instead of floating as a mismatched gray bar.
+                        "::-webkit-scrollbar": {
+                            width: "10px",
+                            height: "10px",
+                        },
+                        "::-webkit-scrollbar-track": {
+                            background: palette.backgroundColor.main,
+                        },
+                        "::-webkit-scrollbar-thumb": {
+                            background: palette.gray[600],
+                            borderRadius: "6px",
+                        },
+                        "::-webkit-scrollbar-thumb:hover": {
+                            background: palette.gray[500],
+                        },
+                        // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
+                        // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
+                        // reaches it — a bright light box survives on every dark autofilled field unless
+                        // overridden with the same trick.
+                        "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus": {
+                            WebkitBoxShadow: `0 0 0px 1000px ${palette.backgroundColor.secondary} inset`,
+                            WebkitTextFillColor: palette.text[900],
+                            caretColor: palette.text[900],
+                        },
+                    },
+                },
+            }
+            : {}),
+        components: componentStyles_1.componentStyles,
+    });
+};
+exports.createBrandTheme = createBrandTheme;
+exports.default = exports.createBrandTheme;

package/dist/Theme/{fonts.d.ts → chakra/fonts.web.d.ts}

@@ -1,5 +1,10 @@
 /** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
 import "@fontsource-variable/inter/index.css";
+/**
+ * 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.
+ */
 declare const fonts: {
     fonts: {
         body: string;
@@ -34,4 +39,4 @@ declare const fonts: {
     };
 };
 export default fonts;
-//# sourceMappingURL=fonts.d.ts.map
+//# sourceMappingURL=fonts.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/fonts.web.ts"],"names":[],"mappings":"AAAA,qGAAqG;AACrG,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAC;AAEzB,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
+require("@fontsource-variable/inter/index.css");
+const typography_1 = __importDefault(require("../tokens/primitives/typography"));
+/**
+ * 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_1.default;
+exports.default = fonts;

package/dist/Theme/index.d.ts

@@ -1,11 +1,27 @@
-import lavender from "./Default/theme";
-import meadow from "./Meadow/theme";
-import radiant from "./Radiant/theme";
-import skyline from "./Skyline/theme";
-import slate from "./Slate/theme";
-import emerald from "./Emerald/theme";
-import rosewood from "./Rosewood/theme";
-export { skyline, meadow, radiant, lavender, slate, emerald, rosewood };
+import createBrandTheme from "./chakra/createBrandTheme";
+import type { ResolvedColorMode, ThemeName } from "./tokens/types";
+/**
+ * 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.
+ */
+declare const lavender: Record<string, any>;
+declare const meadow: Record<string, any>;
+declare const radiant: Record<string, any>;
+declare const skyline: Record<string, any>;
+declare const slate: Record<string, any>;
+declare const emerald: Record<string, any>;
+declare const rosewood: Record<string, any>;
+declare const storefront: Record<string, any>;
+declare const zinc: Record<string, any>;
+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 declare const ThemesList: {
     lavender: Record<string, any>;
     meadow: Record<string, any>;
@@ -14,5 +30,10 @@ export declare const ThemesList: {
     rosewood: Record<string, any>;
     slate: Record<string, any>;
     radiant: Record<string, any>;
+    storefront: Record<string, any>;
+    zinc: Record<string, any>;
 };
+export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, ReturnType<typeof createBrandTheme>>>;
+/** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
+export declare const brandThemes: BrandThemes;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAExE,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEnE;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,MAAM,qBAAyC,CAAC;AACtD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,KAAK,qBAAwC,CAAC;AACpD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,UAAU,qBAA6C,CAAC;AAC9D,QAAA,MAAM,IAAI,qBAAuC,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAE1F;;;;;GAKG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,SAAS,EACT,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAC/D,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,WAUzB,CAAC"}

package/dist/Theme/index.js

@@ -3,27 +3,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemesList = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
-const theme_1 = __importDefault(require("./Default/theme"));
-exports.lavender = theme_1.default;
-const theme_2 = __importDefault(require("./Meadow/theme"));
-exports.meadow = theme_2.default;
-const theme_3 = __importDefault(require("./Radiant/theme"));
-exports.radiant = theme_3.default;
-const theme_4 = __importDefault(require("./Skyline/theme"));
-exports.skyline = theme_4.default;
-const theme_5 = __importDefault(require("./Slate/theme"));
-exports.slate = theme_5.default;
-const theme_6 = __importDefault(require("./Emerald/theme"));
-exports.emerald = theme_6.default;
-const theme_7 = __importDefault(require("./Rosewood/theme"));
-exports.rosewood = theme_7.default;
+exports.brandThemes = exports.ThemesList = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
+const createBrandTheme_1 = __importDefault(require("./chakra/createBrandTheme"));
+const brands_1 = require("./tokens/brands");
+/**
+ * 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 = (0, createBrandTheme_1.default)(brands_1.lightPalettes.lavender);
+exports.lavender = lavender;
+const meadow = (0, createBrandTheme_1.default)(brands_1.lightPalettes.meadow);
+exports.meadow = meadow;
+const radiant = (0, createBrandTheme_1.default)(brands_1.lightPalettes.radiant);
+exports.radiant = radiant;
+const skyline = (0, createBrandTheme_1.default)(brands_1.lightPalettes.skyline);
+exports.skyline = skyline;
+const slate = (0, createBrandTheme_1.default)(brands_1.lightPalettes.slate);
+exports.slate = slate;
+const emerald = (0, createBrandTheme_1.default)(brands_1.lightPalettes.emerald);
+exports.emerald = emerald;
+const rosewood = (0, createBrandTheme_1.default)(brands_1.lightPalettes.rosewood);
+exports.rosewood = rosewood;
+const storefront = (0, createBrandTheme_1.default)(brands_1.lightPalettes.storefront);
+exports.storefront = storefront;
+const zinc = (0, createBrandTheme_1.default)(brands_1.lightPalettes.zinc);
+exports.zinc = 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.
+ */
 exports.ThemesList = {
-    lavender: theme_1.default,
-    meadow: theme_2.default,
-    skyline: theme_4.default,
-    emerald: theme_6.default,
-    rosewood: theme_7.default,
-    slate: theme_5.default,
-    radiant: theme_3.default,
+    lavender: lavender,
+    meadow: meadow,
+    skyline: skyline,
+    emerald: emerald,
+    rosewood: rosewood,
+    slate: slate,
+    radiant: radiant,
+    storefront: storefront,
+    zinc: zinc,
+};
+/** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
+exports.brandThemes = {
+    lavender: { light: lavender, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.lavender, { colorMode: "dark" }) },
+    meadow: { light: meadow, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.meadow, { colorMode: "dark" }) },
+    radiant: { light: radiant, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.radiant, { colorMode: "dark" }) },
+    skyline: { light: skyline, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.skyline, { colorMode: "dark" }) },
+    slate: { light: slate, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.slate, { colorMode: "dark" }) },
+    emerald: { light: emerald, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.emerald, { colorMode: "dark" }) },
+    rosewood: { light: rosewood, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.rosewood, { colorMode: "dark" }) },
+    storefront: { light: storefront, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.storefront, { colorMode: "dark" }) },
+    zinc: { light: zinc, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.zinc, { colorMode: "dark" }) },
 };

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

@@ -0,0 +1,46 @@
+import React from "react";
+import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
+export type ThemeModeContextValue = {
+    mode: ColorMode;
+    resolvedMode: ResolvedColorMode;
+    setMode: (mode: ColorMode) => void;
+    toggle: () => void;
+    brand: ThemeName;
+    setBrand: (brand: ThemeName) => void;
+};
+export type PixelizeThemeProviderProps = {
+    children: React.ReactNode;
+    /** Initial brand. A persisted brand wins over this. */
+    brand?: ThemeName;
+    /** Initial color mode. A persisted mode wins over this. */
+    defaultMode?: ColorMode;
+    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>;
+/**
+ * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
+ *
+ * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
+ * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
+ * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
+ * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
+ * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
+ *
+ * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
+ * That is correct here — the palette has already resolved the mode, so the "light" argument is
+ * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
+ * unaffected: they are light-only, where that argument was always the one returned anyway.
+ */
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, defaultMode, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PixelizeThemeProvider.d.ts.map

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

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