pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

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

@@ -1,24 +1,57 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 export declare const Drawer: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        overlay: {
+            bg: string;
+            backdropFilter: string;
+        };
+        header: {
+            px: number;
+            py: number;
+            pe: number;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+            color: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        closeButton: {
+            top: number;
+            insetEnd: number;
+        };
+        body: {
+            px: number;
+            py: number;
+        };
+        footer: {
+            px: number;
+            py: number;
+            display: string;
+            justifyContent: string;
+            gap: number;
+            borderTopWidth: string;
+            borderTopStyle: string;
+            borderTopColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +59,5 @@ export declare const Drawer: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
 };
-export {};

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

@@ -4,21 +4,22 @@ exports.Drawer = void 0;
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
 const $bg = (0, react_1.cssVar)("drawer-bg");
-/**
- * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
- * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
- * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    dialog: {
-        [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: (0, paletteFromTheme_1.paletteOf)(theme).text[900],
-    },
-}));
+// Chakra's stock `--drawer-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    const parts = (0, overlay_styles_1.dialogPartStyles)(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+        },
+    };
+});
 exports.Drawer = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -3,21 +3,6 @@ declare const $bg: {
     variable: string;
     reference: string;
 };
-/**
- * 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.
- */
 declare const $itemBg: {
     variable: string;
     reference: string;
@@ -54,12 +39,12 @@ export declare const Menu: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+            keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+            keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -67,6 +52,6 @@ export declare const Menu: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+    parts: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
 };
 export {};

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

@@ -7,21 +7,7 @@ const rowStates_1 = require("../tokens/builders/rowStates");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.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.
- */
+// NOTE: fixes Chakra's MenuList/MenuItem both hardcoding --menu-bg to white via dead _dark — item needs its own var too, or hover snaps back to white.
 const $itemBg = (0, react_1.cssVar)("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = (0, paletteFromTheme_1.paletteOf)(theme);
@@ -30,20 +16,13 @@ const baseStyle = definePartsStyle(({ theme }) => {
     const activeBg = rowBgs.selectedActive;
     return {
         list: {
-            [$bg.variable]: colors.backgroundColor.light,
+            [$bg.variable]: colors.surfaceRaised,
             bg: $bg.reference,
             color: colors.text[900],
-            // A rule at CHROME_RULE weight, not Chakra's gray.200: that default read as a hard edge,
-            // which is why this shipped borderless. At 1.31:1 the edge defines the surface instead.
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
         },
-        // 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 },

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

@@ -1,24 +1,58 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 export declare const Modal: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: string;
             bg: string;
+            borderRadius: string;
+            color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        overlay: {
+            bg: string;
+            backdropFilter: string;
+        };
+        header: {
+            px: number;
+            py: number;
+            pe: number;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
             color: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        closeButton: {
+            top: number;
+            insetEnd: number;
+        };
+        body: {
+            px: number;
+            py: number;
+        };
+        footer: {
+            px: number;
+            py: number;
+            display: string;
+            justifyContent: string;
+            gap: number;
+            borderTopWidth: string;
+            borderTopStyle: string;
+            borderTopColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +60,5 @@ export declare const Modal: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
 };
-export {};

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

@@ -4,21 +4,23 @@ exports.Modal = void 0;
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.modalAnatomy.keys);
 const $bg = (0, react_1.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]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: (0, paletteFromTheme_1.paletteOf)(theme).text[900],
-    },
-}));
+// Chakra's stock `--modal-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    const parts = (0, overlay_styles_1.dialogPartStyles)(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+            borderRadius: "xl",
+        },
+    };
+});
 exports.Modal = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -21,12 +21,12 @@ export declare const Popover: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+            keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+            keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -34,6 +34,6 @@ export declare const Popover: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+    parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
 };
 export {};

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

@@ -7,23 +7,15 @@ const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
 const $popperBg = (0, react_1.cssVar)("popper-bg");
 const $arrowShadowColor = (0, react_1.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.
- */
+// NOTE: fixes Chakra's Popover hardcoding --popper-bg/#fff via dead `_dark` — fixing $popperBg also fixes the arrow fill.
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = (0, paletteFromTheme_1.paletteOf)(theme);
     return {
         content: {
-            [$popperBg.variable]: colors.backgroundColor.light,
+            [$popperBg.variable]: colors.surfaceRaised,
             bg: $popperBg.reference,
             [$arrowShadowColor.variable]: colors.boxborder[200],
             color: colors.text[900],
-            // Matches Menu: a CHROME_RULE-weight edge, not Chakra's gray.200 hard edge.
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],

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

@@ -12,12 +12,12 @@ export declare const Slider: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
+            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
+            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -25,6 +25,6 @@ export declare const Slider: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
+    parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
 };
 export {};

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

@@ -6,12 +6,7 @@ const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.sliderAnatomy.keys);
 const $thumbBg = (0, react_1.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.
- */
+// NOTE: fixes Chakra's SliderThumb hardcoding bg: "white" with no _dark gate at all.
 const baseStyle = definePartsStyle(({ theme }) => ({
     thumb: {
         [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,

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

@@ -1,7 +1,3 @@
-/**
- * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
- * concern, which is why this assembly lives here and not in `tokens/`.
- */
 declare const common: {
     lineHeights: {
         normal: string;

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

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const primitives_1 = require("../tokens/primitives");
-/**
- * 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: primitives_1.lineHeights,
     letterSpacings: primitives_1.letterSpacings,
@@ -15,9 +11,7 @@ const common = {
     radii: primitives_1.radii,
     zIndices: primitives_1.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.
+        // NOTE: must stay "chakra" — a custom prefix breaks every var(--chakra-colors-*) an app writes in plain CSS.
         cssVarPrefix: "chakra",
     },
 };