pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

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

@@ -10,14 +10,27 @@ declare const $alertBg: {
 export declare const componentStyles: {
     Alert: {
         baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+            keys: ("container" | "icon" | "spinner" | "title" | "description")[];
         }> | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("title" | "container" | "icon" | "spinner" | "description")[];
+                keys: ("container" | "icon" | "spinner" | "title" | "description")[];
             }>;
         } | undefined;
         variants?: {
+            subtle: ({ theme, colorScheme }: StyleFunctionProps) => {
+                container: {
+                    borderRadius: string;
+                    color?: undefined;
+                };
+            } | {
+                container: {
+                    [$alertBg.variable]: string;
+                    [$alertFg.variable]: string;
+                    color: string;
+                    borderRadius: string;
+                };
+            };
             solid: ({ theme, colorScheme }: StyleFunctionProps) => {
                 container: {
                     [$alertBg.variable]: string;
@@ -27,10 +40,10 @@ export declare const componentStyles: {
         } | undefined;
         defaultProps?: {
             size?: string | number | undefined;
-            variant?: "solid" | undefined;
+            variant?: "solid" | "subtle" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("title" | "container" | "icon" | "spinner" | "description")[];
+        parts: ("container" | "icon" | "spinner" | "title" | "description")[];
     };
     Checkbox: ComponentStyleConfig;
     Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
@@ -41,23 +54,108 @@ export declare const componentStyles: {
     Textarea: ComponentStyleConfig;
     NumberInput: ComponentStyleConfig;
     Badge: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    Card: {
+        baseStyle?: (({ theme }: StyleFunctionProps) => {
+            container: {
+                [x: string]: string | {
+                    paddingTop: number;
+                };
+                color: string;
+                "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": {
+                    paddingTop: number;
+                };
+            };
+            header: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+        }) | undefined;
+        sizes?: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            md: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        variants?: {
+            outline: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        } | undefined;
+        defaultProps?: {
+            size?: "sm" | "md" | "lg" | undefined;
+            variant?: "outline" | undefined;
+            colorScheme?: string | undefined;
+        } | undefined;
+        parts: ("header" | "container" | "body" | "footer")[];
+    };
     FormError: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Drawer: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: string;
                 bg: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            overlay: {
+                bg: string;
+                backdropFilter: string;
+            };
+            header: {
+                px: number;
+                py: number;
+                pe: number;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                color: string;
+                borderBottomWidth: string;
+                borderBottomStyle: string;
+                borderBottomColor: string;
+            };
+            closeButton: {
+                top: number;
+                insetEnd: number;
+            };
+            body: {
+                px: number;
+                py: number;
+            };
+            footer: {
+                px: number;
+                py: number;
+                display: string;
+                justifyContent: string;
+                gap: number;
+                borderTopWidth: string;
+                borderTopStyle: string;
+                borderTopColor: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -65,7 +163,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -99,12 +197,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+                keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+                keys: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -112,24 +210,62 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
+        parts: ("divider" | "button" | "icon" | "list" | "command" | "item" | "groupTitle")[];
     };
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             dialog: {
-                [x: string]: string;
                 bg: string;
+                borderRadius: string;
                 color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            overlay: {
+                bg: string;
+                backdropFilter: string;
+            };
+            header: {
+                px: number;
+                py: number;
+                pe: number;
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: number;
+                color: string;
+                borderBottomWidth: string;
+                borderBottomStyle: string;
+                borderBottomColor: string;
+            };
+            closeButton: {
+                top: number;
+                insetEnd: number;
+            };
+            body: {
+                px: number;
+                py: number;
+            };
+            footer: {
+                px: number;
+                py: number;
+                display: string;
+                justifyContent: string;
+                gap: number;
+                borderTopWidth: string;
+                borderTopStyle: string;
+                borderTopColor: string;
             };
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+                keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -137,7 +273,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+        parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -152,12 +288,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+                keys: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -165,7 +301,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("header" | "body" | "footer" | "content" | "closeButton" | "popper" | "arrow")[];
+        parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -176,94 +312,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
-    };
-    Switch: {
-        baseStyle?: (({ theme }: StyleFunctionProps) => {
-            thumb: {
-                [x: string]: string;
-                bg: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        variants?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("label" | "track" | "container" | "thumb")[];
-            }>;
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: string | number | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("label" | "track" | "container" | "thumb")[];
-    };
-    Tabs: {
-        baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-        }> | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-            }>;
-        } | undefined;
-        variants?: {
-            enclosed: ({ theme }: StyleFunctionProps) => {
-                tab: {
-                    _selected: {
-                        [x: string]: string;
-                    };
-                };
-            };
-            "enclosed-colored": ({ theme }: StyleFunctionProps) => {
-                tab: {
-                    _selected: {
-                        [x: string]: string;
-                    };
-                };
-            };
-        } | undefined;
-        defaultProps?: {
-            size?: string | number | undefined;
-            variant?: "enclosed" | "enclosed-colored" | undefined;
-            colorScheme?: string | undefined;
-        } | undefined;
-        parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-    };
-    Avatar: {
-        baseStyle?: (({ theme }: StyleFunctionProps) => {
-            badge: {
-                [x: string]: string;
-            };
-            container: {
-                [x: string]: string;
-            };
-        }) | undefined;
-        sizes?: {
-            [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -271,7 +325,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
+        parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;

package/dist/Theme/chakra/componentStyles.js

@@ -13,20 +13,16 @@ const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextA
 const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
 const accentText_1 = require("../tokens/builders/accentText");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
-const color_1 = require("../tokens/builders/color");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
+const tone_1 = require("../tokens/builders/tone");
+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);
 const solidFillStyle = (palette, swatch) => {
     const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white);
@@ -36,50 +32,53 @@ const solidFillStyle = (palette, swatch) => {
         color: isHexColor(bg) ? (0, filledSurface_1.labelOnFill)(bg, palette.white, palette.black) : swatch[800],
     };
 };
-// Badge isn't its own component family (no Components/Badge/), so its style config lives here —
-// Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
+// 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);
             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 — 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 = (0, paletteFromTheme_1.paletteOf)(theme);
         const color = (0, accentText_1.accentTextOnCanvas)(palette.red, palette.backgroundColor.main);
         return {
@@ -93,6 +92,21 @@ 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 swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
@@ -110,33 +124,26 @@ 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],
@@ -145,29 +152,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 = (0, paletteFromTheme_1.paletteOf)(theme);
         const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
         const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white)];
         const dot = (0, filledSurface_1.labelOnFill)(fill, palette.white, palette.black);
-        // A browser probe found the checked radio's hover repeating its own resting `fill` —
-        // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
-        // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;
-        // 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 hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
         return {
             control: {
@@ -193,16 +184,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);
@@ -225,15 +207,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

@@ -3,15 +3,5 @@ export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;
 }
-/**
- * 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;