pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

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

@@ -0,0 +1,45 @@
+import { cardAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { paletteOf } from "./paletteFromTheme.js";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(cardAnatomy.keys);
+const $bg = cssVar("card-bg");
+const $padding = cssVar("card-padding");
+const $shadow = cssVar("card-shadow");
+const $radius = cssVar("card-radius");
+const $border = cssVar("card-border-width");
+const $borderColor = cssVar("card-border-color");
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = paletteOf(theme);
+    return {
+        container: {
+            [$bg.variable]: colors.background[50],
+            [$radius.variable]: "radii.xl",
+            [$borderColor.variable]: colors.boxborder[200],
+            color: colors.text[900],
+            "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": { paddingTop: 0 },
+        },
+        header: { color: colors.header[900], fontSize: "1rem", fontWeight: 600 },
+    };
+});
+const sizes = {
+    sm: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "0.75rem 1rem" },
+    }),
+    md: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1rem 1.25rem" },
+    }),
+    lg: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1.25rem 1.5rem" },
+    }),
+};
+const variants = {
+    outline: definePartsStyle({
+        container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
+    }),
+};
+export const Card = defineMultiStyleConfig({
+    baseStyle,
+    sizes,
+    variants,
+    defaultProps: { variant: "outline", size: "md" },
+});

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

@@ -1,21 +1,22 @@
 import { paletteOf } from "./paletteFromTheme.js";
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { drawerAnatomy } from "@chakra-ui/anatomy";
+import { dialogPartStyles } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
 const $bg = cssVar("drawer-bg");
-/**
- * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
- * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
- * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    dialog: {
-        [$bg.variable]: paletteOf(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: paletteOf(theme).text[900],
-    },
-}));
+// Chakra's stock `--drawer-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = paletteOf(theme);
+    const parts = dialogPartStyles(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+        },
+    };
+});
 export const Drawer = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -1,43 +1,34 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/anatomy";
+import { listRowBackgrounds } from "../tokens/builders/rowStates.js";
+import { OPTION_ROW_SIZES, OPTION_ROW_RADIUS } from "../tokens/primitives/optionRowSizes.js";
 import { paletteOf } from "./paletteFromTheme.js";
+const itemRowSpec = OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
-/**
- * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
- * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
- * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
- * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
- * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
- * ThemeSwitcher's BrandMenu/MenuVariant).
- *
- * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
- * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
- * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
- * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
- * the list fix.
- */
+// NOTE: fixes Chakra's MenuList/MenuItem both hardcoding --menu-bg to white via dead _dark — item needs its own var too, or hover snaps back to white.
 const $itemBg = cssVar("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = paletteOf(theme);
-    const hoverBg = colors.primary.opacity[8];
-    const activeBg = colors.primary.opacity[16];
+    const rowBgs = listRowBackgrounds(colors);
+    const hoverBg = rowBgs.active;
+    const activeBg = rowBgs.selectedActive;
     return {
         list: {
-            [$bg.variable]: colors.backgroundColor.light,
+            [$bg.variable]: colors.surfaceRaised,
             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],
+            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
-        // here for the item's resting bg risked the two colliding under the same custom
-        // property. A dedicated var keeps the item's hover/focus tint fully independent of the
-        // list's background var.
         item: {
+            minH: itemRowSpec.minH,
+            px: itemRowSpec.px,
+            py: itemRowSpec.py,
+            mx: itemRowSpec.mx,
+            fontSize: itemRowSpec.fontSize,
+            borderRadius: OPTION_ROW_RADIUS,
             bg: "transparent",
             _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },

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

@@ -1,21 +1,23 @@
 import { paletteOf } from "./paletteFromTheme.js";
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { modalAnatomy } from "@chakra-ui/anatomy";
+import { dialogPartStyles } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(modalAnatomy.keys);
 const $bg = cssVar("modal-bg");
-/**
- * Chakra's own Modal baseStyle hardcodes `--modal-bg` to "colors.white" (gated behind `_dark`,
- * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * `<ModalContent>` in every consuming app renders a white dialog on the dark canvas — the same
- * bug class `Menu.styles.ts` already fixes for dropdowns.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    dialog: {
-        [$bg.variable]: paletteOf(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: paletteOf(theme).text[900],
-    },
-}));
+// Chakra's stock `--modal-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = paletteOf(theme);
+    const parts = dialogPartStyles(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+            borderRadius: "xl",
+        },
+    };
+});
 export const Modal = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -4,22 +4,18 @@ import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
-/**
- * Same bug class as Menu (Wave G): Chakra's own Popover baseStyle hardcodes `--popper-bg` to
- * "#fff" and `--popper-arrow-shadow-color` to `colors.gray.200`, both gated behind `_dark`, which
- * this theme-swap app never triggers (see Menu.styles.ts / createBrandTheme's colorMode comment).
- * Every bare `<PopoverContent>` renders a white card with a light arrow shadow on the dark canvas.
- * `--popper-arrow-bg` is left alone — Chakra's own baseStyle already points it at `$popperBg`, so
- * fixing `$popperBg` here fixes the arrow fill too.
- */
+// NOTE: fixes Chakra's Popover hardcoding --popper-bg/#fff via dead `_dark` — fixing $popperBg also fixes the arrow fill.
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = paletteOf(theme);
     return {
         content: {
-            [$popperBg.variable]: colors.backgroundColor.light,
+            [$popperBg.variable]: colors.surfaceRaised,
             bg: $popperBg.reference,
-            [$arrowShadowColor.variable]: colors.border[200],
+            [$arrowShadowColor.variable]: colors.boxborder[200],
             color: colors.text[900],
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
     };
 });

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

@@ -3,12 +3,7 @@ import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { sliderAnatomy } from "@chakra-ui/anatomy";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
 const $thumbBg = cssVar("slider-thumb-bg");
-/**
- * Chakra's own Slider thumb baseStyle hardcodes `bg: "white"` with no `_dark` gate at all (unlike
- * track/filledTrack, which at least have one Chakra's own colorMode never triggers here) — so
- * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
- * same bug class as Menu/Modal but without even the dead `_dark` branch.
- */
+// NOTE: fixes Chakra's SliderThumb hardcoding bg: "white" with no _dark gate at all.
 const baseStyle = definePartsStyle(({ theme }) => ({
     thumb: {
         [$thumbBg.variable]: paletteOf(theme).backgroundColor.light,

package/dist/esm/Theme/chakra/common.web.js

@@ -1,8 +1,4 @@
 import { space, sizes, radii, shadows, zIndices, breakpoints, lineHeights, letterSpacings, } from "../tokens/primitives/index.js";
-/**
- * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
- * concern, which is why this assembly lives here and not in `tokens/`.
- */
 const common = {
     lineHeights,
     letterSpacings,
@@ -13,9 +9,7 @@ const common = {
     radii,
     zIndices,
     config: {
-        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
-        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
-        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        // NOTE: must stay "chakra" — a custom prefix breaks every var(--chakra-colors-*) an app writes in plain CSS.
         cssVarPrefix: "chakra",
     },
 };

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

@@ -8,70 +8,74 @@ 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 { 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);
+    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 — same AA gap as our ErrorComponent.
 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 +89,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,33 +121,26 @@ 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],
@@ -136,28 +149,13 @@ const Skeleton = {
         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)];
+        const dot = labelOnFill(fill, palette.white, palette.black);
         const hoverFill = resolveHoverTint(fill, fill);
         return {
             control: {
@@ -183,16 +181,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 +204,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,18 +2,10 @@ 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";
+// 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";
@@ -21,48 +13,28 @@ export const createBrandTheme = (palette, options = {}) => {
         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: { ...common.shadows, outline: focusRingShadow(palette) },
     };
     return 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,26 +42,23 @@ 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],