pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.modalAnatomy.keys);
@@ -11,16 +12,13 @@ const $bg = (0, react_1.cssVar)("modal-bg");
  * `<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 }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        dialog: {
-            [$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",
-            bg: $bg.reference,
-            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
-        },
-    });
-});
+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],
+    },
+}));
 exports.Modal = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -10,20 +10,23 @@ declare const $arrowShadowColor: {
 export declare const Popover: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         content: {
-            [$popperBg.variable]: any;
-            [$arrowShadowColor.variable]: any;
+            [$popperBg.variable]: string;
+            [$arrowShadowColor.variable]: string;
             bg: string;
-            color: any;
+            color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+            keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+            keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -31,6 +34,6 @@ export declare const Popover: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+    parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
 };
 export {};

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+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");
@@ -15,15 +16,19 @@ const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
  * fixing `$popperBg` here fixes the arrow fill too.
  */
 const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    return ({
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    return {
         content: {
-            [$popperBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            [$popperBg.variable]: colors.backgroundColor.light,
             bg: $popperBg.reference,
-            [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
-            color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
+            [$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],
         },
-    });
+    };
 });
 exports.Popover = defineMultiStyleConfig({
     baseStyle,

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

@@ -6,7 +6,7 @@ declare const $thumbBg: {
 export declare const Slider: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         thumb: {
-            [$thumbBg.variable]: any;
+            [$thumbBg.variable]: string;
             bg: string;
         };
     }) | undefined;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
 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);
@@ -11,15 +12,12 @@ const $thumbBg = (0, react_1.cssVar)("slider-thumb-bg");
  * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
  * same bug class as Menu/Modal but without even the dead `_dark` branch.
  */
-const baseStyle = definePartsStyle(({ theme }) => {
-    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,
-        },
-    });
-});
+const baseStyle = definePartsStyle(({ theme }) => ({
+    thumb: {
+        [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 exports.Slider = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -6,7 +6,7 @@ declare const $thumbBg: {
 export declare const Switch: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         thumb: {
-            [$thumbBg.variable]: any;
+            [$thumbBg.variable]: string;
             bg: string;
         };
     }) | undefined;

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

@@ -3,6 +3,7 @@ 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 paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
 const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
 /**
@@ -10,15 +11,12 @@ const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
  * `_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,
-        },
-    });
-});
+const baseStyle = definePartsStyle(({ theme }) => ({
+    thumb: {
+        [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 exports.Switch = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -20,14 +20,14 @@ export declare const Tabs: {
         enclosed: ({ theme }: StyleFunctionProps) => {
             tab: {
                 _selected: {
-                    [$border.variable]: any;
+                    [$border.variable]: string;
                 };
             };
         };
         "enclosed-colored": ({ theme }: StyleFunctionProps) => {
             tab: {
                 _selected: {
-                    [$bg.variable]: any;
+                    [$bg.variable]: string;
                 };
             };
         };

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
 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);
@@ -13,26 +14,20 @@ const $border = (0, react_1.cssVar)("tabs-border-color");
  * 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 variantEnclosed = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$border.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
         },
-    });
-});
-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",
-            },
+    },
+}));
+const variantEnclosedColored = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
         },
-    });
-});
+    },
+}));
 exports.Tabs = defineMultiStyleConfig({
     variants: {
         enclosed: variantEnclosed,

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

@@ -1,5 +1,37 @@
 import { ComponentStyleConfig, StyleFunctionProps } from "@chakra-ui/react";
+declare const $alertFg: {
+    variable: string;
+    reference: string;
+};
+declare const $alertBg: {
+    variable: string;
+    reference: string;
+};
 export declare const componentStyles: {
+    Alert: {
+        baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+        }> | undefined;
+        sizes?: {
+            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+                keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+            }>;
+        } | undefined;
+        variants?: {
+            solid: ({ theme, colorScheme }: StyleFunctionProps) => {
+                container: {
+                    [$alertBg.variable]: string;
+                    [$alertFg.variable]: string;
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: string | number | undefined;
+            variant?: "solid" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("title" | "container" | "icon" | "spinner" | "description")[];
+    };
     Checkbox: ComponentStyleConfig;
     Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Input: ComponentStyleConfig;
@@ -13,19 +45,19 @@ export declare const componentStyles: {
     Drawer: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -33,31 +65,34 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
             item: {
                 bg: string;
                 _focus: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _hover: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _active: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _expanded: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
             };
@@ -82,19 +117,19 @@ export declare const componentStyles: {
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -102,24 +137,27 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -127,12 +165,12 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+        parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             thumb: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
             };
         }) | undefined;
@@ -156,7 +194,7 @@ export declare const componentStyles: {
     Switch: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             thumb: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
             };
         }) | undefined;
@@ -190,14 +228,14 @@ export declare const componentStyles: {
             enclosed: ({ theme }: StyleFunctionProps) => {
                 tab: {
                     _selected: {
-                        [x: string]: any;
+                        [x: string]: string;
                     };
                 };
             };
             "enclosed-colored": ({ theme }: StyleFunctionProps) => {
                 tab: {
                     _selected: {
-                        [x: string]: any;
+                        [x: string]: string;
                     };
                 };
             };
@@ -212,20 +250,20 @@ export declare const componentStyles: {
     Avatar: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             badge: {
-                [x: string]: any;
+                [x: string]: string;
             };
             container: {
-                [x: string]: any;
+                [x: string]: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -233,9 +271,10 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+        parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;
     CloseButton: import("@chakra-ui/react").ComponentSingleStyleConfig;
 };
+export {};