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

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioPreset = void 0;
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
+/**
+ * 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.
+ */
+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 = (0, outlineRung_1.liftToContrast)(colors.boxborder[200], surface, outlineRung_1.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: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: (0, outlineRung_1.liftToContrast)(colors.primary[50], surface, outlineRung_1.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",
+        },
+    };
+};
+exports.studioPreset = studioPreset;

package/dist/Components/Table/variants/tokens.d.ts

@@ -0,0 +1,49 @@
+/**
+ * A variant is a resolved token set, never a branch. Components read named tokens;
+ * only `Table.tsx` knows which variant is active.
+ *
+ * PURITY: presets take a palette and return values — no Chakra, no React, no CSS.
+ */
+import type { PaletteProps } from "../../../Theme/tokens/types";
+export type TableVariant = "classic" | "studio";
+export type TableSlotRest = "checkbox" | "index";
+export type TableStatusFill = "bleed" | "pill";
+export type TableHoverScope = "cell" | "row";
+export type TableChromeReveal = "always" | "hover";
+/** Every field required: a preset that forgets one is a compile error, not a runtime gap. */
+export type TableVariantTokens = {
+    header: {
+        bg: string;
+        ink: string;
+        fontSize: number;
+        fontWeight: number;
+        textTransform: "capitalize" | "uppercase";
+        letterSpacing: string;
+        height: string;
+        ruleColor: string;
+        showColumnRule: boolean;
+        /** When the per-column filter kebab appears. Active columns always show it. */
+        actions: TableChromeReveal;
+    };
+    row: {
+        hoverBg: string;
+        hoverScope: TableHoverScope;
+        ruleColor: string;
+        frozenRuleColor: string;
+        selectedBg: string;
+        selectedBarColor: string;
+        showSelectedBar: boolean;
+    };
+    slot: {
+        width: string;
+        rest: TableSlotRest;
+        indexInk: string;
+        centered: boolean;
+    };
+    cells: {
+        ink: string;
+        statusFill: TableStatusFill;
+        pillRadius: string;
+    };
+};
+export type TableVariantPreset = (colors: PaletteProps, isDark: boolean) => TableVariantTokens;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -74,13 +74,12 @@ exports.Tag = {
         outline: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
             const canvas = theme.colors.backgroundColor.main;
+            const ink = (0, accentText_1.accentTextOnCanvas)(c, canvas);
             return {
                 container: {
                     border: "0.094rem solid",
-                    borderColor: c[500],
-                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
-                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
-                    color: (0, accentText_1.accentTextOnCanvas)(c, canvas),
+                    borderColor: ink,
+                    color: ink,
                     bg: "transparent",
                     _hover: { bg: c[50] },
                     _active: { bg: c[100] },

package/dist/Components/Timeline/Timeline.js

@@ -168,7 +168,7 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
     const scale = getEventScale(colors, event.title);
     const changes = (0, react_3.useMemo)(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.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,
@@ -229,7 +229,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // -------------------------------------------------------------------------
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.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/Components/Toaster/Toaster.js

@@ -50,7 +50,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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {

package/dist/Components/Toggle/TableToggle.js

@@ -7,14 +7,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const TableToggle = ({ value, onChange }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const restInk = (0, outlineRung_1.liftToContrast)(colors.background[800], colors.background[600], outlineRung_1.AA_NON_TEXT);
+    const hoverInk = (0, outlineRung_1.liftToContrast)(colors.background[900], colors.background[400], outlineRung_1.AA_NON_TEXT);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
-            bg: theme.colors.background[600],
+            bg: colors.background[600],
             p: "0.125rem",
             borderRadius: "md",
             height: "2rem",
@@ -22,19 +26,19 @@ const TableToggle = ({ value, onChange }) => {
             width: "6.3rem",
         },
         button: (mode) => ({
-            bg: value === mode ? theme.colors.background[50] : "transparent",
+            bg: value === mode ? colors.background[50] : "transparent",
             boxShadow: value === mode ? "md" : "none",
-            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
+            color: value === mode ? colors.text[900] : restInk,
             borderRadius: "base",
             height: "1.75rem",
             border: "0.031rem solid",
-            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            borderColor: value === mode ? colors.background[400] : "transparent",
             padding: "0.313rem 0.813rem",
             _hover: {
                 bg: value === mode
-                    ? theme.colors.background[50]
-                    : theme.colors.background[400],
-                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
+                    ? colors.background[50]
+                    : colors.background[400],
+                color: value === mode ? colors.text[900] : hoverInk,
             },
             transition: "all 0.3s ease-in-out",
         }),

package/dist/Components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,2 @@
+import { ToggleSwitchProps } from "./ToggleSwitchProps";
+export default function ToggleSwitch({ isChecked, onChange, isDisabled, size, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToggleSwitch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const SIZES = {
+    sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.75rem" },
+    md: { w: "2.375rem", h: "1.375rem", knob: "1.125rem", travel: "0.875rem" },
+};
+function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const dims = SIZES[size];
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", id: id, role: "switch", "aria-checked": isChecked, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, disabled: isDisabled, onClick: () => onChange(!isChecked), position: "relative", display: "inline-flex", alignItems: "center", flexShrink: 0, w: dims.w, h: dims.h, p: 0, borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: isChecked ? colors.primary[500] : colors.boxborder[500], bg: isChecked ? colors.primary[500] : colors.background[600], opacity: isDisabled ? 0.5 : 1, cursor: isDisabled ? "not-allowed" : "pointer", transition: "background-color 0.2s ease, border-color 0.2s ease", _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 2px ${colors.primary[300]}`,
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: colors.background[50], boxShadow: "sm", transition: "transform 0.2s ease", transform: isChecked ? `translateX(${dims.travel})` : "translateX(0)" }) }));
+}

package/dist/Components/ToggleSwitch/ToggleSwitchProps.d.ts

@@ -0,0 +1,11 @@
+export type ToggleSwitchSize = "sm" | "md";
+export type ToggleSwitchProps = {
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+    isDisabled?: boolean;
+    size?: ToggleSwitchSize;
+    id?: string;
+    /** The control carries no visible text, so it has no other way to be named. */
+    "aria-label": string;
+    "aria-describedby"?: string;
+};

package/dist/Components/ToggleSwitch/ToggleSwitchProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ToolTip/ToolTip.js

@@ -7,18 +7,18 @@ const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
     // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
     // runs on hover/scroll, so showing the tooltip stays as cheap as before.
     const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
-    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
-    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
-    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
-    // every other surface ramp flips light and would render the label invisible.
+    // `sidebar.background` stays near-black in both modes; ink is computed via `onFilled`.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const surface = theme.colors.sidebar.background[500];
+    const resolvedBg = bg !== null && bg !== void 0 ? bg : surface;
+    const resolvedColor = color !== null && color !== void 0 ? color : (0, accentText_1.onFilled)(resolvedBg, theme.colors.white, theme.colors.black);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -29,5 +29,5 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: resolvedBg, color: resolvedColor, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
 }

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -1,5 +1,7 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    bg?: string;
+    color?: string;
     children: React.ReactNode;
     styles?: React.CSSProperties;
     /**

package/dist/Components/Trail/TrailWorks.js

@@ -5,7 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const TrailWorks = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
@@ -35,10 +35,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
         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 = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    const resolved = (0, gradientInk_1.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/Constants/Sidebar.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
+const scrollbar_1 = require("../Theme/tokens/builders/scrollbar");
 exports.HEADER_HEIGHT = "4.3rem";
 exports.FlexCss = {
     "&::-webkit-scrollbar": {
-        width: "0.188rem",
+        width: scrollbar_1.SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: "transparent",
@@ -19,7 +20,7 @@ exports.FlexCss = {
 };
 const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
-        width: "0.125rem",
+        width: scrollbar_1.SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: theme.colors.sidebar.background[500],

package/dist/Theme/assertPalette.d.ts

@@ -1,5 +1,5 @@
 import type { PaletteProps } from "./tokens/types";
-declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic"];
+declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic"];
 type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
 export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
 export declare const allPaletteTokensListed: AllPaletteTokensListed;

package/dist/Theme/assertPalette.js

@@ -5,8 +5,8 @@ const REQUIRED_GROUPS = [
     "gradient", "primary", "secondary", "tertiary", "transparent", "black", "white",
     "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
     "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
-    "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText",
-    "textMuted", "semanticText", "onPrimary", "onSemantic",
+    "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic",
 ];
 exports.allPaletteTokensListed = true;
 const NESTED = [
@@ -17,6 +17,7 @@ const NESTED = [
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];

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

@@ -28,6 +28,9 @@ export declare const Menu: {
             [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
         };
         item: {
             bg: string;

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

@@ -31,6 +31,11 @@ const baseStyle = definePartsStyle(({ theme }) => {
             [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
             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/Theme/chakra/Popover.styles.d.ts

@@ -14,6 +14,9 @@ export declare const Popover: {
             [$arrowShadowColor.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
         };
     }) | undefined;
     sizes?: {

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

@@ -21,8 +21,12 @@ const baseStyle = definePartsStyle(({ theme }) => {
         content: {
             [$popperBg.variable]: colors.backgroundColor.light,
             bg: $popperBg.reference,
-            [$arrowShadowColor.variable]: colors.border[200],
+            [$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],
         },
     };
 });

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

@@ -73,6 +73,9 @@ export declare const componentStyles: {
                 [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
             item: {
                 bg: string;
@@ -142,6 +145,9 @@ export declare const componentStyles: {
                 [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
         }) | undefined;
         sizes?: {

package/dist/Theme/chakra/createBrandTheme.js

@@ -9,6 +9,8 @@ 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");
+const focusRing_styles_1 = require("./focusRing.styles");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -26,6 +28,12 @@ const createBrandTheme = (palette, options = {}) => {
         colors: palette,
         ...fonts_web_1.default,
         ...common_web_1.default,
+        // `shadows.outline` is what Chakra's stock `_focusVisible` reaches for on EVERY component it
+        // themes. The primitive ships one hardcoded blue (`rgba(66,153,225,.6)`), which measured
+        // 1.83:1 on the lavender canvas and 1.38:1 on a primary button — below 1.4.11's 3:1 on all
+        // nine brands, in both modes. A primitive cannot know the palette; this is the first place
+        // that does, so the palette-derived ring is bound here and every stock focus state inherits it.
+        shadows: { ...common_web_1.default.shadows, outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
     };
     return (0, react_1.extendTheme)({
         ...brand,
@@ -89,22 +97,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/chakra/focusRing.styles.d.ts

@@ -0,0 +1,52 @@
+import type { FocusRingTokens } from "../tokens/types";
+/**
+ * WEB binding for the `focusRing` token pair. The colours are derived in
+ * `tokens/builders/focusRing.ts` (pure, shared with the mobile library); the CSS shape —
+ * box-shadow bands, the forced-colors outline — is web-only and lives here.
+ */
+/** Inner band, in the surface tone: separates the ring from the control's own fill. */
+export declare const FOCUS_HALO_WIDTH = 2;
+/** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
+export declare const FOCUS_RING_WIDTH = 4;
+type WithFocusRing = {
+    focusRing: FocusRingTokens;
+};
+/**
+ * The two-tone ring as a single `box-shadow`. Drawn OUTSIDE the border box, so it costs no
+ * layout and never resizes the control — the reason this is a shadow and not an outline.
+ */
+export declare const focusRingShadow: (colors: WithFocusRing) => string;
+/**
+ * `:hover`, `:active` and `:focus-visible` all score the same specificity, so which one paints
+ * comes down to source order — and in the merged style object Chakra's own Button baseStyle
+ * registers `_focusVisible` BEFORE `_hover`. A focused button that is also hovered would then
+ * drop the ring for `_hover`'s `boxShadow: "sm"`. Stacking the pseudo-classes raises the
+ * specificity above both, so the ring survives whatever else the state repaints.
+ */
+export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
+/**
+ * `:focus-visible`, never `:focus` — a mouse click must not draw a ring.
+ *
+ * The transparent outline is not decoration: in Windows High Contrast / `forced-colors` mode
+ * box-shadows are dropped entirely, and a transparent outline is the one thing the OS repaints
+ * in its own focus colour. Without it, forced-colors users get no indicator at all.
+ */
+export declare const focusVisibleRing: (colors: WithFocusRing) => {
+    outline: string;
+    outlineOffset: string;
+    boxShadow: string;
+};
+/** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
+export declare const focusVisibleStyles: (colors: WithFocusRing) => {
+    _focusVisible: {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+    "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible": {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+};
+export {};

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusVisibleStyles = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
+/**
+ * WEB binding for the `focusRing` token pair. The colours are derived in
+ * `tokens/builders/focusRing.ts` (pure, shared with the mobile library); the CSS shape —
+ * box-shadow bands, the forced-colors outline — is web-only and lives here.
+ */
+/** Inner band, in the surface tone: separates the ring from the control's own fill. */
+exports.FOCUS_HALO_WIDTH = 2;
+/** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
+exports.FOCUS_RING_WIDTH = 4;
+/**
+ * The two-tone ring as a single `box-shadow`. Drawn OUTSIDE the border box, so it costs no
+ * layout and never resizes the control — the reason this is a shadow and not an outline.
+ */
+const focusRingShadow = (colors) => `0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+exports.focusRingShadow = focusRingShadow;
+/**
+ * `:hover`, `:active` and `:focus-visible` all score the same specificity, so which one paints
+ * comes down to source order — and in the merged style object Chakra's own Button baseStyle
+ * registers `_focusVisible` BEFORE `_hover`. A focused button that is also hovered would then
+ * drop the ring for `_hover`'s `boxShadow: "sm"`. Stacking the pseudo-classes raises the
+ * specificity above both, so the ring survives whatever else the state repaints.
+ */
+exports.FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
+/**
+ * `:focus-visible`, never `:focus` — a mouse click must not draw a ring.
+ *
+ * The transparent outline is not decoration: in Windows High Contrast / `forced-colors` mode
+ * box-shadows are dropped entirely, and a transparent outline is the one thing the OS repaints
+ * in its own focus colour. Without it, forced-colors users get no indicator at all.
+ */
+const focusVisibleRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: (0, exports.focusRingShadow)(colors),
+});
+exports.focusVisibleRing = focusVisibleRing;
+/** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
+const focusVisibleStyles = (colors) => {
+    const ring = (0, exports.focusVisibleRing)(colors);
+    return { _focusVisible: ring, [exports.FOCUS_VISIBLE_OVER_STATE]: ring };
+};
+exports.focusVisibleStyles = focusVisibleStyles;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -26,7 +26,10 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * regardless of which brand/mode is currently active.
  */
 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 }));
+const BrandSwatch = ({ brand }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((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: colors.boxborder[200], 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.
@@ -39,7 +42,7 @@ const useSwitcherColors = () => {
         activeColor: colors.primary[500],
         mutedColor: colors.text[600],
         hoverBg: colors.gray[100],
-        borderColor: colors.border[200],
+        borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
     };