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

package/dist/Theme/chakra/Switch.styles.d.ts

@@ -0,0 +1,31 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $thumbBg: {
+    variable: string;
+    reference: string;
+};
+export declare const Switch: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        thumb: {
+            [$thumbBg.variable]: any;
+            bg: string;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "track" | "thumb")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "track" | "thumb")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "label" | "track" | "thumb")[];
+};
+export {};
+//# sourceMappingURL=Switch.styles.d.ts.map

package/dist/Theme/chakra/Switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Switch.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,QAAQ;;;CAA4B,CAAC;AAc3C,eAAO,MAAM,MAAM;6BAP4B,kBAAkB;;YAE7D,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;CAOvG,CAAC"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
+const $thumbBg = (0, react_1.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,
+        },
+    });
+});
+exports.Switch = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Tabs.styles.d.ts

@@ -0,0 +1,43 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+declare const $border: {
+    variable: string;
+    reference: string;
+};
+export declare const Tabs: {
+    baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
+        keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+    }> | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+        }>;
+    } | undefined;
+    variants?: {
+        enclosed: ({ theme }: StyleFunctionProps) => {
+            tab: {
+                _selected: {
+                    [$border.variable]: any;
+                };
+            };
+        };
+        "enclosed-colored": ({ theme }: StyleFunctionProps) => {
+            tab: {
+                _selected: {
+                    [$bg.variable]: any;
+                };
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "enclosed" | "enclosed-colored" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+};
+export {};
+//# sourceMappingURL=Tabs.styles.d.ts.map

package/dist/Theme/chakra/Tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Tabs.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAoB,CAAC;AAC9B,QAAA,MAAM,OAAO;;;CAA8B,CAAC;AAyB5C,eAAO,MAAM,IAAI;;;;;;;;;;8BAhBoC,kBAAkB;;;oBAGjE,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAkF;;;;wCAK9C,kBAAkB;;;oBAGxE,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;CAUpG,CAAC"}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.tabsAnatomy.keys);
+const $bg = (0, react_1.cssVar)("tabs-bg");
+const $border = (0, react_1.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 }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        tab: {
+            _selected: {
+                [$border.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",
+            },
+        },
+    });
+});
+const variantEnclosedColored = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        tab: {
+            _selected: {
+                [$bg.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",
+            },
+        },
+    });
+});
+exports.Tabs = defineMultiStyleConfig({
+    variants: {
+        enclosed: variantEnclosed,
+        "enclosed-colored": variantEnclosedColored,
+    },
+});

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

@@ -1 +1 @@
-{"version":3,"file":"common.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/common.web.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"common.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/common.web.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeX,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -15,7 +15,10 @@ const common = {
     radii: primitives_1.radii,
     zIndices: primitives_1.zIndices,
     config: {
-        cssVarPrefix: "ck",
+        // 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",
     },
 };
 exports.default = common;

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

@@ -1,6 +1,7 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
+import { ComponentStyleConfig, StyleFunctionProps } from "@chakra-ui/react";
 export declare const componentStyles: {
     Checkbox: ComponentStyleConfig;
+    Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Input: ComponentStyleConfig;
     Button: ComponentStyleConfig;
     Select: ComponentStyleConfig;
@@ -9,5 +10,233 @@ export declare const componentStyles: {
     NumberInput: ComponentStyleConfig;
     Badge: import("@chakra-ui/react").ComponentSingleStyleConfig;
     FormError: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    Drawer: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            dialog: {
+                [x: string]: any;
+                bg: string;
+                color: any;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+    };
+    Menu: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            list: {
+                [x: string]: any;
+                bg: string;
+                color: any;
+            };
+            item: {
+                bg: string;
+                _focus: {
+                    [x: string]: any;
+                    bg: string;
+                };
+                _hover: {
+                    [x: string]: any;
+                    bg: string;
+                };
+                _active: {
+                    [x: string]: any;
+                    bg: string;
+                };
+                _expanded: {
+                    [x: string]: any;
+                    bg: string;
+                };
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+    };
+    Modal: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            dialog: {
+                [x: string]: any;
+                bg: string;
+                color: any;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+    };
+    Popover: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            content: {
+                [x: string]: any;
+                bg: string;
+                color: any;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+    };
+    Slider: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            thumb: {
+                [x: string]: any;
+                bg: string;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+    };
+    Switch: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            thumb: {
+                [x: string]: any;
+                bg: string;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "label" | "track" | "thumb")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "label" | "track" | "thumb")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("container" | "label" | "track" | "thumb")[];
+    };
+    Tabs: {
+        baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+        }> | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+            }>;
+        } | undefined;
+        variants?: {
+            enclosed: ({ theme }: StyleFunctionProps) => {
+                tab: {
+                    _selected: {
+                        [x: string]: any;
+                    };
+                };
+            };
+            "enclosed-colored": ({ theme }: StyleFunctionProps) => {
+                tab: {
+                    _selected: {
+                        [x: string]: any;
+                    };
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: "enclosed" | "enclosed-colored" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
+    };
+    Avatar: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            badge: {
+                [x: string]: any;
+            };
+            container: {
+                [x: string]: any;
+            };
+        }) | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+            }>;
+        } | undefined;
+        variants?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+            }>;
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: string | number | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+    };
+    Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    CloseButton: import("@chakra-ui/react").ComponentSingleStyleConfig;
 };
 //# sourceMappingURL=componentStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,kBAAkB,CAAC;AA2E5E,eAAO,MAAM,eAAe;;;;;;;;;;CAU3B,CAAC"}
+{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAU,MAAM,kBAAkB,CAAC;AAqMpF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB3B,CAAC"}

package/dist/Theme/chakra/componentStyles.js

@@ -1,6 +1,7 @@
 "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");
@@ -10,6 +11,15 @@ const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextA
 const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
 const accentText_1 = require("../tokens/builders/accentText");
 const color_1 = require("../tokens/builders/color");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
+const Drawer_styles_1 = require("./Drawer.styles");
+const Menu_styles_1 = require("./Menu.styles");
+const Modal_styles_1 = require("./Modal.styles");
+const Popover_styles_1 = require("./Popover.styles");
+const Slider_styles_1 = require("./Slider.styles");
+const Switch_styles_1 = require("./Switch.styles");
+const Tabs_styles_1 = require("./Tabs.styles");
+const Avatar_styles_1 = require("./Avatar.styles");
 // `colorScheme` accepts any Chakra scale, including built-ins we never themed (blackAlpha,
 // whiteAlpha) whose rungs are translucent `rgba(...)` strings, not opaque hex — our contrast
 // math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
@@ -75,8 +85,123 @@ const FormError = {
         };
     },
 };
+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,
@@ -85,4 +210,15 @@ exports.componentStyles = {
     NumberInput: NumberInput_styles_1.NumberInput,
     Badge,
     FormError,
+    Drawer: Drawer_styles_1.Drawer,
+    Menu: Menu_styles_1.Menu,
+    Modal: Modal_styles_1.Modal,
+    Popover: Popover_styles_1.Popover,
+    Slider: Slider_styles_1.Slider,
+    Switch: Switch_styles_1.Switch,
+    Tabs: Tabs_styles_1.Tabs,
+    Avatar: Avatar_styles_1.Avatar,
+    Skeleton,
+    Tooltip,
+    CloseButton,
 };

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

@@ -1 +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;AAMvE,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,wBAwDtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"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

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