pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

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

@@ -14,16 +14,19 @@ export declare const Popover: {
             [$arrowShadowColor.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
         };
     }) | 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?: {
@@ -31,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,22 +7,18 @@ 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.border[200],
+            [$arrowShadowColor.variable]: colors.boxborder[200],
             color: colors.text[900],
+            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",
     },
 };

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

@@ -10,14 +10,27 @@ declare const $alertBg: {
 export declare const componentStyles: {
     Alert: {
         baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+            keys: ("container" | "icon" | "spinner" | "title" | "description")[];
         }> | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+                keys: ("container" | "icon" | "spinner" | "title" | "description")[];
             }>;
         } | undefined;
         variants?: {
+            subtle: ({ theme, colorScheme }: StyleFunctionProps) => {
+                container: {
+                    borderRadius: string;
+                    color?: undefined;
+                };
+            } | {
+                container: {
+                    [$alertBg.variable]: string;
+                    [$alertFg.variable]: string;
+                    color: string;
+                    borderRadius: string;
+                };
+            };
             solid: ({ theme, colorScheme }: StyleFunctionProps) => {
                 container: {
                     [$alertBg.variable]: string;
@@ -27,10 +40,10 @@ export declare const componentStyles: {
         } | undefined;
         defaultProps?: {
             size?: string | number | undefined;
-            variant?: "solid" | undefined;
+            variant?: "solid" | "subtle" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("title" | "container" | "icon" | "spinner" | "description")[];
+        parts: ("container" | "icon" | "spinner" | "title" | "description")[];
     };
     Checkbox: ComponentStyleConfig;
     Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
@@ -41,23 +54,108 @@ export declare const componentStyles: {
     Textarea: ComponentStyleConfig;
     NumberInput: ComponentStyleConfig;
     Badge: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    Card: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            container: {
+                [x: string]: string | {
+                    paddingTop: number;
+                };
+                color: string;
+                "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": {
+                    paddingTop: number;
+                };
+            };
+            header: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+        }) | undefined;
+        sizes?: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            md: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        variants?: {
+            outline: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: "sm" | "md" | "lg" | undefined;
+            variant?: "outline" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("header" | "container" | "body" | "footer")[];
+    };
     FormError: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Drawer: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: 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?: {
@@ -65,7 +163,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -73,9 +171,17 @@ export declare const componentStyles: {
                 [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
                 borderColor: string;
             };
             item: {
+                minH: string;
+                px: string;
+                py: string;
+                mx: string;
+                fontSize: string;
+                borderRadius: string;
                 bg: string;
                 _focus: {
                     [x: string]: string;
@@ -97,12 +203,12 @@ export declare const componentStyles: {
         }) | 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?: {
@@ -110,24 +216,62 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+        parts: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
     };
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: 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?: {
@@ -135,7 +279,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -143,16 +287,19 @@ export declare const componentStyles: {
                 [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
         }) | 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?: {
@@ -160,7 +307,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+        parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -171,94 +318,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-    };
-    Switch: {
-        baseStyle?: (({ theme }: StyleFunctionProps) => {
-            thumb: {
-                [x: string]: string;
-                bg: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("label" | "track" | "container" | "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]: string;
-                    };
-                };
-            };
-            "enclosed-colored": ({ theme }: StyleFunctionProps) => {
-                tab: {
-                    _selected: {
-                        [x: string]: string;
-                    };
-                };
-            };
-        } | 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]: string;
-            };
-            container: {
-                [x: string]: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -266,7 +331,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+        parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;