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

package/dist/esm/Components/Toggle/TableToggle.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, IconButton } from "@chakra-ui/react";
 import { Columns3, Table2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const TableToggle = ({ value, onChange }) => {
     const theme = useCustomTheme();
+    const { colors } = theme;
+    const restInk = liftToContrast(colors.background[800], colors.background[600], AA_NON_TEXT);
+    const hoverInk = liftToContrast(colors.background[900], colors.background[400], 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",
@@ -17,19 +21,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/esm/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+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" },
+};
+export default function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }) {
+    const { colors } = useCustomTheme();
+    const dims = SIZES[size];
+    return (_jsx(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: _jsx(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/esm/Components/ToggleSwitch/ToggleSwitchProps.js

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

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -4,18 +4,18 @@ import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
 import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
 import { mergeRefs } from "../../Utils/mergeRefs.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-export default 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, }) {
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+export default 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 } = useIsTruncated(label, overflowOnly && 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 = 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 : onFilled(resolvedBg, theme.colors.white, theme.colors.black);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && isValidElement(children)) {
@@ -26,5 +26,5 @@ export default function ToolTip({ placement = "top", label, children, hasArrow =
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return (_jsx(ChakraTooltip, { 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 (_jsx(ChakraTooltip, { 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/esm/Components/Trail/TrailWorks.js

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

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

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

package/dist/esm/Constants/Sidebar.js

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

package/dist/esm/Theme/assertPalette.js

@@ -2,8 +2,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",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [
@@ -14,6 +14,7 @@ const NESTED = [
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];

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

@@ -28,6 +28,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/esm/Theme/chakra/Popover.styles.js

@@ -18,8 +18,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/esm/Theme/chakra/createBrandTheme.js

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

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

@@ -0,0 +1,40 @@
+/**
+ * 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 const FOCUS_HALO_WIDTH = 2;
+/** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
+export const 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.
+ */
+export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/**
+ * `: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 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 const focusVisibleRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusRingShadow(colors),
+});
+/** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
+export const focusVisibleStyles = (colors) => {
+    const ring = focusVisibleRing(colors);
+    return { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring };
+};

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -23,7 +23,10 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * regardless of which brand/mode is currently active.
  */
 const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
-const BrandSwatch = ({ brand }) => (_jsx(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 } = useCustomTheme();
+    return (_jsx(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.
@@ -36,7 +39,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],
     };

package/dist/esm/Theme/tokens/brands/index.js

@@ -22,6 +22,7 @@ import { withSidebarTokens } from "../builders/sidebarAccent.js";
 import { buildMutedText } from "../builders/mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "../builders/semanticText.js";
 import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRungs.js";
+import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
@@ -32,10 +33,14 @@ export const finalizeLightPalette = (source) => ({
     semanticText: buildSemanticText(source.semantic, source.backgroundColor.main),
     onPrimary: onFilled(source.primary[500], source.white, source.black),
     onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
+    focusRing: buildFocusRing(source),
 });
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-const resolveRungs = (palette) => withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))));
+// `withFocusRing` is outermost: it is the only step that reads `primary` and the surfaces
+// TOGETHER, so it must see both after every earlier step — and after a brand file's own
+// post-derivation overrides (zinc dark replaces `primary` and `background` wholesale).
+const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette)))));
 const lightBrand = (source) => resolveRungs(finalizeLightPalette(source));
 /** Light palette per brand. `lavender` is the base the other six extend. */
 export const lightPalettes = {

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

@@ -4,6 +4,7 @@ import { pickAccentText, onFilled } from "./accentText.js";
 import { withSidebarTokens } from "./sidebarAccent.js";
 import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
+import { buildFocusRing } from "./focusRing.js";
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -238,6 +239,7 @@ export function buildDarkPalette(light) {
     ]));
     const white = light.white;
     const primary = liftBrand(light.primary, white);
+    const background = fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT);
     const semantic = {
         success: liftAccent(light.semantic.success, white),
         error: liftAccent(light.semantic.error, white),
@@ -268,7 +270,7 @@ export function buildDarkPalette(light) {
         purple: reverseScale(light.purple),
         pink: reverseScale(light.pink),
         backgroundColor: namedSurfaces,
-        background: fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT),
+        background,
         text: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT),
         header: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT + 2),
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
@@ -285,6 +287,9 @@ export function buildDarkPalette(light) {
         semanticText: buildSemanticText(semantic, namedSurfaces.main),
         onPrimary: onFilled(primary[500], light.white, light.black),
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
+        // The dark ring is derived from the LIFTED accent against the dark canvas, not copied from
+        // light: the two modes squeeze it from opposite sides, so a shared value fails one of them.
+        focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
         // Sidebar is already near-black in light mode, so it needs no inversion.
         sidebar: withSidebarTokens(light),
         boxShadow: {

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

@@ -25,7 +25,7 @@ export function chartInk(colors) {
         surface,
         text: colors.text[900],
         muted: colors.text[500],
-        grid: colors.border[500],
+        grid: colors.boxborder[200],
         axis: colors.text[500],
         tooltipBg: colors.backgroundColor.secondary,
     };

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

@@ -0,0 +1,85 @@
+import { contrastRatio, hexToHsl, withLightness } from "./color.js";
+import { AA_NON_TEXT } from "./outlineRung.js";
+/** Same lightness granularity `buildDarkPalette` walks its accents at. */
+const LIGHTNESS_STEP = 0.5;
+/**
+ * The nearest re-lighting of `hex` that clears `target` against EVERY backdrop at once.
+ *
+ * Not `settleAcross`: that folds one `liftToContrast` per surface, and each lift walks AWAY from
+ * the surface it was handed. That is correct when every backdrop sits on the same side of the ink
+ * (its case — a set of light surfaces, or a set of dark ones), and wrong here, where a focus ring
+ * is squeezed BETWEEN a near-white canvas and a mid-dark button fill: the lift against the fill
+ * walks straight back across the canvas it had just cleared. Seeding `settleAcross` with
+ * `primary[500]` measured 1.08-1.99 on the light canvas for every brand for exactly that reason.
+ *
+ * Walking outward from the seed and testing every backdrop at each step keeps the result the
+ * CLOSEST passing colour to the brand accent, so the ring still reads as brand chrome. Contrast is
+ * a function of relative luminance alone, and lightness sweeps luminance monotonically from 0 to 1,
+ * so if any colour on this hue clears the set, this finds it.
+ */
+export function settleBetween(hex, backdrops, target = AA_NON_TEXT) {
+    const clears = (candidate) => backdrops.every((backdrop) => contrastRatio(candidate, backdrop) >= target);
+    if (clears(hex))
+        return hex;
+    const { l } = hexToHsl(hex);
+    for (let step = LIGHTNESS_STEP; step <= 100; step += LIGHTNESS_STEP) {
+        const darker = withLightness(hex, l - step);
+        if (clears(darker))
+            return darker;
+        const lighter = withLightness(hex, l + step);
+        if (clears(lighter))
+            return lighter;
+    }
+    // Unreachable for every shipped brand (the gate proves it) — a brand whose fill and canvas are
+    // close enough to leave no gap would land here. Take the end that is least bad rather than throw
+    // at import time, and let `focusRing.test.ts` be what reports it.
+    const ends = [withLightness(hex, 0), withLightness(hex, 100)];
+    const worst = (candidate) => Math.min(...backdrops.map((backdrop) => contrastRatio(candidate, backdrop)));
+    return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
+}
+/**
+ * The three backdrops a focused button's ring is actually drawn against: the page canvas, a card
+ * surface, and — because a solid button's ring sits directly against its own fill — `primary[500]`.
+ *
+ * Deliberately NOT every named surface. `muted`/`accent`/`quaternary` are mid-tone, and a single
+ * band asked to clear those AND a dark brand fill has no solution at any hue — contrast is
+ * luminance alone, and `skyline`/`storefront` come out with an empty band. That is what the second
+ * tone is for: `halo` owns the fill-side adjacency instead.
+ */
+export const focusRingBackdrops = (source) => [
+    source.backgroundColor.main,
+    source.background[50],
+    source.primary[500],
+];
+/**
+ * The two-tone `:focus-visible` indicator.
+ *
+ * Chakra's stock ring (`shadows.outline`, a fixed `rgba(66,153,225,.6)`) measured 1.83:1 on the
+ * lavender canvas and 1.38:1 on a primary button — a focus indicator you cannot see, on all nine
+ * brands. It is one hardcoded blue, so no palette could have saved it.
+ *
+ * `halo` is the surface tone, drawn as the inner band so the indicator separates from a filled
+ * control whatever `colorScheme` painted it. `ring` is the brand accent, walked to the nearest
+ * lightness that clears 3:1 on all three backdrops at once — including the halo, so the two tones
+ * are always told apart.
+ */
+export const buildFocusRing = (source) => {
+    const halo = settleBetween(source.background[50], [source.primary[500]]);
+    return {
+        halo,
+        ring: settleBetween(source.primary[500], [...focusRingBackdrops(source), halo]),
+    };
+};
+/**
+ * Re-derives the ring from the FINISHED palette, as the last step of the rung chain.
+ *
+ * `finalizeLightPalette` and `buildDarkPalette` seed it, but neither is the final word: a brand
+ * file may replace `primary` or `background` after the generic derivation runs — `zinc`'s dark
+ * palette replaces both, inverting the filled button to near-white — and a ring resolved against
+ * the pre-override values is then silently wrong. Same reason `withSurfaceRungs` re-lifts inks the
+ * finalizers already derived. `focusRing.test.ts` asserts this is a fixed point.
+ */
+export const withFocusRing = (palette) => ({
+    ...palette,
+    focusRing: buildFocusRing(palette),
+});

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

@@ -0,0 +1,22 @@
+import { onGradient } from "./accentText.js";
+import { resolveAvatarFill } from "./statusTone.js";
+/**
+ * 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 const inkSafeGradient = (gradient) => ({
+    from: resolveAvatarFill(gradient.from),
+    to: resolveAvatarFill(gradient.to),
+});
+/**
+ * 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 const resolveGradient = (gradient, white, black) => {
+    const { from, to } = inkSafeGradient(gradient);
+    return { from, to, ink: onGradient(from, to, white, black) };
+};
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;

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

@@ -3,3 +3,7 @@ export * from "./buildBrandTokens.js";
 export * from "./buildDarkPalette.js";
 export * from "./chartColorsFromTheme.js";
 export * from "./color.js";
+export * from "./focusRing.js";
+export * from "./scrollbar.js";
+export * from "./gradientInk.js";
+export * from "./placeholderInk.js";

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

@@ -7,6 +7,35 @@ import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./col
 export const MIN_PERCEPTIBLE_STEP = 1.15;
 /** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export const AA_NON_TEXT = 3;
+/**
+ * Resting chrome — card, popover and field outlines — settles here, not at `AA_NON_TEXT`.
+ * At 3:1 a container border is text-weight and the UI reads as a wireframe; every mainstream
+ * system draws this line far lighter (Tailwind gray-200 1.24, Chakra gray.200 1.30, Material
+ * outline-variant 1.61). 1.4.11 asks that a control be identifiable, not that its resting
+ * border carry the whole job: the fill, the label and the focus ring do that.
+ *
+ * That defence was untrue when it was written. Buttons defined no `_focusVisible` at all, so the
+ * focus ring was Chakra's stock `shadows.outline` — a fixed blue measuring 1.38:1 on a primary
+ * button — and nothing in the library was held to `AA_NON_TEXT` at the moment of focus. It is
+ * true now: `focusRing` (`builders/focusRing.ts`) is derived per brand per mode and gated at 3:1
+ * on the canvas, on a card and on the button's own fill by `builders/focusRing.test.ts`. If that
+ * gate is ever relaxed, this constant loses its justification with it.
+ */
+export const CHROME_BORDER = 1.5;
+// The resting rule between two surfaces — a card edge, a divider, a menu outline. Lighter than
+// CHROME_BORDER, which outlines a control the user acts on.
+export const CHROME_RULE = 1.31;
+/**
+ * A rule is decorative, so it has a ceiling and no floor: soften it until the surface it reads
+ * hardest against sits at `target`, and leave a already-fainter rung alone. Never `settleAcross`
+ * here — that clears a floor on EVERY surface, so one tinted surface drags the rule darker.
+ */
+export function ruleInk(hex, surfaces, target) {
+    const loudest = surfaces.reduce((worst, s) => contrastRatio(hex, s) > contrastRatio(hex, worst) ? s : worst);
+    return contrastRatio(hex, loudest) > target
+        ? softenToContrast(hex, loudest, target)
+        : hex;
+}
 /**
  * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
  * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
@@ -30,11 +59,30 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= 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.
+ */
+export function softenToContrast(hex, backdrop, target) {
+    if (contrastRatio(hex, backdrop) <= target)
+        return hex;
+    const { s, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(backdrop) < 0.5 ? -1 : 1;
+    let softest = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, s);
+        if (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
- * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
- * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ * pickers, the editor's inputs). Settled onto `CHROME_BORDER` — lifted when a brand authored it
+ * invisibly pale, softened when it overshoots. It was previously lifted to `AA_NON_TEXT`, which
+ * shipped 3.85-4.95:1 outlines: a text-weight box around every card and popover.
+ * Resolved here rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
  *
  * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
  * and outside 1.4.11.
@@ -47,7 +95,9 @@ export function withOutlineRung(palette) {
         contrastRatio(current, palette.background[50])
         ? palette.backgroundColor.main
         : palette.background[50];
-    const resolved = liftToContrast(current, backdrop);
+    const resolved = contrastRatio(current, backdrop) > CHROME_BORDER
+        ? softenToContrast(current, backdrop, CHROME_BORDER)
+        : liftToContrast(current, backdrop, CHROME_BORDER);
     if (resolved === current)
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
@@ -63,3 +113,45 @@ export function withOutlineRung(palette) {
 export function resolveHoverTint(seed, restSurface) {
     return liftToContrast(seed, restSurface, MIN_PERCEPTIBLE_STEP);
 }
+/**
+ * Settles ink into `target` against EVERY surface at once. Softening one step can change which
+ * surface is hardest, so resolving against a single pre-computed "hardest" one lands under the
+ * floor on another — that is how radiant and rosewood ended up with an invisible outline on
+ * their muted surface.
+ */
+export function settleAcross(hex, surfaces, target) {
+    const clearsAll = (c) => surfaces.every((s) => contrastRatio(c, s) >= target);
+    if (!clearsAll(hex)) {
+        return surfaces.reduce((ink, s) => liftToContrast(ink, s, target), hex);
+    }
+    const { s: sat, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(surfaces[0]) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, sat);
+        if (!clearsAll(next))
+            break;
+        settled = next;
+    }
+    return settled;
+}
+/**
+ * A pure-grey surface sitting `target` contrast away from `backdrop`. Binary search, not a walk:
+ * `liftToContrast` cannot move a seed already at lightness 0 or 100, and a pure-white panel seeded
+ * itself straight to black. Neutral on purpose — the light palettes are hand-authored and tinted,
+ * so lifting one of their surface rungs turns a selected row into a saturated brand block, while
+ * the derived dark palettes land on grey and look right.
+ */
+export function neutralStep(backdrop, target) {
+    const grey = (l) => withLightness("#808080", l, 0);
+    let lo = hexToHsl(backdrop).l;
+    let hi = relativeLuminance(backdrop) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (lo + hi) / 2;
+        if (contrastRatio(grey(mid), backdrop) < target)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return grey(hi);
+}