pixelize-design-library 2.4.2-beta.2 → 2.4.2-beta.21

package/dist/esm/Components/Table/components/TableHeader.js

@@ -7,6 +7,7 @@ import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js
 import TableFilters from "../filters/TableFilters.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
+import { useTableVariant } from "../variants/TableVariantContext.js";
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = useState(null);
     return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
@@ -18,30 +19,33 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
 export default memo(TableHeader);
 const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: variant.slot.centered ? "center" : "flex-start", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
 });
 const ContentSpacerCell = memo(({ noBorders }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
 });
 const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
 });
 const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out", 
         // Kept out of view until hover/focus so the header looks exactly as it did,
         // while staying in the DOM and reachable by Tab.
         opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.textMuted, _hover: {
             opacity: 1,
-            color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]),
+            color: accentTextOnCanvas(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
 });
 const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
     var _a;
     const [isHovered, setIsHovered] = useState(false);
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     const isFrozen = header.isFreeze;
     const leftOffset = isFrozen
         ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? 50 : 0)
@@ -77,7 +81,16 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
         document.addEventListener("mouseup", onMouseUp);
     };
     const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
-    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[300]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+    // Studio keeps the kebab out of the resting header — nine of them read louder than
+    // the labels. A column that is filtering or sorting keeps its control on show.
+    const showActions = variant.header.actions === "always" ||
+        isHovered ||
+        isSortActive ||
+        openFilterId === header.id ||
+        !!columnsSearch[header.id];
+    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+            ? "none"
+            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: "opacity 0.2s ease-in-out", _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";
@@ -86,7 +99,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
                                     direction = "none";
                                 }
                                 handleSort(header.id, direction);
-                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, theme.colors.table.hover[200]), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, variant.header.bg), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

package/dist/esm/Components/Table/components/TableSearch.js

@@ -25,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.border[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 export default TableSearch;

package/dist/esm/Components/Table/filters/ActiveFilters.js

@@ -4,6 +4,7 @@ import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import VeritcalDivider from "../../Divider/Divider.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = useCustomTheme();
@@ -34,24 +35,7 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
     if (activeFilters.length === 0) {
         return null;
     }
-    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: {
-            '&::-webkit-scrollbar': {
-                height: '6px',
-            },
-            '&::-webkit-scrollbar-track': {
-                background: theme.colors.gray[100],
-                borderRadius: 'base',
-            },
-            '&::-webkit-scrollbar-thumb': {
-                background: theme.colors.gray[400],
-                borderRadius: 'base',
-            },
-            '&::-webkit-scrollbar-thumb:hover': {
-                background: theme.colors.gray[500],
-            },
-            scrollbarWidth: 'thin',
-            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
                                 bg: theme.colors.blue[100],
                             }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                         textDecoration: "underline",

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -3,6 +3,7 @@ import { useImperativeHandle, useMemo, useState, useEffect } from "react";
 import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/react";
 import Checkbox from "../../Checkbox/Checkbox.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = useCustomTheme();
@@ -69,22 +70,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
-                    "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                    "&::-webkit-scrollbar-track": {
-                        background: theme.colors.gray[100],
-                        borderRadius: "sm",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                        background: theme.colors.gray[400],
-                        borderRadius: "sm",
-                    },
-                    "&::-webkit-scrollbar-thumb:hover": {
-                        background: theme.colors.gray[500],
-                    },
-                    scrollbarWidth: "thin",
-                    scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                }, children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
@@ -96,7 +82,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             ? theme.colors.primary[400]
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
                             bg: theme.colors.gray[50],
-                            borderColor: theme.colors.border[200],
+                            borderColor: theme.colors.boxborder[200],
                         }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
                                 } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 const MotionModalContent = motion(ModalContent);
@@ -47,16 +48,9 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.border[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
-                                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "sm" },
-                                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "sm" },
-                                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
-                                            scrollbarWidth: "thin",
-                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                                        }, children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[300], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -74,7 +68,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[300], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.border[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

package/dist/esm/Components/Table/variants/TableVariantContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useMemo } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { classicPreset } from "./classic.js";
+const TableVariantContext = createContext(null);
+export const TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the table as it always was — the default is a variant, not a gap. */
+export function useTableVariant() {
+    const provided = useContext(TableVariantContext);
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : classicPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

package/dist/esm/Components/Table/variants/classic.js

@@ -0,0 +1,43 @@
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: accentTextOnCanvas(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: colors.boxborder[200],
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: colors.boxborder[200],
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/index.js

@@ -0,0 +1,9 @@
+import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
+/** Adding a variant is one file and one union member — no component changes. */
+export const TABLE_VARIANTS = {
+    classic: classicPreset,
+    studio: studioPreset,
+};
+export * from "./tokens.js";
+export { classicPreset, studioPreset };

package/dist/esm/Components/Table/variants/pillInk.js

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = liftToContrast(ink, compositeOver(soft, surface), AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

package/dist/esm/Components/Table/variants/studio.js

@@ -0,0 +1,46 @@
+import { CHROME_RULE, MIN_PERCEPTIBLE_STEP, liftToContrast, } from "../../../Theme/tokens/builders/outlineRung.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+export const studioPreset = (colors, isDark) => {
+    const surface = colors.background[50];
+    // Studio drops the per-column rule, so the one line left has to be visible on
+    // every brand — `boxborder[200]` measures as low as 1.09:1 on some of them.
+    const rule = liftToContrast(colors.boxborder[200], surface, CHROME_RULE);
+    return {
+        header: {
+            bg: surface,
+            ink: colors.text[500],
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            height: "40px",
+            ruleColor: rule,
+            showColumnRule: false,
+            actions: "hover",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: liftToContrast(colors.primary[50], surface, MIN_PERCEPTIBLE_STEP),
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: true,
+        },
+        slot: {
+            width: "3.5rem",
+            rest: "index",
+            indexInk: colors.textMuted,
+            centered: true,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "pill",
+            pillRadius: "0.375rem",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/tokens.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Timeline/Timeline.js

@@ -163,7 +163,7 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
     const scale = getEventScale(colors, event.title);
     const changes = useMemo(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
-    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
+    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
                     borderColor: scale[300],
                     boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.md,
                     transform: clickable ? "translateY(-1px)" : undefined,
@@ -224,7 +224,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // -------------------------------------------------------------------------
     return (_jsxs(Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [_jsx(Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: colors.gray[300], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
                 var _a;
-                return (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                return (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                             var _a;
                             const isLeft = index % 2 === 0;
                             const scale = getEventScale(colors, event.title);

package/dist/esm/Components/Toaster/Toaster.js

@@ -46,7 +46,7 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
         // Surface token, not `colors.white`: `white` is a foreground token and stays
         // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
-        bg: c.background[50], border: `0.063rem solid ${c.boxborder[300]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+        bg: c.background[50], border: `0.063rem solid ${c.boxborder[200]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
             transition: "box-shadow 0.18s ease",
             _hover: { boxShadow: "xl" },
         }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {

package/dist/esm/Components/Trail/TrailWorks.js

@@ -3,7 +3,7 @@ import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/reac
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const TrailWorks = () => {
     const { colors } = useCustomTheme();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import { Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
@@ -33,10 +33,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    const resolved = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant];
     // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
     // across brands) — the label/subtitle share this computed ink instead.
-    const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
+    const resolved = resolveGradient(gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant], c.white, c.black);
+    const ink = resolved.ink;
     // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
     // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
     // back to the label's ink whenever the gold misses either stop.

package/dist/esm/Constants/Sidebar.js

@@ -1,7 +1,8 @@
+import { SCROLLBAR_WIDTH } from "../Theme/tokens/builders/scrollbar.js";
 export const HEADER_HEIGHT = "4.3rem";
 export const FlexCss = {
     "&::-webkit-scrollbar": {
-        width: "0.188rem",
+        width: SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: "transparent",
@@ -16,7 +17,7 @@ export const FlexCss = {
 };
 export const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
-        width: "0.125rem",
+        width: SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: theme.colors.sidebar.background[500],

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
 /**
@@ -19,14 +20,19 @@ const $bg = cssVar("menu-bg");
  */
 const $itemBg = cssVar("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
-    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    const colors = paletteOf(theme);
+    const hoverBg = colors.primary.opacity[8];
+    const activeBg = colors.primary.opacity[16];
     return {
         list: {
-            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
-            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+            color: colors.text[900],
+            // A rule at CHROME_RULE weight, not Chakra's gray.200: that default read as a hard edge,
+            // which is why this shipped borderless. At 1.31:1 the edge defines the surface instead.
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
         // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
         // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
@@ -12,15 +13,19 @@ const $arrowShadowColor = 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 = 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],
         },
-    });
+    };
 });
 export const Popover = defineMultiStyleConfig({
     baseStyle,

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { switchAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
 const $thumbBg = cssVar("switch-thumb-bg");
 /**
@@ -7,15 +8,12 @@ const $thumbBg = 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]: paletteOf(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 export const Switch = defineMultiStyleConfig({
     baseStyle,
 });

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -3,6 +3,7 @@ import common from "./common.web.js";
 import fonts from "./fonts.web.js";
 import { componentStyles } from "./componentStyles.js";
 import { onFilled } from "../tokens/builders/accentText.js";
+import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -83,22 +84,8 @@ export const createBrandTheme = (palette, options = {}) => {
                             color: onFilled(palette.primary[500], palette.white, palette.black),
                         },
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
-                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
-                        // canvas instead of floating as a mismatched gray bar.
-                        "::-webkit-scrollbar": {
-                            width: "10px",
-                            height: "10px",
-                        },
-                        "::-webkit-scrollbar-track": {
-                            background: palette.backgroundColor.main,
-                        },
-                        "::-webkit-scrollbar-thumb": {
-                            background: palette.gray[600],
-                            borderRadius: "6px",
-                        },
-                        "::-webkit-scrollbar-thumb:hover": {
-                            background: palette.gray[500],
-                        },
+                        // OS's generic dark gray, not brand-aware.
+                        ...globalScrollbarStyles(palette),
                         // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
                         // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
                         // reaches it — a bright light box survives on every dark autofilled field unless