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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
 const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
 /**
@@ -10,15 +11,12 @@ const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
  * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
  * regardless of mode.
  */
-const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        thumb: {
-            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
-            bg: $thumbBg.reference,
-        },
-    });
-});
+const baseStyle = definePartsStyle(({ theme }) => ({
+    thumb: {
+        [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 exports.Switch = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -70,26 +70,27 @@ export declare const componentStyles: {
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
+                borderColor: string;
             };
             item: {
                 bg: string;
                 _focus: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _hover: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _active: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _expanded: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
             };
@@ -139,9 +140,9 @@ export declare const componentStyles: {
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
             };
         }) | undefined;
         sizes?: {
@@ -188,7 +189,7 @@ export declare const componentStyles: {
     Switch: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             thumb: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
             };
         }) | undefined;

package/dist/Theme/chakra/createBrandTheme.js

@@ -9,6 +9,7 @@ const common_web_1 = __importDefault(require("./common.web"));
 const fonts_web_1 = __importDefault(require("./fonts.web"));
 const componentStyles_1 = require("./componentStyles");
 const accentText_1 = require("../tokens/builders/accentText");
+const scrollbar_1 = require("../tokens/builders/scrollbar");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -89,22 +90,8 @@ const createBrandTheme = (palette, options = {}) => {
                             color: (0, accentText_1.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.
+                        ...(0, scrollbar_1.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

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -165,42 +165,40 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
     (0, react_1.useLayoutEffect)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;
-        const colors = resolvedTheme.colors;
-        const sem = (_a = colors.semantic) !== null && _a !== void 0 ? _a : {};
-        const gray = colors.gray;
+        const { colors } = resolvedTheme;
+        const { gray, semantic } = colors;
         const HUE_SCALES = [
             "primary", "gray", "red", "orange", "yellow",
             "green", "teal", "blue", "cyan", "purple", "pink",
         ];
-        const SEMANTIC_SCALES = ["success", "error", "warning", "info"]; // nested under colors.semantic
+        const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
         const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-        // Single-value semantic vars → palette scale+rung. The dark gray ramp runs dark(50) → light(900),
-        // so low rungs read as surfaces and high rungs as text — correct in dark, cleared in light.
+        // The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
+        // and high rungs as text — correct in dark, cleared in light.
         const SEMANTIC_VARS = {
-            "text-heading": gray === null || gray === void 0 ? void 0 : gray[900], "text-body": gray === null || gray === void 0 ? void 0 : gray[700],
-            "text-subtle": gray === null || gray === void 0 ? void 0 : gray[500], "text-input": gray === null || gray === void 0 ? void 0 : gray[500],
-            "bg-main": gray === null || gray === void 0 ? void 0 : gray[50], "bg-secondary": gray === null || gray === void 0 ? void 0 : gray[100], "bg-tertiary": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-quaternary": gray === null || gray === void 0 ? void 0 : gray[200], "bg-light": gray === null || gray === void 0 ? void 0 : gray[50], "bg-medium": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-accent": gray === null || gray === void 0 ? void 0 : gray[200], "bg-subtle": gray === null || gray === void 0 ? void 0 : gray[100], "bg-muted": gray === null || gray === void 0 ? void 0 : gray[200],
-            "bg-neutral": gray === null || gray === void 0 ? void 0 : gray[100], "bg-base": gray === null || gray === void 0 ? void 0 : gray[50], "bg-table-header": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-default": gray === null || gray === void 0 ? void 0 : gray[200], "border-light": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-dark": gray === null || gray === void 0 ? void 0 : gray[300], "border-input": gray === null || gray === void 0 ? void 0 : gray[300],
-            "border-error": (_b = sem.error) === null || _b === void 0 ? void 0 : _b[500], "border-success": (_c = sem.success) === null || _c === void 0 ? void 0 : _c[500],
-            "border-warning": (_d = sem.warning) === null || _d === void 0 ? void 0 : _d[500], "border-info": (_e = sem.info) === null || _e === void 0 ? void 0 : _e[500],
+            "text-heading": gray[900], "text-body": gray[700],
+            "text-subtle": gray[500], "text-input": gray[500],
+            "bg-main": gray[50], "bg-secondary": gray[100], "bg-tertiary": gray[100],
+            "bg-quaternary": gray[200], "bg-light": gray[50], "bg-medium": gray[100],
+            "bg-accent": gray[200], "bg-subtle": gray[100], "bg-muted": gray[200],
+            "bg-neutral": gray[100], "bg-base": gray[50], "bg-table-header": gray[100],
+            "border-default": gray[200], "border-light": gray[100],
+            "border-dark": gray[300], "border-input": gray[300],
+            "border-error": semantic.error[500], "border-success": semantic.success[500],
+            "border-warning": semantic.warning[500], "border-info": semantic.info[500],
         };
-        const set = (name, val) => val && root.style.setProperty(`--color-${name}`, val);
+        const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
         if (resolvedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_f = colors[s]) === null || _f === void 0 ? void 0 : _f[r]);
+                    set(`${s}-${r}`, colors[s][r]);
             for (const s of SEMANTIC_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_g = sem[s]) === null || _g === void 0 ? void 0 : _g[r]);
+                    set(`${s}-${r}`, semantic[s][r]);
             for (const [name, val] of Object.entries(SEMANTIC_VARS))
                 set(name, val);
         }

package/dist/Theme/provider/ThemeSwitcher.js

@@ -25,33 +25,23 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * the dot always matches what selecting that brand actually looks like,
  * regardless of which brand/mode is currently active.
  */
-const brandSwatchColor = (brand) => {
-    var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
-};
+const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
 const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
  */
 const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return {
-        trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
-        activeBg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "white",
-        activeColor: (_l = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[900]) !== null && _l !== void 0 ? _l : "inherit",
-        mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
-        hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
-        borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
-        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
-        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
-        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
-        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
-        // needs) but stop duplicating menuBg.
-        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
+        trackBg: colors.backgroundColor.secondary,
+        activeBg: colors.backgroundColor.main,
+        activeColor: colors.primary[500],
+        mutedColor: colors.text[600],
+        hoverBg: colors.gray[100],
+        borderColor: colors.border[200],
+        // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
+        menuColor: colors.text[900],
     };
 };
 const BrandMenu = ({ size }) => {

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -188,12 +188,8 @@ const disabled = {
     800: "#625d75",
     900: "#4b4759",
 };
-// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
-// `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
-// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
-// margin to trust against rounding/rendering variance.
-const gradient = { from: "#8B3FC8", to: "#df187a" };
+// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
+const gradient = { from: "#8b3fc8", to: "#762d9d" };
 const palette = {
     gradient,
     primary,

package/dist/Theme/tokens/brands/slate/palette.light.js

@@ -20,11 +20,7 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
-    // Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
-    gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
+    gradient: { from: "#666d7a", to: "#4a4e59" },
     primary,
     tertiary: { ...primary },
     gray: {

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

@@ -0,0 +1,22 @@
+export type Gradient = {
+    from: string;
+    to: string;
+};
+/** A gradient already safe to paint, plus the ink that is guaranteed legible on it. */
+export type ResolvedGradient = Gradient & {
+    ink: string;
+};
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+export declare const resolveGradient: (gradient: Gradient, white: string, black: string) => ResolvedGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export declare const gradientCss: (g: Gradient, angle?: string) => string;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gradientCss = exports.resolveGradient = exports.inkSafeGradient = void 0;
+const accentText_1 = require("./accentText");
+const statusTone_1 = require("./statusTone");
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+const inkSafeGradient = (gradient) => ({
+    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
+    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
+});
+exports.inkSafeGradient = inkSafeGradient;
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+const resolveGradient = (gradient, white, black) => {
+    const { from, to } = (0, exports.inkSafeGradient)(gradient);
+    return { from, to, ink: (0, accentText_1.onGradient)(from, to, white, black) };
+};
+exports.resolveGradient = resolveGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;
+exports.gradientCss = gradientCss;

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

@@ -3,3 +3,5 @@ export * from "./buildBrandTokens";
 export * from "./buildDarkPalette";
 export * from "./chartColorsFromTheme";
 export * from "./color";
+export * from "./scrollbar";
+export * from "./gradientInk";

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

@@ -19,3 +19,5 @@ __exportStar(require("./buildBrandTokens"), exports);
 __exportStar(require("./buildDarkPalette"), exports);
 __exportStar(require("./chartColorsFromTheme"), exports);
 __exportStar(require("./color"), exports);
+__exportStar(require("./scrollbar"), exports);
+__exportStar(require("./gradientInk"), exports);

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

@@ -14,6 +14,11 @@ export declare const AA_NON_TEXT = 3;
  * Tries the far side first, falls back to the near side, and stops at the first passing step.
  */
 export declare function liftToContrast(hex: string, backdrop: string, target?: number): string;
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
  * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
 exports.liftToContrast = liftToContrast;
+exports.softenToContrast = softenToContrast;
 exports.withOutlineRung = withOutlineRung;
 exports.resolveHoverTint = resolveHoverTint;
 const color_1 = require("./color");
@@ -36,6 +37,24 @@ function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     const ends = [(0, color_1.withLightness)(hex, 100, s), (0, color_1.withLightness)(hex, 0, s)];
     return (0, color_1.contrastRatio)(ends[0], backdrop) >= (0, color_1.contrastRatio)(ends[1], backdrop) ? ends[0] : ends[1];
 }
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+function softenToContrast(hex, backdrop, target) {
+    if ((0, color_1.contrastRatio)(hex, backdrop) <= target)
+        return hex;
+    const { s, l: start } = (0, color_1.hexToHsl)(hex);
+    const toward = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? -1 : 1;
+    let softest = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = (0, color_1.withLightness)(hex, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) < target)
+            break;
+        softest = next;
+    }
+    return softest;
+}
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
  * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1

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

@@ -0,0 +1,12 @@
+import type { PaletteProps } from "../types";
+export type ScrollbarStyle = Record<string, unknown>;
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+export declare const SCROLLBAR_WIDTH = "6px";
+export type ScrollbarVariant = "default" | "overlay" | "hover";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+export declare function scrollbarStyles(palette: PaletteProps, variant?: ScrollbarVariant): ScrollbarStyle;
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+export declare function globalScrollbarStyles(palette: PaletteProps): ScrollbarStyle;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCROLLBAR_WIDTH = void 0;
+exports.scrollbarStyles = scrollbarStyles;
+exports.globalScrollbarStyles = globalScrollbarStyles;
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+exports.SCROLLBAR_WIDTH = "6px";
+const RADIUS = "6px";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+function scrollbarStyles(palette, variant = "default") {
+    const { gray } = palette;
+    const track = variant === "default" ? gray[100] : "transparent";
+    const thumb = variant === "hover" ? "transparent" : gray[400];
+    return {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${thumb} ${track}`,
+        "&::-webkit-scrollbar": {
+            width: exports.SCROLLBAR_WIDTH,
+            height: exports.SCROLLBAR_WIDTH,
+        },
+        "&::-webkit-scrollbar-track": {
+            background: track,
+            borderRadius: RADIUS,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: thumb,
+            borderRadius: RADIUS,
+            transition: "background 0.2s ease",
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: gray[500],
+        },
+        "&::-webkit-scrollbar-corner": {
+            background: track,
+        },
+        ...(variant === "hover"
+            ? {
+                "&:hover": { scrollbarColor: `${gray[400]} ${track}` },
+                "&:hover::-webkit-scrollbar-thumb": { background: gray[400] },
+            }
+            : {}),
+    };
+}
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+function globalScrollbarStyles(palette) {
+    const { gray } = palette;
+    return {
+        "::-webkit-scrollbar": { width: exports.SCROLLBAR_WIDTH, height: exports.SCROLLBAR_WIDTH },
+        "::-webkit-scrollbar-track": { background: gray[100] },
+        "::-webkit-scrollbar-thumb": { background: gray[400], borderRadius: RADIUS },
+        "::-webkit-scrollbar-thumb:hover": { background: gray[500] },
+        "::-webkit-scrollbar-corner": { background: gray[100] },
+    };
+}

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

@@ -1,4 +1,6 @@
 import type { PaletteProps } from "../types";
+/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
+export declare const PLACEHOLDER_TEXT = 5;
 export declare const namedSurfaces: (palette: PaletteProps) => string[];
 /** The surface an ink is closest to — clearing it clears every other one. */
 export declare const hardestSurface: (ink: string, surfaces: string[]) => string;

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

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hardestSurface = exports.namedSurfaces = void 0;
+exports.hardestSurface = exports.namedSurfaces = exports.PLACEHOLDER_TEXT = void 0;
 exports.withSurfaceRungs = withSurfaceRungs;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
+/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
+exports.PLACEHOLDER_TEXT = 5;
 const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -19,6 +21,7 @@ exports.hardestSurface = hardestSurface;
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
+    const soften = (ink, target) => (0, outlineRung_1.softenToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
     const semanticText = semanticText_1.SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], accentText_1.AA_NORMAL_TEXT);
         return acc;
@@ -30,9 +33,11 @@ function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },
+        // Placeholder must stay legible without reading as a filled value: the ramp delivered
+        // 6.85:1, level with `textMuted`, so it is settled back down to just clear of AA.
         placeholder: {
             ...palette.placeholder,
-            500: lift(palette.placeholder[500], accentText_1.AA_NORMAL_TEXT),
+            500: soften(lift(palette.placeholder[500], accentText_1.AA_NORMAL_TEXT), exports.PLACEHOLDER_TEXT),
         },
         boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], outlineRung_1.AA_NON_TEXT) },
     };

package/dist/esm/Components/Accordion/Accordion.js

@@ -8,13 +8,13 @@ import { getAccordionHoverColors } from "./accordionColors.js";
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
     const isDark = isDarkCanvas(colors.backgroundColor.main);
-    const border = colors.boxborder[300];
+    const border = colors.boxborder[200];
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
                     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(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",

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

@@ -1,4 +1,5 @@
-import { accentTextOnCanvas, isDarkCanvas, onFilled, onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 /**
  * 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
@@ -138,11 +139,11 @@ export const Button = {
         // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
         // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            const g = theme.colors.gradient;
-            const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
+            const g = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+            const bg = gradientCss(g);
             return {
                 bgImage: bg,
-                color: onGradient(g.from, g.to, theme.colors.white, theme.colors.black),
+                color: g.ink,
                 border: "none",
                 _hover: {
                     bgImage: bg,

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
@@ -46,9 +46,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = theme.colors.gradient;
-    const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
-    const gradientInk = onGradient(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const gradientStops = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = gradientCss(gradientStops);
+    const gradientInk = gradientStops.ink;
     const whiteRgb = hexToRgb(theme.colors.white);
     const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
@@ -87,7 +87,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             mx: 0,
                                             borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: theme.colors.boxborder[300],
+                                            borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

package/dist/esm/Components/Common/fieldStyles.js

@@ -11,7 +11,7 @@ export const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
 export const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
     // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
     // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = theme.colors.boxborder[800];
+    const idleBorder = theme.colors.boxborder[500];
     const primary = theme.colors.primary[500];
     const errorColor = theme.colors.semanticText.error;
     const ringPrimary = theme.colors.boxShadow.primary;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -34,7 +34,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "button") {
         return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[800], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
     }
     return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
 };

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -14,6 +14,6 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
                                 // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
                                 // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
                                 // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
-                                borderColor: colors.boxborder[800], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+                                borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 export default EditModuleModal;

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -20,7 +20,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
     const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
     const selectStyles = {
         border: "1px solid",
-        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[200]
         // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
         borderColor: theme.colors.boxborder[500],
         borderRadius: "md",

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -201,6 +201,6 @@ export const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 };
 export default RangeDatePicker;