pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -8,70 +8,75 @@ import { Select } from "../../Components/Select/Select.styles.js";
 import { Tag } from "../../Components/Tag/Tag.styles.js";
 import { Textarea } from "../../Components/InputTextArea/InputTextArea.style.js";
 import { NumberInput } from "../../Components/NumberInput/NumberInput.styles.js";
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../tokens/builders/accentText.js";
-import { contrastRatio } from "../tokens/builders/color.js";
-import { resolveHoverTint } from "../tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT, accentTextOnCanvas, isDarkCanvas } from "../tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
+import { liftToContrast, resolveHoverTint } from "../tokens/builders/outlineRung.js";
+import { resolveSoftTone } from "../tokens/builders/tone.js";
+import { skeletonShimmer } from "../tokens/builders/skeletonShimmer.js";
+import { tooltipSurface } from "../tokens/builders/tooltipSurface.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
 import { Modal } from "./Modal.styles.js";
 import { Popover } from "./Popover.styles.js";
 import { Slider } from "./Slider.styles.js";
-import { Switch } from "./Switch.styles.js";
-import { Tabs } from "./Tabs.styles.js";
-import { Avatar } from "./Avatar.styles.js";
-// `colorScheme` accepts any Chakra scale, including built-ins we never themed (blackAlpha,
-// whiteAlpha) whose rungs are translucent `rgba(...)` strings, not opaque hex — our contrast
-// 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.
+import { Card } from "./Card.styles.js";
+// NOTE: guards untethemed scales (blackAlpha/whiteAlpha) whose rgba() rungs would throw in hexToRgb.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
-// 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 solidFillStyle = (palette, swatch) => {
+    const rung = solidFillRung(swatch, palette.white, palette.backgroundColor.main);
+    const bg = swatch[rung];
+    return {
+        bg,
+        color: isHexColor(bg) ? labelOnFill(bg, palette.white, palette.black) : swatch[800],
+    };
+};
+// Badge isn't its own component family (no Components/Badge/), so its style config lives here.
 const Badge = {
+    baseStyle: {
+        borderRadius: "full",
+        textTransform: "none",
+        fontWeight: 500,
+        lineHeight: 1.2,
+        display: "inline-flex",
+        alignItems: "center",
+    },
+    sizes: {
+        sm: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+        md: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+    },
     variants: {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
             const swatch = scaleFor(palette, colorScheme);
-            const bg = swatch[500];
-            return {
-                bg,
-                color: isHexColor(bg) ? onFilled(bg, palette.white, palette.black) : swatch[800],
-            };
+            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
-        // it always takes the light-mode branch. Applied to our mode-reversed dark scales, that
-        // branch's fixed rung pair (100/800) measures 4.06 in dark mode, just under AA.
         subtle: ({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
             const swatch = scaleFor(palette, colorScheme);
-            const bg = swatch[100];
-            if (!isHexColor(bg))
-                return { bg, color: swatch[800] };
-            // accentTextOnCanvas keeps brand hue by trying this scale's own rungs first, but some
-            // narrow-gamut hues (e.g. yellow) don't reach far enough at either end to clear AA against
-            // every bg they can land on in dark mode (measured 4.42 for a reversed-yellow badge) — its
-            // own doc admits it falls back to "the most extreme rung" rather than guaranteeing AA. Verify
-            // the candidate actually clears AA; if not, drop brand hue for the guaranteed white/black ink
-            // (onFilled is provably >=4.5 against any bg) rather than ship a near-miss.
-            const accent = accentTextOnCanvas(swatch, bg);
-            if (contrastRatio(accent, bg) >= 4.5)
-                return { bg, color: accent };
-            return { bg, color: onFilled(bg, palette.white, palette.black) };
+            if (!isHexColor(swatch[100]))
+                return { bg: swatch[100], color: swatch[800] };
+            const tone = resolveSoftTone(palette, swatch);
+            return { bg: tone.bg, color: tone.fg };
+        },
+        outline: ({ theme, colorScheme = "gray" }) => {
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            const canvas = palette.backgroundColor.main;
+            const ink = isHexColor(swatch[500])
+                ? liftToContrast(accentTextOnCanvas(swatch, canvas), canvas, AA_NORMAL_TEXT)
+                : swatch[500];
+            return { bg: "transparent", color: ink, boxShadow: `inset 0 0 0 1px ${ink}` };
         },
     },
     defaultProps: {
         variant: "subtle",
         colorScheme: "gray",
+        size: "sm",
     },
 };
-// Chakra's stock FormErrorMessage hardcodes `colors.red.500` (our own `red[500]`, since
-// `createBrandTheme` sets `theme.colors = palette`) — same AA gap as our own ErrorMessage/
-// ErrorComponent, fixed the same way rather than leaving Chakra's raw usage (e.g. FeedbackForm)
-// unfixed.
+// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500, which misses AA on the canvas.
 const FormError = {
     baseStyle: ({ theme }) => {
-        // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
-        // the icon stays on Chakra's raw `red.500`.
         const palette = paletteOf(theme);
         const color = accentTextOnCanvas(palette.red, palette.backgroundColor.main);
         return {
@@ -85,15 +90,31 @@ const $alertBg = cssVar("alert-bg");
 const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = createMultiStyleConfigHelpers(alertAnatomy.keys);
 const Alert = defineAlertStyles({
     variants: {
+        subtle: defineAlertParts(({ theme, colorScheme = "blue" }) => {
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            if (!isHexColor(swatch[100]))
+                return { container: { borderRadius: "xl" } };
+            const tone = resolveSoftTone(palette, swatch);
+            return {
+                container: {
+                    [$alertBg.variable]: tone.bg,
+                    [$alertFg.variable]: tone.fg,
+                    color: tone.fg,
+                    borderRadius: "xl",
+                },
+            };
+        }),
         solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
-            const bg = scaleFor(palette, colorScheme)[500];
+            const swatch = scaleFor(palette, colorScheme);
+            const { bg, color } = solidFillStyle(palette, swatch);
             if (!isHexColor(bg))
                 return { container: {} };
             return {
                 container: {
                     [$alertBg.variable]: bg,
-                    [$alertFg.variable]: onFilled(bg, palette.white, palette.black),
+                    [$alertFg.variable]: color,
                 },
             };
         }),
@@ -101,63 +122,44 @@ const Alert = defineAlertStyles({
 });
 const $tooltipBg = cssVar("tooltip-bg");
 const $tooltipFg = cssVar("tooltip-fg");
-/**
- * Chakra's own Tooltip baseStyle hardcodes `--tooltip-bg`/`--tooltip-fg` to `colors.gray.700`/
- * `colors.whiteAlpha.900` (gated behind `_dark`, which this theme-swap app never triggers — see
- * Menu.styles.ts / createBrandTheme's colorMode comment). Our reversed dark gray ramp makes
- * `gray.700` LIGHT (~L79), so every bare `<Tooltip>` renders a near-white bubble with near-white
- * text on the dark canvas — invisible. A tooltip floats over arbitrary content in either mode, so
- * unlike Menu/Modal/Drawer (which follow the canvas) it needs a FIXED high-contrast chip that
- * doesn't invert with the palette — `black`/`white` are exactly the two tokens `buildDarkPalette`
- * deliberately never remaps, so they stay a stable dark-bg/white-text pair in both modes.
- */
+// One tooltip look, shared with the ToolTip component through `tooltipSurface`.
 const Tooltip = {
-    baseStyle: ({ theme }) => ({
-        [$tooltipBg.variable]: theme.colors.black,
-        [$tooltipFg.variable]: theme.colors.white,
-    }),
+    baseStyle: ({ theme }) => {
+        const { bg, fg } = tooltipSurface(paletteOf(theme));
+        return {
+            [$tooltipBg.variable]: bg,
+            [$tooltipFg.variable]: fg,
+            fontSize: "0.8125rem",
+            fontWeight: 400,
+            lineHeight: 1.5,
+            borderRadius: "lg",
+            px: 2.5,
+            py: 1.5,
+            maxW: "18.75rem",
+        };
+    },
 };
 const $skeletonStart = cssVar("skeleton-start-color");
 const $skeletonEnd = cssVar("skeleton-end-color");
-/**
- * Chakra's own Skeleton baseStyle hardcodes `--skeleton-start-color`/`--skeleton-end-color` to
- * `colors.gray.100`/`colors.gray.400` the same `_dark`-gated way Menu/Popover did (Wave G/H), so
- * every bare `<Skeleton>` shimmers between two near-white tones on the dark canvas. Fixed at the
- * theme level rather than in `Skeletons.tsx`: Chakra's `Skeleton` only writes these vars from its
- * `startColor`/`endColor` PROPS when a caller actually passes them (`useToken` on an empty string
- * resolves to `undefined`, so the prop-driven `cssVarStyles` object stays empty) — an explicit
- * prop still wins via that mechanism, this only supplies the default the base style already owns.
- */
+// NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: paletteOf(theme).gray[100],
-        [$skeletonEnd.variable]: paletteOf(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = skeletonShimmer(paletteOf(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
-// Chakra's `extendTheme` does not REPLACE a component's stock baseStyle when ours is also a
-// function — it calls BOTH and deep-merges the two returned plain objects, key by key. Chakra's
-// own stock Radio (@chakra-ui/theme radio.mjs) writes its checked dot with the shorthand style
-// props `bg`/`w`/`h`/`pos`; an earlier version of this override used the full CSS property names
-// (`background`/`width`/`height`/`position`). A deep merge treats those as DIFFERENT keys, so
-// both survived into the final style object instead of one cleanly overwriting the other — and
-// in practice Chakra's own `bg: "currentColor"` rung won, leaving a hardcoded-black dot. Using
-// the exact same keys Chakra's stock style uses makes every one of ours a scalar overwrite, and
-// `!important` on the two colour-bearing declarations removes any remaining doubt about which
-// value survives serialization — verified against the actual rendered cascade, not just this
-// function's return value (see componentStyles.radioDotMerge.test.ts, which asserts the merge
-// behavior directly rather than only the function output).
+// NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = paletteOf(theme);
-        const fill = scaleFor(palette, colorScheme)[500];
-        const dot = onFilled(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;
-        // ours must supply a value that actually differs from resting, same fix shape as
-        // NavigationBar/OrgSwitcher's "hand a fill its own resting bg as the backdrop" pattern.
+        const swatch = scaleFor(palette, colorScheme);
+        const fill = swatch[solidFillRung(swatch, palette.white, palette.backgroundColor.main)];
+        const dot = labelOnFill(fill, palette.white, palette.black);
         const hoverFill = resolveHoverTint(fill, fill);
         return {
             control: {
@@ -183,16 +185,7 @@ const Radio = {
     defaultProps: { colorScheme: "primary" },
 };
 const $closeButtonBg = cssVar("close-button-bg");
-/**
- * Chakra's stock CloseButton hover/active wash (`blackAlpha.100`/`.200`) only swaps to
- * `whiteAlpha.100`/`.200` under `_dark` — dead in this app (see createBrandTheme's colorMode
- * comment) — so a CloseButton on a dark canvas keeps the light-mode blackAlpha wash, which reads
- * as almost no affordance against a dark surface. The light-mode values themselves also measure
- * borderline against `background[50]` (1.14/1.19, under `MIN_PERCEPTIBLE_STEP`). Branch on the
- * palette's own actual canvas (`isDarkCanvas`), not Chakra's dead colorMode, and step one rung up
- * each scale (`.200`/`.300`) — verified >=1.19 across all 9 brands x both modes
- * (closeButtonHover.test.ts).
- */
+// NOTE: branches on isDarkCanvas, not Chakra's dead `_dark` — its own blackAlpha wash was near-invisible on a dark canvas.
 const CloseButton = {
     baseStyle: ({ theme }) => {
         const palette = paletteOf(theme);
@@ -215,15 +208,13 @@ export const componentStyles = {
     Textarea,
     NumberInput,
     Badge,
+    Card,
     FormError,
     Drawer,
     Menu,
     Modal,
     Popover,
     Slider,
-    Switch,
-    Tabs,
-    Avatar,
     Skeleton,
     Tooltip,
     CloseButton,

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

@@ -2,67 +2,65 @@ import { extendTheme } from "@chakra-ui/react";
 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 { resolveFilledSurface } from "../tokens/builders/filledSurface.js";
 import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
-/**
- * Builds a Chakra theme from a pure brand palette.
- *
- * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
- * which palette they imported.
- *
- * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
- * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
- * the palette automatically without any per-component `_dark` overrides.
- */
+import { focusRingShadow } from "./focusRing.styles.js";
+import { shadowsFor } from "../tokens/primitives/shadows.js";
+import { reducedMotionGlobalStyles } from "./motion.js";
+import { TEXT_STYLES } from "../tokens/primitives/typography.js";
+import { memoiseByReads } from "../tokens/builders/memoByReads.js";
+const memoisedStyle = (value) => typeof value === "function" ? memoiseByReads(value) : value;
+const memoisedGroup = (group) => Object.fromEntries(Object.entries(group).map(([key, value]) => [key, memoisedStyle(value)]));
+const memoisedConfig = (config) => Object.fromEntries(Object.entries(config).map(([key, value]) => [
+    key,
+    key === "baseStyle"
+        ? memoisedStyle(value)
+        : key === "variants" || key === "sizes"
+            ? memoisedGroup(value)
+            : value,
+]));
+// NOTE: extendTheme deep-merges Chakra's and our style output on every call; cache it per theme.
+const withMemoisedStyles = (theme) => {
+    const components = theme.components;
+    return {
+        ...theme,
+        components: {
+            ...components,
+            ...Object.fromEntries(Object.keys(componentStyles).map((name) => [name, memoisedConfig(components[name])])),
+        },
+    };
+};
+// Builds a Chakra theme from a pure brand palette — dark mode works by swapping which palette it carries.
 export const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts,
         ...common,
+        // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
+        shadows: { ...shadowsFor(colorMode), outline: focusRingShadow(palette) },
     };
-    return extendTheme({
+    return withMemoisedStyles(extendTheme({
         ...brand,
         config: {
             ...common.config,
-            // Deliberately ALWAYS "light", even for the dark theme — this is not a bug.
-            //
-            // Dark works by swapping the palette, so the palette is ALREADY mode-adapted by the time
-            // Chakra sees it. Telling Chakra it is in dark mode makes it adapt a second time: its
-            // built-ins carry `_dark` blocks that reach for `gray.700`/`gray.800` assuming a scale where
-            // those rungs are dark. Our dark gray ramp runs dark -> light, so those rungs are LIGHT —
-            // producing a light Card/Skeleton/Menu on a dark canvas. Adapting twice cancels out.
-            //
-            // Keeping Chakra on its `_light` branch is what makes the swap work: those defaults are
-            // gray-RUNG references (`gray.100`, `gray.200`, `gray.600`), and our reversed ramp already
-            // maps each rung to the right value per mode. `semanticTokens` below patches the one default
-            // that hardcodes a literal color instead of a rung.
+            // NOTE: always "light" on purpose, even for the dark theme — Chakra's own `_dark` blocks would adapt an already-adapted palette a second time.
             initialColorMode: "light",
             useSystemColorMode: false,
         },
-        // `chakra-body-bg` is the only stock semantic token that resolves to a LITERAL (`white`)
-        // rather than a gray rung, so it is the only one the palette swap cannot correct on its own —
-        // it is what paints a white Card/Modal/Menu on the dark canvas. `background[50]` is the
-        // canvas-following equivalent: byte-identical `#ffffff` in light, the canvas in dark.
-        // `chakra-inverse-text` is the same literal-`white` problem in text form.
         semanticTokens: {
             colors: {
                 "chakra-body-bg": palette.background[50],
                 "chakra-inverse-text": palette.background[50],
             },
         },
-        // Light themes intentionally declare no global styles — that is the pre-existing
-        // behavior, and adding any would shift every consuming app's light rendering.
-        // Dark needs a canvas, otherwise the page stays white behind the components.
+        // NOTE: light declares no global styles (pre-existing behavior); dark needs one or the page stays white behind components.
         ...(colorMode === "dark"
             ? {
                 styles: {
                     global: {
-                        // Native widgets the page cannot style — the `<select>` dropdown list and the
-                        // time/date picker popups — are painted by the browser, which defaults to light
-                        // and produced white popups on the dark canvas. `color-scheme` is the only way to
-                        // tell it otherwise.
                         html: {
                             colorScheme: "dark",
                         },
@@ -70,36 +68,37 @@ export const createBrandTheme = (palette, options = {}) => {
                             bg: palette.backgroundColor.main,
                             color: palette.text[900],
                         },
-                        // Text selection is another browser-painted surface `color-scheme` doesn't cover —
-                        // the UA default `::selection` stays a light highlight regardless of theme, so
-                        // 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: onFilled(palette.primary[500], palette.white, palette.black),
-                        },
-                        "::-moz-selection": {
-                            background: palette.primary[500],
-                            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.
+                        // NOTE: ::selection isn't covered by color-scheme — branded here with the same onFilled math as buttons.
+                        "::selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
+                        "::-moz-selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
                         ...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
-                        // overridden with the same trick.
+                        // NOTE: autofill paints its own fill via -webkit-box-shadow, so a plain `bg` override can't reach it.
                         "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus": {
                             WebkitBoxShadow: `0 0 0px 1000px ${palette.backgroundColor.secondary} inset`,
                             WebkitTextFillColor: palette.text[900],
                             caretColor: palette.text[900],
                         },
+                        ...motionRule,
                     },
                 },
             }
-            : {}),
+            : options.reducedMotion === "global"
+                ? { styles: { global: motionRule } }
+                : {}),
+        textStyles: TEXT_STYLES,
         components: componentStyles,
-    });
+    }));
 };
 export default createBrandTheme;

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

@@ -0,0 +1,37 @@
+// Web binding for the focusRing token pair — colors come from tokens/builders/focusRing.ts; CSS shape is web-only.
+/** 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;
+// NOTE: a box-shadow, not an outline — drawn outside the border box so it never resizes the control.
+export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
+export const insetFocusRingShadow = (colors) => `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+    `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`;
+// NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
+export const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
+// NOTE: transparent outline isn't decorative — forced-colors mode drops box-shadow but repaints an outline.
+export const focusVisibleRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusRingShadow(colors),
+});
+/** Blurred, never a flat band: a band has a hard outer edge at every opacity and reads as a second border. */
+export const FOCUS_GLOW_BLUR = 6;
+/** Negative spread keeps the bloom tight to the border instead of haloing the whole control. */
+export const FOCUS_GLOW_SPREAD = -1;
+/** Step on `primary.opacity`. Safe to raise because a blur has no edge to sharpen. */
+export const FOCUS_GLOW_ALPHA = 32;
+export const focusGlowShadow = (colors) => `0 0 ${FOCUS_GLOW_BLUR}px ${FOCUS_GLOW_SPREAD}px ${colors.primary.opacity[FOCUS_GLOW_ALPHA]}`;
+/** Field focus: the brand border is the indicator, this only makes it findable. */
+export const fieldFocusVisible = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusGlowShadow(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/chakra/fonts.web.js

@@ -1,10 +1,6 @@
 /** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
 import "@fontsource-variable/inter/index.css";
 import typography from "../tokens/primitives/typography.js";
-/**
- * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
- * typography tokens. The CSS import lives here rather than in `tokens/` so the token
- * layer stays portable to mobile.
- */
+// Web font binding: loads Inter (CSS side-effect) and re-exports typography tokens, kept out of tokens/ for portability.
 const fonts = typography;
 export default fonts;

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

@@ -0,0 +1,34 @@
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
+const MEDIA = "(prefers-reduced-motion: reduce)";
+export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
+/** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
+export const reducedMotionSx = (overrides = {}) => ({
+    [REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },
+});
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export const MOTION_KEEP_CLASS = "pz-motion-keep";
+const KEPT = [
+    ".chakra-spinner",
+    ".chakra-progress",
+    ".chakra-progress *",
+    `.${MOTION_KEEP_CLASS}`,
+    `.${MOTION_KEEP_CLASS} *`,
+];
+const notKept = KEPT.map((selector) => `:not(${selector})`).join("");
+export const REDUCED_MOTION_SELECTOR = [
+    `*${notKept}`,
+    `*${notKept}::before`,
+    `*${notKept}::after`,
+].join(", ");
+export const reducedMotionGlobalStyles = {
+    [REDUCED_MOTION_QUERY]: {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: "0.01ms !important",
+            animationDuration: "0.01ms !important",
+            animationIterationCount: "1 !important",
+            scrollBehavior: "auto !important",
+        },
+    },
+};

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

@@ -0,0 +1,46 @@
+import { overlayScrim } from "../tokens/builders/scrim.js";
+import { raisedRule } from "../tokens/builders/surfaceRaised.js";
+import { RADIUS_ROLE } from "../tokens/primitives/radii.js";
+export const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export const POPUP_SURFACE = { borderRadius: RADIUS_ROLE.float, boxShadow: "md" };
+/** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
+export const overlayScrimStyles = (colors) => ({
+    bg: overlayScrim(colors),
+    backdropFilter: OVERLAY_BLUR,
+});
+/** Shared dialog chrome for Modal and Drawer: surface, header/body/footer rhythm, close button. */
+export const dialogPartStyles = (colors) => ({
+    overlay: overlayScrimStyles(colors),
+    dialog: {
+        color: colors.text[900],
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: colors.boxborder[200],
+        boxShadow: "lg",
+    },
+    header: {
+        px: 5,
+        py: 4,
+        pe: 12,
+        fontSize: "1rem",
+        fontWeight: 600,
+        lineHeight: 1.5,
+        color: colors.header[900],
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: raisedRule(colors),
+    },
+    closeButton: { top: 3, insetEnd: 4 },
+    body: { px: 5, py: 4 },
+    footer: {
+        px: 5,
+        py: 4,
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 3,
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: raisedRule(colors),
+    },
+});

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

@@ -1,9 +1,19 @@
 import { assertPixelizePalette } from "../assertPalette.js";
+import { scaleNamed } from "../tokens/builders/paletteScale.js";
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 export const paletteOf = (theme) => assertPixelizePalette(theme);
-const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-/**
- * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
- * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
- */
-export const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+const warned = new Set();
+export const warnUnknownColorScheme = (colorScheme) => {
+    if (process.env.NODE_ENV === "production" || warned.has(colorScheme))
+        return;
+    warned.add(colorScheme);
+    console.warn(`[pixelize-design-library] colorScheme "${colorScheme}" is not a themed colour scale; using the fallback scale.`);
+};
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns use the fallback.
+export const scaleFor = (palette, colorScheme, fallback = palette.gray) => {
+    const scale = scaleNamed(palette, colorScheme);
+    if (scale)
+        return scale;
+    warnUnknownColorScheme(colorScheme);
+    return fallback;
+};

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

@@ -0,0 +1,3 @@
+import { BORDER_WIDTHS } from "../tokens/primitives/borderWidths.js";
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+export const insetRingShadow = (color, width = "hairline") => `inset 0 0 0 ${BORDER_WIDTHS[width]} ${color}`;