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

package/dist/Hooks/exclusiveOverlay.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetExclusiveOverlay = exports.exclusiveClose = exports.exclusiveOpen = void 0;
+let active = null;
+const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+exports.exclusiveOpen = exclusiveOpen;
+const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+exports.exclusiveClose = exclusiveClose;
+/** Test-only reset — not exported from the package root. */
+const resetExclusiveOverlay = () => {
+    active = null;
+};
+exports.resetExclusiveOverlay = resetExclusiveOverlay;

package/dist/Hooks/useExclusiveOverlay.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
+ * immediately before opening; `onClose` is invoked when another overlay opens.
+ */
+export declare const useExclusiveOverlay: (isOpen: boolean, onClose: () => void) => () => void;

package/dist/Hooks/useExclusiveOverlay.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExclusiveOverlay = void 0;
+const react_1 = require("react");
+const exclusiveOverlay_1 = require("./exclusiveOverlay");
+/**
+ * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
+ * immediately before opening; `onClose` is invoked when another overlay opens.
+ */
+const useExclusiveOverlay = (isOpen, onClose) => {
+    const id = (0, react_1.useId)();
+    const onCloseRef = (0, react_1.useRef)(onClose);
+    onCloseRef.current = onClose;
+    const requestOpen = (0, react_1.useCallback)(() => {
+        (0, exclusiveOverlay_1.exclusiveOpen)(id, () => onCloseRef.current());
+    }, [id]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            (0, exclusiveOverlay_1.exclusiveClose)(id);
+        }
+    }, [isOpen, id]);
+    return requestOpen;
+};
+exports.useExclusiveOverlay = useExclusiveOverlay;

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,8 @@ export declare const Menu: {
             [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
             borderColor: string;
         };
         item: {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const rowStates_1 = require("../tokens/builders/rowStates");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -24,16 +25,19 @@ const $bg = (0, react_1.cssVar)("menu-bg");
 const $itemBg = (0, react_1.cssVar)("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = (0, paletteFromTheme_1.paletteOf)(theme);
-    const hoverBg = colors.primary.opacity[8];
-    const activeBg = colors.primary.opacity[16];
+    const rowBgs = (0, rowStates_1.listRowBackgrounds)(colors);
+    const hoverBg = rowBgs.active;
+    const activeBg = rowBgs.selectedActive;
     return {
         list: {
             [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
             color: colors.text[900],
-            // Chakra's default is its own gray.200, which reads as a hard rule against our
-            // surfaces. The menu is already separated by its shadow.
-            borderColor: colors.border[200],
+            // 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,8 @@ export declare const componentStyles: {
                 [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
                 borderColor: string;
             };
             item: {
@@ -143,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/componentStyles.js

@@ -12,6 +12,7 @@ const Tag_styles_1 = require("../../Components/Tag/Tag.styles");
 const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextArea.style");
 const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
 const accentText_1 = require("../tokens/builders/accentText");
+const filledSurface_1 = require("../tokens/builders/filledSurface");
 const color_1 = require("../tokens/builders/color");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
 const Drawer_styles_1 = require("./Drawer.styles");
@@ -27,6 +28,14 @@ const Avatar_styles_1 = require("./Avatar.styles");
 // math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
 // Chakra's own original fixed rung instead of computing contrast on a color it can't parse.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
+const solidFillStyle = (palette, swatch) => {
+    const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white);
+    const bg = swatch[rung];
+    return {
+        bg,
+        color: isHexColor(bg) ? (0, filledSurface_1.labelOnFill)(bg, palette.white, palette.black) : swatch[800],
+    };
+};
 // Badge isn't its own component family (no Components/Badge/), so its style config lives here —
 // Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
 const Badge = {
@@ -34,11 +43,7 @@ const Badge = {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = (0, paletteFromTheme_1.paletteOf)(theme);
             const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
-            const bg = swatch[500];
-            return {
-                bg,
-                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, palette.white, palette.black) : swatch[800],
-            };
+            return solidFillStyle(palette, swatch);
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
         // colorMode — which this app never toggles (dark mode swaps the palette object instead), so
@@ -90,13 +95,14 @@ const Alert = defineAlertStyles({
     variants: {
         solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
             const palette = (0, paletteFromTheme_1.paletteOf)(theme);
-            const bg = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const { bg, color } = solidFillStyle(palette, swatch);
             if (!isHexColor(bg))
                 return { container: {} };
             return {
                 container: {
                     [$alertBg.variable]: bg,
-                    [$alertFg.variable]: (0, accentText_1.onFilled)(bg, palette.white, palette.black),
+                    [$alertFg.variable]: color,
                 },
             };
         }),
@@ -154,8 +160,9 @@ const Skeleton = {
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);
-        const fill = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme)[500];
-        const dot = (0, accentText_1.onFilled)(fill, palette.white, palette.black);
+        const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white)];
+        const dot = (0, filledSurface_1.labelOnFill)(fill, palette.white, palette.black);
         // A browser probe found the checked radio's hover repeating its own resting `fill` —
         // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
         // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;

package/dist/Theme/chakra/createBrandTheme.js

@@ -8,8 +8,9 @@ const react_1 = require("@chakra-ui/react");
 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 filledSurface_1 = require("../tokens/builders/filledSurface");
 const scrollbar_1 = require("../tokens/builders/scrollbar");
+const focusRing_styles_1 = require("./focusRing.styles");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -27,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,
@@ -81,14 +88,20 @@ const createBrandTheme = (palette, options = {}) => {
                         // selecting text anywhere (e.g. a table cell) shows a stray white/lavender patch on
                         // the dark canvas. Brand it instead, with WCAG-safe ink via the same `onFilled` math
                         // used for buttons/badges.
-                        "::selection": {
-                            background: palette.primary[500],
-                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
-                        },
-                        "::-moz-selection": {
-                            background: palette.primary[500],
-                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
-                        },
+                        "::selection": (() => {
+                            const solid = (0, filledSurface_1.resolveFilledSurface)(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
+                        "::-moz-selection": (() => {
+                            const solid = (0, filledSurface_1.resolveFilledSurface)(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
                         // OS's generic dark gray, not brand-aware.
                         ...(0, scrollbar_1.globalScrollbarStyles)(palette),

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],
     };

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

@@ -46,6 +46,7 @@ const sidebarAccent_1 = require("../builders/sidebarAccent");
 const mutedText_1 = require("../builders/mutedText");
 const semanticText_1 = require("../builders/semanticText");
 const resolvedRungs_1 = require("../builders/resolvedRungs");
+const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
@@ -56,9 +57,13 @@ const finalizeLightPalette = (source) => ({
     semanticText: (0, semanticText_1.buildSemanticText)(source.semantic, source.backgroundColor.main),
     onPrimary: (0, accentText_1.onFilled)(source.primary[500], source.white, source.black),
     onSemantic: (0, semanticText_1.buildOnSemantic)(source.semantic, source.white, source.black),
+    focusRing: (0, focusRing_1.buildFocusRing)(source),
 });
 exports.finalizeLightPalette = finalizeLightPalette;
-const resolveRungs = (palette) => (0, surfaceRungs_1.withSurfaceRungs)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.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) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette)))));
 const lightBrand = (source) => resolveRungs((0, exports.finalizeLightPalette)(source));
 /** Light palette per brand. `lavender` is the base the other six extend. */
 exports.lightPalettes = {

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts

@@ -197,6 +197,7 @@ declare const palette: {
     purple: import("../..").ColorScale;
     pink: import("../..").ColorScale;
     backgroundColor: import("../..").NamedSurfaces;
+    focusRing: import("../..").FocusRingTokens;
     sidebar: import("../..").SidebarTokens;
     semanticText: import("../..").SemanticTextTokens;
     textMuted: string;

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

@@ -8,6 +8,7 @@ const accentText_1 = require("./accentText");
 const sidebarAccent_1 = require("./sidebarAccent");
 const mutedText_1 = require("./mutedText");
 const semanticText_1 = require("./semanticText");
+const focusRing_1 = require("./focusRing");
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -246,6 +247,7 @@ 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),
@@ -276,7 +278,7 @@ function buildDarkPalette(light) {
         purple: (0, exports.reverseScale)(light.purple),
         pink: (0, exports.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),
@@ -293,6 +295,9 @@ function buildDarkPalette(light) {
         semanticText: (0, semanticText_1.buildSemanticText)(semantic, namedSurfaces.main),
         onPrimary: (0, accentText_1.onFilled)(primary[500], light.white, light.black),
         onSemantic: (0, semanticText_1.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: (0, focusRing_1.buildFocusRing)({ primary, background, backgroundColor: namedSurfaces }),
         // Sidebar is already near-black in light mode, so it needs no inversion.
         sidebar: (0, sidebarAccent_1.withSidebarTokens)(light),
         boxShadow: {

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

@@ -34,7 +34,7 @@ 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/Theme/tokens/builders/filledSurface.d.ts

@@ -0,0 +1,29 @@
+import type { ColorScale, PaletteProps } from "../types";
+/** Resolved fill + ink for a solid surface, including hover/active steps. */
+export type FilledSurface = {
+    rung: keyof ColorScale;
+    fill: string;
+    color: string;
+    hoverRung: keyof ColorScale;
+    hoverFill: string;
+    hoverColor: string;
+    activeRung: keyof ColorScale;
+    activeFill: string;
+    activeColor: string;
+};
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+export declare const solidFillRung: (scale: ColorScale, white: string) => keyof ColorScale;
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+export declare const labelOnFill: (fill: string, white: string, black: string) => string;
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+export declare const resolveFilledSurface: (scale: ColorScale, colors: Pick<PaletteProps, "white" | "black" | "backgroundColor">) => FilledSurface;

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = void 0;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+const solidFillRung = (scale, white) => {
+    if ((0, color_1.contrastRatio)(scale[500], white) >= accentText_1.AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= accentText_1.AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+exports.solidFillRung = solidFillRung;
+const steppedRung = (base, canvas, step) => {
+    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+const darkerFillRung = (scale, canvas, white, step) => {
+    const base = (0, exports.solidFillRung)(scale, white);
+    if (base === 500) {
+        const mode = (0, accentText_1.isDarkCanvas)(canvas) ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    return stepped;
+};
+exports.darkerFillRung = darkerFillRung;
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+const labelOnFill = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
+exports.labelOnFill = labelOnFill;
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+const resolveFilledSurface = (scale, colors) => {
+    const { white, black, backgroundColor } = colors;
+    const canvas = backgroundColor.main;
+    const rung = (0, exports.solidFillRung)(scale, white);
+    const fill = scale[rung];
+    const hoverRung = (0, exports.darkerFillRung)(scale, canvas, white, 0);
+    const hoverFill = scale[hoverRung];
+    const activeRung = (0, exports.darkerFillRung)(scale, canvas, white, 1);
+    const activeFill = scale[activeRung];
+    return {
+        rung,
+        fill,
+        color: (0, exports.labelOnFill)(fill, white, black),
+        hoverRung,
+        hoverFill,
+        hoverColor: (0, exports.labelOnFill)(hoverFill, white, black),
+        activeRung,
+        activeFill,
+        activeColor: (0, exports.labelOnFill)(activeFill, white, black),
+    };
+};
+exports.resolveFilledSurface = resolveFilledSurface;