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

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import "./global.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAiFX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAWA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAsGX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
+const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
+const NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
+const useSidebarPrefs_1 = require("./Hooks/useSidebarPrefs");
+const provider_1 = require("./Theme/provider");
+const useCustomTheme_1 = require("./Theme/useCustomTheme");
+const Layout_1 = __importDefault(require("./Layout"));
+require("./global.css");
+// --- Static demo data (module scope so it isn't re-created each render) ------
+const menu = [
+    {
+        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
+        secondaryItems: [
+            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
+            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+    {
+        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
+        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
+    },
+    {
+        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
+            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
+        ],
+    },
+    {
+        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 33, title: "SubMenu1", url: "submenu1" },
+            { id: 34, title: "SubMenu2", url: "submenu2" },
+        ],
+    },
+    {
+        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
+        subMenu: [
+            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
+            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+];
+const navmenus = [
+    { title: "Account Settings", url: "myaccount", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cuboid, {}) },
+    { title: "Reset password", url: "resetpassword" },
+    { title: "Billing", url: "billing" },
+    { title: "Notifications", url: "notifications" },
+];
+function useWindowSize() {
+    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
+}
+function App() {
+    const { height } = useWindowSize();
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Persisted layout choices — restored to exactly the same state on reload/new
+    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
+    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
+    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
+    // so this app does not re-implement the navbar-mode/drawer behavior.
+    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = (0, useSidebarPrefs_1.useSidebarPrefs)();
+    const [activeMenu, setActiveMenu] = (0, react_1.useState)(2);
+    const [activeSecondaryItem, setActiveSecondaryItem] = (0, react_1.useState)(null);
+    const handleMenuClick = (menu) => {
+        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
+        setActiveSecondaryItem(null);
+    };
+    const handleSecondaryNavClick = (item) => {
+        var _a, _b;
+        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
+    };
+    const handleNavOnClick = () => { };
+    const handleLogout = () => { };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
+                                        text: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Dashboard" }),
+                                        onIconClick: () => { },
+                                    }, moreIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, {}) }, "navbar"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "icon" })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: (0, jsx_runtime_1.jsx)(Layout_1.default, {}) })] })] })] }) }));
+}
+exports.default = App;

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,30 @@
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,QAAA,MAAM,SAAS,GAAI,+EAQhB,cAAc,4CA+FhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAelD,QAAA,MAAM,SAAS,GAAI,+EAQhB,cAAc,4CAkGhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/Accordion/Accordion.js

@@ -1,23 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const border = (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[200];
-    const headingColor = (_f = (_e = c.text) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[800];
-    const bodyColor = (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[600];
-    const softHover = (_o = (_m = (_l = c.table) === null || _l === void 0 ? void 0 : _l.hover) === null || _m === void 0 ? void 0 : _m[100]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[50];
-    const expandedBg = (_s = (_r = (_q = c.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[8]) !== null && _s !== void 0 ? _s : (_t = c.gray) === null || _t === void 0 ? void 0 : _t[50];
-    return ((0, jsx_runtime_1.jsx)(react_1.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e;
-            return ((0, jsx_runtime_1.jsx)(react_1.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_a = c.white) !== null && _a !== void 0 ? _a : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300] }, ...item.itemProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.itemStyle, children: ({ isExpanded }) => {
+    const isDark = (0, accentText_1.isDarkCanvas)((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
+    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
+    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
+    const { expandedBg, softHover } = (0, react_1.useMemo)(() => { var _a; return (0, accordionColors_1.getAccordionHoverColors)((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f;
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[300] }, ...item.itemProps, sx: (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_1.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
                                         outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
                                         outlineOffset: "-0.125rem",
@@ -26,7 +29,7 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
                                         "&:hover": {
                                             ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
                                         },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/accordionColors.d.ts

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const getAccordionHoverColors: (colors: PaletteProps, isDark: boolean) => {
+    expandedBg: string;
+    softHover: string;
+};
+//# sourceMappingURL=accordionColors.d.ts.map

package/dist/Components/Accordion/accordionColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionColors.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/accordionColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,GAClC,QAAQ,YAAY,EACpB,QAAQ,OAAO,KACd;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAczC,CAAC"}

package/dist/Components/Accordion/accordionColors.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAccordionHoverColors = void 0;
+const getAccordionHoverColors = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    if (isDark) {
+        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
+        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
+        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
+        return {
+            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
+            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+        };
+    }
+    return {
+        expandedBg: (_o = (_m = (_l = colors.primary) === null || _l === void 0 ? void 0 : _l.opacity) === null || _m === void 0 ? void 0 : _m[8]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[50],
+        softHover: (_s = (_r = (_q = colors.table) === null || _q === void 0 ? void 0 : _q.hover) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : (_t = colors.gray) === null || _t === void 0 ? void 0 : _t[50],
+    };
+};
+exports.getAccordionHoverColors = getAccordionHoverColors;

package/dist/Components/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/Components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,QAAA,MAAM,WAAW,GAAI,+OAmBlB,iBAAiB,4CAiCnB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/Components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,QAAA,MAAM,WAAW,GAAI,+OAmBlB,iBAAiB,4CAkCnB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/AlertDialog/AlertDialog.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: null, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: null, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
 };
 exports.default = AlertDialog;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexBarChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AASxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,MAAY,EACZ,KAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,2CAqFnB"}
+{"version":3,"file":"ApexBarChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,MAAY,EACZ,KAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,2CAwFnB"}

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -8,7 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, }) {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
@@ -18,6 +19,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
     const mergedYAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...yAxisStyle, color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, yAxisStyle]);
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const dataLabelColor = palette.primary[500];
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const options = (0, react_1.useMemo)(() => ({
         chart: {
             type: "bar",
@@ -53,6 +55,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
             style: mergedTitleStyle,
         },
         colors: resolvedBarColors,
+        theme: { mode: chartThemeMode },
     }), [
         labels,
         mergedXAxis,
@@ -62,6 +65,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         mergedTitleStyle,
         resolvedBarColors,
         dataLabelColor,
+        chartThemeMode,
     ]);
     const series = [
         {

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexLineChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexLineChart/ApexLineChart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAU1D,QAAA,MAAM,aAAa,GAAI,6LAgBpB,kBAAkB,4CAqLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ApexLineChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexLineChart/ApexLineChart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS1D,QAAA,MAAM,aAAa,GAAI,6LAgBpB,kBAAkB,4CAmLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -8,11 +8,13 @@ const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
     const [apexSeries, setApexSeries] = (0, react_1.useState)([
@@ -113,6 +115,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
         dataLabels: { enabled: false },
         grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
+        theme: { mode: chartThemeMode },
     }), [
         variant,
         showToolbar,
@@ -123,10 +126,9 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         titlePosition,
         resolvedTitleStyle,
         showSeries,
+        chartThemeMode,
     ]);
-    const tooltipBg = (0, chartColorsFromTheme_1.chartTooltipBackground)(palette);
-    const tooltipFg = (0, chartColorsFromTheme_1.chartTooltipForeground)(palette);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: tooltipBg, color: tooltipFg, isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
                         textAlign: "left",
                         color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                         fontSize: computedFontSize,

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexPieChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkBxD,QAAA,MAAM,YAAY,GAAI,mIAanB,iBAAiB,4CA4KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ApexPieChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAmBxD,QAAA,MAAM,YAAY,GAAI,mIAanB,iBAAiB,4CA+KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -7,7 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -20,6 +21,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
     var _a;
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
@@ -146,6 +148,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             },
             dataLabels: { enabled: true },
             ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
         };
     }, [
         variant,
@@ -156,6 +159,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         title,
         titlePosition,
         mergedTitleStyle,
+        chartThemeMode,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
 };

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexPolarCharts.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAO7D,QAAA,MAAM,cAAc,GAAI,uGAWrB,mBAAmB,4CA6FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ApexPolarCharts.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,GAAI,uGAWrB,mBAAmB,4CAgGrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -7,10 +7,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
@@ -64,6 +66,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
             },
             dataLabels: { enabled: true },
             ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
         };
     }, [
         variant,
@@ -74,6 +77,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         titlePosition,
         mergedTitleStyle,
         palette.white,
+        chartThemeMode,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
 };

package/dist/Components/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,oBA6JpB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,kBAAkB,CAAC;AA+C5E,eAAO,MAAM,MAAM,EAAE,oBA+KpB,CAAC"}

package/dist/Components/Button/Button.styles.js

@@ -1,6 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/**
+ * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
+ * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
+ * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
+ * are pixel-identical.
+ */
+const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
+/**
+ * Ghost hover tint: translucent accent composited over whatever is behind it, so one value works
+ * on either canvas. The `[50]` rung it replaces sits ~1.04 against its own canvas in BOTH modes —
+ * a hover state you cannot see. Utility scales (red, green…) carry no `opacity` ramp, so they keep
+ * `[50]`.
+ */
+const onCanvasHoverBg = (theme, colorScheme, step) => {
+    var _a, _b;
+    const scale = theme.colors[colorScheme];
+    return (_b = (_a = scale.opacity) === null || _a === void 0 ? void 0 : _a[step]) !== null && _b !== void 0 ? _b : scale[50];
+};
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark. Hardcoding [600] would hand the label a LIGHTER fill in dark and drop it to
+ * ~3.2 contrast.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const darkerFill = (theme, colorScheme, step) => {
+    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
+    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+};
+/** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
+const labelFor = (theme, fill) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
 exports.Button = {
     baseStyle: () => ({
         borderRadius: "0.5rem",
@@ -13,70 +48,88 @@ exports.Button = {
         },
     }),
     variants: {
-        solid: ({ theme, colorScheme = "primary" }) => ({
-            bg: theme.colors[colorScheme][500],
-            color: theme.colors.white,
-            _hover: {
-                bg: theme.colors[colorScheme][600],
-                boxShadow: "sm",
-                _disabled: {
-                    bg: theme.colors[colorScheme][600], // keep hover color on loading
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const fill = theme.colors[colorScheme][500];
+            const hoverFill = darkerFill(theme, colorScheme, 0);
+            const activeFill = darkerFill(theme, colorScheme, 1);
+            const hoverLabel = labelFor(theme, hoverFill);
+            return {
+                bg: fill,
+                color: labelFor(theme, fill),
+                _hover: {
+                    bg: hoverFill,
+                    color: hoverLabel,
+                    boxShadow: "sm",
+                    _disabled: {
+                        bg: hoverFill, // keep hover color on loading
+                        color: hoverLabel,
+                    },
                 },
-            },
-            _active: {
-                bg: theme.colors[colorScheme][700],
-                boxShadow: "none",
-            },
-            _loading: {
-                bg: theme.colors[colorScheme][600], // keep hover color while loading
+                _active: {
+                    bg: activeFill,
+                    color: labelFor(theme, activeFill),
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bg: hoverFill, // keep hover color while loading
+                    color: hoverLabel,
+                    _hover: {
+                        bg: hoverFill,
+                        color: hoverLabel,
+                    },
+                },
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const hoverFill = theme.colors[colorScheme][500];
+            const activeFill = darkerFill(theme, colorScheme, 0);
+            return {
+                border: "0.1rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: onCanvasText(theme, colorScheme),
+                bg: "transparent",
                 _hover: {
-                    bg: theme.colors[colorScheme][600],
+                    bg: hoverFill,
+                    borderColor: activeFill,
+                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
+                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
+                    color: labelFor(theme, hoverFill),
+                    _disabled: {
+                        //  bg: theme.colors[colorScheme][500],
+                        color: onCanvasText(theme, colorScheme),
+                    },
                 },
-            },
-        }),
-        outline: ({ theme, colorScheme = "primary" }) => ({
-            border: "0.1rem solid",
-            borderColor: theme.colors[colorScheme][500],
-            color: theme.colors[colorScheme][500],
-            bg: "transparent",
-            _hover: {
-                bg: theme.colors[colorScheme][500],
-                borderColor: theme.colors[colorScheme][600],
-                color: theme.colors.white,
-                _disabled: {
-                    //  bg: theme.colors[colorScheme][500],
-                    color: theme.colors[colorScheme][500],
+                _active: {
+                    bg: activeFill,
+                    color: labelFor(theme, activeFill),
                 },
-            },
-            _active: {
-                bg: theme.colors[colorScheme][600],
-                color: theme.colors.white,
-            },
-            _loading: {
-                // bg: theme.colors[colorScheme][500],
-                color: theme.colors[colorScheme][500],
-            },
-        }),
+                _loading: {
+                    // bg: theme.colors[colorScheme][500],
+                    color: onCanvasText(theme, colorScheme),
+                },
+            };
+        },
         ghost: ({ theme, colorScheme = "primary" }) => ({
-            color: theme.colors[colorScheme][500],
+            color: onCanvasText(theme, colorScheme),
             bg: "transparent",
             _hover: {
-                bg: theme.colors[colorScheme][50],
+                bg: onCanvasHoverBg(theme, colorScheme, 16),
+                color: onCanvasText(theme, colorScheme),
             },
             _active: {
-                bg: theme.colors[colorScheme][50],
+                bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
-            color: theme.colors[colorScheme][500],
+            color: onCanvasText(theme, colorScheme),
             textDecoration: "underline",
             bg: "transparent",
             _hover: {
-                color: theme.colors[colorScheme][600],
+                color: onCanvasText(theme, colorScheme),
                 textDecoration: "none",
             },
             _active: {
-                color: theme.colors[colorScheme][600],
+                color: onCanvasText(theme, colorScheme),
             },
         }),
         unstyled: () => ({
@@ -98,7 +151,7 @@ exports.Button = {
             const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
             return {
                 bgImage: bg,
-                color: theme.colors.white,
+                color: (0, accentText_1.onGradient)(g.from, g.to, theme.colors.white, theme.colors.black),
                 border: "none",
                 _hover: {
                     bgImage: bg,

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupIcon.d.ts","sourceRoot":"","sources":["../../../src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EAAE,gCAAgC;AACjD,qBAAqB,EAAE,mCAAmC;AAC1D,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,SAAS,EACT,OAAc,EACb,eAAe,EACf,gBAAgB,GAEjB,EAAE,oBAAoB,2CA8LtB"}
+{"version":3,"file":"ButtonGroupIcon.d.ts","sourceRoot":"","sources":["../../../src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAI7D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EAAE,gCAAgC;AACjD,qBAAqB,EAAE,mCAAmC;AAC1D,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,SAAS,EACT,OAAc,EACb,eAAe,EACf,gBAAgB,GAEjB,EAAE,oBAAoB,2CA0MtB"}