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

package/dist/Theme/chakra/componentStyles.js

@@ -12,69 +12,74 @@ 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 color_1 = require("../tokens/builders/color");
+const filledSurface_1 = require("../tokens/builders/filledSurface");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
+const tone_1 = require("../tokens/builders/tone");
+const skeletonShimmer_1 = require("../tokens/builders/skeletonShimmer");
+const tooltipSurface_1 = require("../tokens/builders/tooltipSurface");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
 const Modal_styles_1 = require("./Modal.styles");
 const Popover_styles_1 = require("./Popover.styles");
 const Slider_styles_1 = require("./Slider.styles");
-const Switch_styles_1 = require("./Switch.styles");
-const Tabs_styles_1 = require("./Tabs.styles");
-const Avatar_styles_1 = require("./Avatar.styles");
-// `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.
+const Card_styles_1 = require("./Card.styles");
+// 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 = (0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main);
+    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.
 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 = (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
-        // 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 = (0, paletteFromTheme_1.paletteOf)(theme);
             const swatch = (0, paletteFromTheme_1.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 = (0, accentText_1.accentTextOnCanvas)(swatch, bg);
-            if ((0, color_1.contrastRatio)(accent, bg) >= 4.5)
-                return { bg, color: accent };
-            return { bg, color: (0, accentText_1.onFilled)(bg, palette.white, palette.black) };
+            if (!isHexColor(swatch[100]))
+                return { bg: swatch[100], color: swatch[800] };
+            const tone = (0, tone_1.resolveSoftTone)(palette, swatch);
+            return { bg: tone.bg, color: tone.fg };
+        },
+        outline: ({ theme, colorScheme = "gray" }) => {
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            const canvas = palette.backgroundColor.main;
+            const ink = isHexColor(swatch[500])
+                ? (0, outlineRung_1.liftToContrast)((0, accentText_1.accentTextOnCanvas)(swatch, canvas), canvas, accentText_1.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 = (0, paletteFromTheme_1.paletteOf)(theme);
         const color = (0, accentText_1.accentTextOnCanvas)(palette.red, palette.backgroundColor.main);
         return {
@@ -88,15 +93,31 @@ const $alertBg = (0, react_1.cssVar)("alert-bg");
 const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.alertAnatomy.keys);
 const Alert = defineAlertStyles({
     variants: {
+        subtle: defineAlertParts(({ theme, colorScheme = "blue" }) => {
+            const palette = (0, paletteFromTheme_1.paletteOf)(theme);
+            const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+            if (!isHexColor(swatch[100]))
+                return { container: { borderRadius: "xl" } };
+            const tone = (0, tone_1.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 = (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,
                 },
             };
         }),
@@ -104,63 +125,44 @@ const Alert = defineAlertStyles({
 });
 const $tooltipBg = (0, react_1.cssVar)("tooltip-bg");
 const $tooltipFg = (0, react_1.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 } = (0, tooltipSurface_1.tooltipSurface)((0, paletteFromTheme_1.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 = (0, react_1.cssVar)("skeleton-start-color");
 const $skeletonEnd = (0, react_1.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]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
-        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = (0, skeletonShimmer_1.skeletonShimmer)((0, paletteFromTheme_1.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 = (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);
-        // 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 = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
+        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main)];
+        const dot = (0, filledSurface_1.labelOnFill)(fill, palette.white, palette.black);
         const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
         return {
             control: {
@@ -186,16 +188,7 @@ const Radio = {
     defaultProps: { colorScheme: "primary" },
 };
 const $closeButtonBg = (0, react_1.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 = (0, paletteFromTheme_1.paletteOf)(theme);
@@ -218,15 +211,13 @@ exports.componentStyles = {
     Textarea: InputTextArea_style_1.Textarea,
     NumberInput: NumberInput_styles_1.NumberInput,
     Badge,
+    Card: Card_styles_1.Card,
     FormError,
     Drawer: Drawer_styles_1.Drawer,
     Menu: Menu_styles_1.Menu,
     Modal: Modal_styles_1.Modal,
     Popover: Popover_styles_1.Popover,
     Slider: Slider_styles_1.Slider,
-    Switch: Switch_styles_1.Switch,
-    Tabs: Tabs_styles_1.Tabs,
-    Avatar: Avatar_styles_1.Avatar,
     Skeleton,
     Tooltip,
     CloseButton,

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

@@ -1,17 +1,11 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
+import { type ReducedMotionScope } from "./motion";
+/** Colour mode and reduced-motion scope for a built brand theme. */
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;
+    /** `"global"` adds one document-wide reduced-motion rule; the default leaves it to each component. */
+    reducedMotion?: ReducedMotionScope;
 }
-/**
- * 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.
- */
 export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
 export default createBrandTheme;

package/dist/Theme/chakra/createBrandTheme.js

@@ -8,67 +8,65 @@ 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");
-/**
- * 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.
- */
+const focusRing_styles_1 = require("./focusRing.styles");
+const shadows_1 = require("../tokens/primitives/shadows");
+const motion_1 = require("./motion");
+const typography_1 = require("../tokens/primitives/typography");
+const memoByReads_1 = require("../tokens/builders/memoByReads");
+const memoisedStyle = (value) => typeof value === "function" ? (0, memoByReads_1.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_1.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.
 const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? motion_1.reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts_web_1.default,
         ...common_web_1.default,
+        // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
+        shadows: { ...(0, shadows_1.shadowsFor)(colorMode), outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
     };
-    return (0, react_1.extendTheme)({
+    return withMemoisedStyles((0, react_1.extendTheme)({
         ...brand,
         config: {
             ...common_web_1.default.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",
                         },
@@ -76,37 +74,38 @@ 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: (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),
-                        },
-                        // `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 = (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,
+                            };
+                        })(),
                         ...(0, scrollbar_1.globalScrollbarStyles)(palette),
-                        // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
-                        // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
-                        // reaches it — a bright light box survives on every dark autofilled field unless
-                        // 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: typography_1.TEXT_STYLES,
         components: componentStyles_1.componentStyles,
-    });
+    }));
 };
 exports.createBrandTheme = createBrandTheme;
 exports.default = exports.createBrandTheme;

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

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

@@ -1,10 +1,5 @@
 /** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
 import "@fontsource-variable/inter/index.css";
-/**
- * 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.
- */
 declare const fonts: {
     fonts: {
         body: string;
@@ -12,7 +7,9 @@ declare const fonts: {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;

package/dist/Theme/chakra/fonts.web.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
 require("@fontsource-variable/inter/index.css");
 const typography_1 = __importDefault(require("../tokens/primitives/typography"));
-/**
- * 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_1.default;
 exports.default = fonts;

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

@@ -0,0 +1,20 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
+export declare const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export declare const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
+export declare const usePrefersReducedMotion: () => boolean;
+/** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
+export declare const reducedMotionSx: (overrides?: SystemStyleObject) => SystemStyleObject;
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export declare const MOTION_KEEP_CLASS = "pz-motion-keep";
+export declare const REDUCED_MOTION_SELECTOR: string;
+export declare const reducedMotionGlobalStyles: {
+    "@media (prefers-reduced-motion: reduce)": {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: string;
+            animationDuration: string;
+            animationIterationCount: string;
+            scrollBehavior: string;
+        };
+    };
+};
+export type ReducedMotionScope = "components" | "global";