pixelize-design-library 2.4.2-beta.30 → 2.4.2-beta.32

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const color_1 = require("../../Theme/tokens/builders/color");
+const solidFillRung_1 = require("../../Theme/tokens/builders/solidFillRung");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 /**
@@ -22,44 +22,11 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : 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 RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-const AA_NORMAL_TEXT = 4.5;
-// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
-const solidRung = (theme, colorScheme) => {
-    const scale = theme.colors[colorScheme];
-    const white = theme.colors.white;
-    if ("opacity" in scale)
-        return 500;
-    if ((0, color_1.contrastRatio)(scale[500], white) >= AA_NORMAL_TEXT)
-        return 500;
-    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= AA_NORMAL_TEXT);
-    if (!passing.length)
-        return 500;
-    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
-};
-const steppedRung = (theme, base, step) => {
-    const dir = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
-};
+const buttonSolidRung = (theme, colorScheme) => (0, solidFillRung_1.solidRung)(theme.colors[colorScheme], theme.colors.white);
 const darkerFill = (theme, colorScheme, step) => {
-    var _a;
     const scale = theme.colors[colorScheme];
-    const base = solidRung(theme, colorScheme);
-    if (base === 500) {
-        const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
-        return scale[FILL_STEP_RUNGS[mode][step]];
-    }
-    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
+    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
+    return scale[(0, solidFillRung_1.darkerFillRung)(scale, theme.colors.white, isDark, 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);
@@ -88,7 +55,7 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
+            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);
@@ -122,7 +89,7 @@ exports.Button = {
         },
         outline: ({ theme, colorScheme = "primary" }) => {
             // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
-            const hoverFill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
+            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const activeFill = darkerFill(theme, colorScheme, 0);
             const ink = onCanvasText(theme, colorScheme);
             return {

package/dist/Components/Table/Table.js

@@ -18,6 +18,7 @@ const TableHeader_1 = __importDefault(require("./components/TableHeader"));
 const TableBody_1 = __importDefault(require("./components/TableBody"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const scrollShadow_1 = require("../../Theme/tokens/builders/scrollShadow");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
@@ -399,6 +400,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                             }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...(0, scrollShadow_1.scrollShadowStyles)(theme.colors.background[50]),
                                             ...(0, scrollbar_1.scrollbarStyles)(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {

package/dist/Components/Tag/Tag.styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const solidFillRung_1 = require("../../Theme/tokens/builders/solidFillRung");
 // Resolve a colorScheme key to a numeric swatch from the theme. All supported
 // colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
 // gray so an unknown/missing key can never throw at render time.
@@ -42,10 +43,11 @@ exports.Tag = {
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
-            const { white, black } = theme.colors;
-            const fill = c[500];
-            const hoverFill = c[600];
-            const activeFill = c[700];
+            const { white, black, backgroundColor } = theme.colors;
+            const isDark = (0, accentText_1.isDarkCanvas)(backgroundColor.main);
+            const fill = c[(0, solidFillRung_1.solidRung)(c, white)];
+            const hoverFill = c[(0, solidFillRung_1.darkerFillRung)(c, white, isDark, 0)];
+            const activeFill = c[(0, solidFillRung_1.darkerFillRung)(c, white, isDark, 1)];
             return {
                 container: {
                     bg: fill,

package/dist/Theme/chakra/componentStyles.js

@@ -14,6 +14,7 @@ const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.s
 const accentText_1 = require("../tokens/builders/accentText");
 const color_1 = require("../tokens/builders/color");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
+const solidFillRung_1 = require("../tokens/builders/solidFillRung");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
 const Modal_styles_1 = require("./Modal.styles");
@@ -34,11 +35,10 @@ const Badge = {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = (0, paletteFromTheme_1.paletteOf)(theme);
             const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
-            const bg = swatch[500];
-            return {
-                bg,
-                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, palette.white, palette.black) : swatch[800],
-            };
+            if (!isHexColor(swatch[500]))
+                return { bg: swatch[500], color: swatch[800] };
+            const bg = swatch[(0, solidFillRung_1.solidRung)(swatch, palette.white)];
+            return { bg, color: (0, accentText_1.onFilled)(bg, palette.white, palette.black) };
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
         // colorMode — which this app never toggles (dark mode swaps the palette object instead), so

package/dist/Theme/tokens/builders/scrollShadow.d.ts

@@ -0,0 +1,2 @@
+export type ScrollShadowStyle = Record<string, unknown>;
+export declare function scrollShadowStyles(surface: string): ScrollShadowStyle;

package/dist/Theme/tokens/builders/scrollShadow.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollShadowStyles = scrollShadowStyles;
+const EDGE = "24px";
+const TINT = "rgba(0, 0, 0, 0.08)";
+// CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
+function scrollShadowStyles(surface) {
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(to right, ${surface}, ${surface}), linear-gradient(to left, ${surface}, ${surface}), linear-gradient(to right, ${TINT}, transparent), linear-gradient(to left, ${TINT}, transparent)`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${EDGE} 100%, ${EDGE} 100%, 8px 100%, 8px 100%`,
+        backgroundPosition: "0 0, 100% 0, 0 0, 100% 0",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

package/dist/Theme/tokens/builders/solidFillRung.d.ts

@@ -0,0 +1,4 @@
+import type { ColorScale, BrandScale } from "../types";
+export type Rung = keyof ColorScale;
+export declare const solidRung: (scale: ColorScale | BrandScale, white: string) => Rung;
+export declare const darkerFillRung: (scale: ColorScale | BrandScale, white: string, isDark: boolean, step: 0 | 1) => Rung;

package/dist/Theme/tokens/builders/solidFillRung.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkerFillRung = exports.solidRung = void 0;
+const color_1 = require("./color");
+const AA_NORMAL_TEXT = 4.5;
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const hasOpacity = (scale) => "opacity" in scale;
+// Brand scales keep [500]; utility scales (red, green, …) step to the closest passing rung.
+const solidRung = (scale, white) => {
+    if (hasOpacity(scale))
+        return 500;
+    if ((0, color_1.contrastRatio)(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+exports.solidRung = solidRung;
+const steppedRung = (base, step, isDark) => {
+    const dir = isDark ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+const darkerFillRung = (scale, white, isDark, step) => {
+    const base = (0, exports.solidRung)(scale, white);
+    if (base === 500) {
+        const mode = isDark ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    return steppedRung(base, step === 0 ? 1 : 2, isDark);
+};
+exports.darkerFillRung = darkerFillRung;

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

@@ -1,5 +1,5 @@
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
-import { contrastRatio } from "../../Theme/tokens/builders/color.js";
+import { solidRung, darkerFillRung } from "../../Theme/tokens/builders/solidFillRung.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 /**
@@ -19,44 +19,11 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : 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 RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-const AA_NORMAL_TEXT = 4.5;
-// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
-const solidRung = (theme, colorScheme) => {
-    const scale = theme.colors[colorScheme];
-    const white = theme.colors.white;
-    if ("opacity" in scale)
-        return 500;
-    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
-        return 500;
-    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
-    if (!passing.length)
-        return 500;
-    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
-};
-const steppedRung = (theme, base, step) => {
-    const dir = isDarkCanvas(theme.colors.backgroundColor.main) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
-};
+const buttonSolidRung = (theme, colorScheme) => solidRung(theme.colors[colorScheme], theme.colors.white);
 const darkerFill = (theme, colorScheme, step) => {
-    var _a;
     const scale = theme.colors[colorScheme];
-    const base = solidRung(theme, colorScheme);
-    if (base === 500) {
-        const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
-        return scale[FILL_STEP_RUNGS[mode][step]];
-    }
-    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    return scale[darkerFillRung(scale, theme.colors.white, isDark, step)];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
@@ -85,7 +52,7 @@ export const Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
+            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);
@@ -119,7 +86,7 @@ export const Button = {
         },
         outline: ({ theme, colorScheme = "primary" }) => {
             // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
-            const hoverFill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
+            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const activeFill = darkerFill(theme, colorScheme, 0);
             const ink = onCanvasText(theme, colorScheme);
             return {

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

@@ -12,6 +12,7 @@ import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
+import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
@@ -393,6 +394,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                             }, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...scrollShadowStyles(theme.colors.background[50]),
                                             ...scrollbarStyles(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {

package/dist/esm/Components/Tag/Tag.styles.js

@@ -1,4 +1,5 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { solidRung, darkerFillRung } from "../../Theme/tokens/builders/solidFillRung.js";
 // Resolve a colorScheme key to a numeric swatch from the theme. All supported
 // colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
 // gray so an unknown/missing key can never throw at render time.
@@ -39,10 +40,11 @@ export const Tag = {
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
-            const { white, black } = theme.colors;
-            const fill = c[500];
-            const hoverFill = c[600];
-            const activeFill = c[700];
+            const { white, black, backgroundColor } = theme.colors;
+            const isDark = isDarkCanvas(backgroundColor.main);
+            const fill = c[solidRung(c, white)];
+            const hoverFill = c[darkerFillRung(c, white, isDark, 0)];
+            const activeFill = c[darkerFillRung(c, white, isDark, 1)];
             return {
                 container: {
                     bg: fill,

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

@@ -11,6 +11,7 @@ import { NumberInput } from "../../Components/NumberInput/NumberInput.styles.js"
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../tokens/builders/accentText.js";
 import { contrastRatio } from "../tokens/builders/color.js";
 import { resolveHoverTint } from "../tokens/builders/outlineRung.js";
+import { solidRung } from "../tokens/builders/solidFillRung.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
 import { Modal } from "./Modal.styles.js";
@@ -31,11 +32,10 @@ const Badge = {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
             const swatch = scaleFor(palette, colorScheme);
-            const bg = swatch[500];
-            return {
-                bg,
-                color: isHexColor(bg) ? onFilled(bg, palette.white, palette.black) : swatch[800],
-            };
+            if (!isHexColor(swatch[500]))
+                return { bg: swatch[500], color: swatch[800] };
+            const bg = swatch[solidRung(swatch, palette.white)];
+            return { bg, color: onFilled(bg, palette.white, palette.black) };
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
         // colorMode — which this app never toggles (dark mode swaps the palette object instead), so

package/dist/esm/Theme/tokens/builders/scrollShadow.js

@@ -0,0 +1,13 @@
+const EDGE = "24px";
+const TINT = "rgba(0, 0, 0, 0.08)";
+// CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
+export function scrollShadowStyles(surface) {
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(to right, ${surface}, ${surface}), linear-gradient(to left, ${surface}, ${surface}), linear-gradient(to right, ${TINT}, transparent), linear-gradient(to left, ${TINT}, transparent)`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${EDGE} 100%, ${EDGE} 100%, 8px 100%, 8px 100%`,
+        backgroundPosition: "0 0, 100% 0, 0 0, 100% 0",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

package/dist/esm/Theme/tokens/builders/solidFillRung.js

@@ -0,0 +1,28 @@
+import { contrastRatio } from "./color.js";
+const AA_NORMAL_TEXT = 4.5;
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const hasOpacity = (scale) => "opacity" in scale;
+// Brand scales keep [500]; utility scales (red, green, …) step to the closest passing rung.
+export const solidRung = (scale, white) => {
+    if (hasOpacity(scale))
+        return 500;
+    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
+};
+const steppedRung = (base, step, isDark) => {
+    const dir = isDark ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+export const darkerFillRung = (scale, white, isDark, step) => {
+    const base = solidRung(scale, white);
+    if (base === 500) {
+        const mode = isDark ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    return steppedRung(base, step === 0 ? 1 : 2, isDark);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.30",
+  "version": "2.4.2-beta.32",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",