pixelize-design-library 2.4.2 → 3.0.0

package/dist/Theme/provider/ThemeSwitcher.js

@@ -6,8 +6,11 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const index_1 = require("../index");
+const brands_1 = require("../tokens/brands");
 const useCustomTheme_1 = require("../useCustomTheme");
 const useThemeMode_1 = require("./useThemeMode");
+const focusRing_styles_1 = require("../chakra/focusRing.styles");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
 const MODE_OPTIONS = [
     { value: "light", label: "Light", Icon: lucide_react_1.Sun },
     { value: "system", label: "System", Icon: lucide_react_1.Monitor },
@@ -19,21 +22,13 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-/**
- * Same swatch each brand's own theme carries at `colors.primary[500]` (the
- * anchor a filled button reads) — resolved per brand from its OWN palette so
- * the dot always matches what selecting that brand actually looks like,
- * regardless of which brand/mode is currently active.
- */
-const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
+// NOTE: reads the brand's own palette, not its Chakra theme, so the picker builds no themes.
+const brandSwatchColor = (brand) => brands_1.lightPalettes[brand].primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
 };
-/**
- * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
- * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- */
+// Palette already differs per mode, so tokens read straight from the active theme — no useColorModeValue needed.
 const useSwitcherColors = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return {
@@ -45,25 +40,30 @@ const useSwitcherColors = () => {
         borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
+        focusRing: (0, focusRing_styles_1.focusVisibleRing)(colors),
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor, focusRing } = useSwitcherColors();
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: focusRing, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg } = useSwitcherColors();
+    const { mutedColor, hoverBg, focusRing } = useSwitcherColors();
     const isDark = resolvedMode === "dark";
     const Icon = isDark ? lucide_react_1.Moon : lucide_react_1.Sun;
     const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }) }));
 };
 const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
     const { mode, setMode } = (0, useThemeMode_1.useThemeMode)();
     const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    // One tab stop, so the group wears the indicator: brand border plus the field bloom.
+    const focusBorder = (0, outlineRung_1.liftToContrast)(colors.primary[500], trackBg, outlineRung_1.AA_NON_TEXT);
+    const [showFocus, setShowFocus] = (0, react_1.useState)(false);
     const optionRefs = (0, react_1.useRef)([]);
     // APG radiogroup behavior: arrows move focus and selection together.
     const handleKeyDown = (event, index) => {
@@ -77,20 +77,20 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
         setMode(MODE_OPTIONS[next].value);
         (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: showFocus ? focusBorder : borderColor, boxShadow: showFocus ? (0, focusRing_styles_1.focusGlowShadow)(colors) : undefined, borderRadius: "full", onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
                 const isSelected = mode === value;
                 return ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor, focusRing } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

package/dist/Theme/provider/colorModeStorage.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSystemColorMode = exports.getSystemColorMode = exports.writeStoredTheme = exports.readStoredTheme = void 0;
 const DARK_QUERY = "(prefers-color-scheme: dark)";
-/**
- * Stored values are untrusted input — a stale or hand-edited entry must never reach
- * `brandThemes[brand]` and hand Chakra an `undefined` theme.
- */
+// NOTE: stored values are untrusted — a stale/hand-edited entry must never reach brandThemes[brand] as undefined.
 const VALID_MODES = ["light", "dark", "system"];
 const VALID_BRANDS = [
     "lavender",

package/dist/Theme/testing/testPalette.d.ts

@@ -4,6 +4,7 @@ export type DeepPartial<T> = T extends string ? T : {
     [K in keyof T]?: DeepPartial<T[K]>;
 };
 export type PaletteOverrides = DeepPartial<PaletteProps>;
+/** Brand, mode and group overrides for a test palette. */
 export type TestPaletteOptions = {
     brand?: ThemeName;
     mode?: ResolvedColorMode;

package/dist/Theme/themeProps.d.ts

@@ -16,7 +16,9 @@ export type CustomThemeProps = {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;
@@ -84,6 +86,10 @@ export type CustomThemeProps = {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: ChakraTheme["radii"] & {
         none: string;
@@ -107,6 +113,7 @@ export type CustomThemeProps = {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the emerald brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/emerald/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the emerald brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/emerald/palette.light.js

@@ -20,10 +20,7 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 3.38/2.43 against from/to. Same hue, darker.
-    // Both nudged one step further (4.537/4.515 -> 4.618/4.616): the first pass cleared AA by
-    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.38/2.43.
     gradient: { from: "#0d8474", to: "#048096" }, // teal → cyan
     primary,
     // 🌫️ Neutral gray (slightly cool to match teal)
@@ -33,12 +30,7 @@ const palette = {
         200: "#dce5e5",
         300: "#c3d2d2",
         400: "#9fb3b3",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#617474",
         600: "#5e7070",
         700: "#475555",

package/dist/Theme/tokens/brands/index.d.ts

@@ -17,11 +17,12 @@ import rosewoodDark from "./rosewood/palette.dark";
 import storefrontDark from "./storefront/palette.dark";
 import zincDark from "./zinc/palette.dark";
 import type { BrandPaletteSource, PaletteProps, ResolvedColorMode, ThemeName } from "../types";
+export declare const LIGHT_CANVAS_STEP = 1.09;
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export declare const finalizeLightPalette: (source: BrandPaletteSource) => PaletteProps;
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-/** Light palette per brand. `lavender` is the base the other six extend. */
+/** Light palette per brand, derived on first read. `lavender` is the base the other eight extend. */
 export declare const lightPalettes: Record<ThemeName, PaletteProps>;
 export declare const darkPalettes: Record<ThemeName, PaletteProps>;
 export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = void 0;
+exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = exports.LIGHT_CANVAS_STEP = void 0;
 const palette_light_1 = __importDefault(require("./lavender/palette.light"));
 exports.lavender = palette_light_1.default;
 const palette_light_2 = __importDefault(require("./meadow/palette.light"));
@@ -46,21 +46,45 @@ const sidebarAccent_1 = require("../builders/sidebarAccent");
 const mutedText_1 = require("../builders/mutedText");
 const semanticText_1 = require("../builders/semanticText");
 const resolvedRungs_1 = require("../builders/resolvedRungs");
+const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
+const surfaceRaised_1 = require("../builders/surfaceRaised");
+const star_1 = require("../builders/star");
+const lazy_1 = require("../builders/lazy");
+const color_1 = require("../builders/color");
+exports.LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = (0, color_1.mix)(canvas, ink, weight);
+        if ((0, color_1.contrastRatio)(next, card) >= exports.LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return (0, color_1.mix)(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: (0, sidebarAccent_1.withSidebarTokens)(source),
     accentText: (0, accentText_1.pickAccentText)(source.primary, source.backgroundColor.main),
     textMuted: (0, mutedText_1.buildMutedText)(source.text, source.backgroundColor.main),
     semanticText: (0, semanticText_1.buildSemanticText)(source.semantic, source.backgroundColor.main),
     onPrimary: (0, accentText_1.onFilled)(source.primary[500], source.white, source.black),
     onSemantic: (0, semanticText_1.buildOnSemantic)(source.semantic, source.white, source.black),
+    focusRing: (0, focusRing_1.buildFocusRing)(source),
+    surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)(source),
+    star: (0, star_1.buildStar)(source.backgroundColor.main),
 });
 exports.finalizeLightPalette = finalizeLightPalette;
-const resolveRungs = (palette) => (0, surfaceRungs_1.withSurfaceRungs)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette))));
-const lightBrand = (source) => resolveRungs((0, exports.finalizeLightPalette)(source));
-/** Light palette per brand. `lavender` is the base the other six extend. */
+// NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
+const resolveRungs = (palette) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, surfaceRaised_1.withSurfaceRaised)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette))))));
+const lightBrand = (source) => (0, lazy_1.lazyPalette)(source, () => resolveRungs((0, exports.finalizeLightPalette)(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other eight extend. */
 exports.lightPalettes = {
     lavender: lightBrand(palette_light_1.default),
     meadow: lightBrand(palette_light_2.default),
@@ -72,18 +96,18 @@ exports.lightPalettes = {
     storefront: lightBrand(palette_light_8.default),
     zinc: lightBrand(palette_light_9.default),
 };
-/** Dark palette per brand, derived from the matching light palette. */
-const darkBrand = (dark) => resolveRungs(dark);
+/** Dark palette per brand, derived from the matching light palette on first read. */
+const darkBrand = (source, dark) => (0, lazy_1.lazyPalette)(source, () => resolveRungs(dark));
 exports.darkPalettes = {
-    lavender: darkBrand(palette_dark_1.default),
-    meadow: darkBrand(palette_dark_2.default),
-    radiant: darkBrand(palette_dark_3.default),
-    skyline: darkBrand(palette_dark_4.default),
-    slate: darkBrand(palette_dark_5.default),
-    emerald: darkBrand(palette_dark_6.default),
-    rosewood: darkBrand(palette_dark_7.default),
-    storefront: darkBrand(palette_dark_8.default),
-    zinc: darkBrand(palette_dark_9.default),
+    lavender: darkBrand(palette_light_1.default, palette_dark_1.default),
+    meadow: darkBrand(palette_light_2.default, palette_dark_2.default),
+    radiant: darkBrand(palette_light_3.default, palette_dark_3.default),
+    skyline: darkBrand(palette_light_4.default, palette_dark_4.default),
+    slate: darkBrand(palette_light_5.default, palette_dark_5.default),
+    emerald: darkBrand(palette_light_6.default, palette_dark_6.default),
+    rosewood: darkBrand(palette_light_7.default, palette_dark_7.default),
+    storefront: darkBrand(palette_light_8.default, palette_dark_8.default),
+    zinc: darkBrand(palette_light_9.default, palette_dark_9.default),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the lavender brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/lavender/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the lavender brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const brandInk_1 = require("../../builders/brandInk");
 const neutrals_1 = require("../neutrals");
 const PRIMARY_500 = "#8B3FC8";
 const SECONDARY_ANCHOR = "#1e0f30";
@@ -30,19 +31,14 @@ const secondary = {
     900: "#08030b",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_ANCHOR),
 };
-const tertiary = { ...secondary };
+const tertiary = { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity };
 const gray = {
     50: "#f9f7fb",
     100: "#f0eaf6",
     200: "#e4d9f0",
     300: "#cdbde3",
     400: "#a897cc",
-    // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-    // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-    // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-    // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-    // none pair them with gray[500] text; going dark enough to also clear those would push
-    // past gray[600]'s own lightness and break the ramp order.
+    // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
     500: "#746499",
     600: "#5e527a",
     700: "#4a4060",
@@ -144,12 +140,7 @@ const boxborder = {
     800: "#6d6879",
     900: "#52505b",
 };
-/**
- * The low rungs sat two steps too pale to draw anything: `200` — the default hairline for
- * cards, dividers and inputs — was L94 against a L98 canvas, so a card had no visible edge.
- * It now lands at L88, contrast 1.22 against a white card, matching Chakra's gray.200 hairline.
- * Rungs 700+ are unchanged; they were never the problem.
- */
+// NOTE: 200 lifted to L88 (was L94, invisible against an L98 canvas) — matches Chakra's gray.200 hairline.
 const border = {
     50: "#f6f4f9",
     100: "#ede9f4",

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the meadow brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/meadow/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the meadow brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/meadow/palette.light.js

@@ -20,25 +20,16 @@ const primary = {
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.49 there (`from` already passed at 6.39, unchanged).
-    // Nudged one step further (4.519 -> 4.627): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
+    // NOTE: `to` stop retuned so white gradient-button text clears AA — original let it drop to 2.49.
     gradient: { from: "#2d6a4f", to: "#0f8376" }, // forest green → teal
     primary,
-    tertiary: { ...primary },
     gray: {
         50: "#f6f9f7",
         100: "#ecf1ee",
         200: "#dce5e0",
         300: "#c4d2cb",
         400: "#93a99f",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#5c7369",
         600: "#445f52",
         700: "#344a3f",

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the radiant brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/radiant/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the radiant brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/radiant/palette.light.js

@@ -17,13 +17,24 @@ const primary = {
     900: "#531a14",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutrals_1.neutralTokens,
+    red: danger,
+    semantic: { ...neutrals_1.neutralTokens.semantic, error: danger },
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 4.37/2.15 against from/to. Same hue, darker.
-    // Both nudged one step further (4.509/4.502 -> 4.601/4.617): the first pass cleared AA by
-    // <0.01, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
     primary,
     // 🌫️ Neutral gray (slightly warm, not pink)
@@ -33,12 +44,7 @@ const palette = {
         200: "#e2dad5",
         300: "#cec2bb",
         400: "#b3a39a",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#796861",
         600: "#6e6058",
         700: "#534841",
@@ -128,6 +134,7 @@ const palette = {
     boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
         ...neutrals_1.sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 exports.default = palette;

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the rosewood brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/rosewood/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the rosewood brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/rosewood/palette.light.js

@@ -3,27 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const neutrals_1 = require("../neutrals");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
 const brandInk_1 = require("../../builders/brandInk");
-const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const PRIMARY_500 = "#cb6b94";
 const primary = {
-    50: "#fdf2f5",
-    100: "#f9d6de",
-    200: "#f2aaba",
-    300: "#ea7f96",
-    400: "#de627d",
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
     500: PRIMARY_500,
-    600: "#b9556b",
-    700: "#984558",
-    800: "#763646",
-    900: "#552634",
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 const palette = {
     ...neutrals_1.neutralTokens,
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 3.46/2.69 against from/to. Same hue, darker.
-    // Both nudged one step further (4.520/4.505 -> 4.609/4.607): the first pass cleared AA by
-    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.46/2.69.
     gradient: { from: "#c74962", to: "#ea0727" }, // rose → coral pink
     primary,
     // 🌫️ Neutral gray (slightly warm, avoids purple tint)
@@ -33,16 +30,7 @@ const palette = {
         200: "#e4dada",
         300: "#d0c1c1",
         400: "#b4a2a2",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
-        //
-        // First pass (#7b6868) measured 4.516 against `secondary` — a 0.016 margin, too thin to
-        // trust (same failure mode as the gradient-stop retune). Darkened ~0.7 lightness points
-        // (hue/saturation preserved) to restore the safe margin below.
+        // NOTE: retuned to a safe >=4.6 AA margin — first pass (#7b6868) measured 4.516, too thin a margin to trust.
         500: "#796666",
         600: "#6e5e5e",
         700: "#534747",

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

@@ -1,6 +1,2 @@
-/**
- * Dark palette for the skyline brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 declare const palette: import("../..").PaletteProps;
 export default palette;

package/dist/Theme/tokens/brands/skyline/palette.dark.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-/**
- * Dark palette for the skyline brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;